1.天气预报小程序

实训1.
认识文件类型。

删除多余的部分
在各个文件里面可以删除一些不必要的代码,是微信自带的一些辅助函数。

在:app.wxss,app.js等等
学习了在小程序中的布局。方法跟css大体上一样。
学习了view空间的使用做出了

这个风格。


实训2:

完成了下边栏的部署:

1.对js里面的箭头函数不理解:

去网上查找了相关的资料:

通常函数的定义方法

var fn1 = function(a, b) {

    return a + b

}

function fn2(a, b) {

    return a + b

}

使用ES6箭头函数语法定义函数,将原函数的“function”关键字和函数名都删掉,并使用“=>”连接参数列表和函数体。

var fn1 = (a, b) => {

    return a + b

}

(a, b) => {

    return a + b

}

当函数参数只有一个,括号可以省略;但是没有参数时,括号不可以省略。

// 无参

var fn1 = function() {}

var fn1 = () => {}

// 单个参数

var fn2 = function(a) {}

var fn2 = a => {}

// 多个参数

var fn3 = function(a, b) {}

var fn3 = (a, b) => {}

// 可变参数

var fn4 = function(a, b, …args) {}

var fn4 = (a, b, …args) => {}

箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,省略掉了{ … }和return。还有一种可以包含多条语句,这时候就不能省略{ … }和return

() => return ‘hello’

(a, b) => a + b

(a) => {

  a = a + 1

  return a

}

如果返回一个对象,需要特别注意,如果是单表达式要返回自定义对象,不写括号会报错,因为和函数体的{ … }有语法冲突。

注意,用小括号包含大括号则是对象的定义,而非函数主体

x => {key: x} // 报错

x => ({key: x}) // 正确

箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。(词法作用域就是定义在词法阶段的作用域。换句话说,词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的,因此当词法分析器处理代码时会保持作用域不变 。

2.然后是下边栏的滑动布局:

wx提供了wx:for=”{{}}”的方法是我们可以更方便的写出多个相同的布局。
3.是对callback的用法理解:
对于callback的用法理解

在函数头使用callback作为输入参数。此参数可以为函数方法或参数。

在onPullDownRefresh里面调用getNow方法里面的参数填入一个匿名方法。
在getNow里面判断是否填入了callback 。填入了就执行填入的函数方法。


4完成了对list的页面的布局和对里面数据的使用。
.
在里面使用’https://test-miniprogram.com/api/weather/future’,访问得到未来七天的天气情况通过setWeekWeather函数将获取到的json格式的七天天气资料分给各个参数。


5.获取经纬度,和用经纬度获取当前所在的城市。
要做一个获取当前位置的方法

使用wx.getLocation方法就可以找到当前的位置经纬度信息。
我们再通过使用qq.map提供的api找到当前的城市信息。
latitude: res.latitude,

longitude: res.longitude
注意在使用qq.map提供的api是要设置白名单。


5.对设置了位置,设置一个状态码

在进行设置了或者手动打开了位置信息后通过以下函数进行判断,设置了就获取当前位置的天气设置状态码。没设置使用默认广州设置状态码。


这里在布局文件里面也可以使用判断语句来判断状态码,病指向相应的操作。

小程序源码:

http://faye.website/wp-content/uploads/2020/07/天气预报小程序.zip

最后修改日期:2020年7月19日

作者

留言

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。