8、单机版天气预报(wx:for循环结构)
只是点击授权然后获取头像显示，感觉好low，跟官方的例子有啥区别，加个
天气预报的东东吧，这里采用的天气接口是：魅族天气API，接口地址如下：
访问看下，返回的数据如下：
开发初期，为了提高开发的效率，会先造假数据，前后端约定好接口的返回数据。
由后端写一个接口返回假数据，或者前端本地跑一个mock服务器，也可以直接写
死在程序中。这里为了方便，直接写死，在index.js的page中添加下述数据：
city: '深圳', province: '广东省', realtime: { img: "1", sD: "72", sendibleTemp: "25", temp: "25", time: "2019-04-17 16:35:08", wD: "西南风", wS: "1级", weather: "多云", ziwaixian: "N/A" }, indexes: [{ abbreviation: "uv", alias: "", content: "辐射较弱，涂擦SPF12-15、PA+护肤品。", level: "弱", name: "紫外线强度指数" }, { abbreviation: "pp", alias: "", content: "建议用露质面霜打底，水质无油粉底霜，透明粉饼，粉质胭脂。", level: "控油", name: "化妆指数" }, { abbreviation: "yd", alias: "", content: "天气较好，且紫外线辐射不强，适宜户外运动。", level: "适宜", name: "运动指数" }, { abbreviation: "xc", alias: "", content: "洗车后，只能保持1天车辆清洁，不太适宜洗车。", level: "较不适宜", name: "洗车指数" }, { abbreviation: "ct", alias: "", content: "天气较热，衣物精干简洁，室内酌情添加空调衫。", level: "热", name: "穿衣指数" }, { abbreviation: "gm", alias: "", content: "感冒较易发生，干净整洁的环境和清新流通的空气都有利于降低感冒的几率，体质较弱的童鞋们要特别加强自我保护。", level: "较易发", name: "感冒指数" }],
接着index.wxml添加控件：
<button style="margin-top: 50rpx">刷新天气</button> <view style="height: 100rpx;flex-direction:column;"> <text>城市：{{city}}</text> <text>省：{{province}}</text> <text>天气：{{realtime.weather}}</text> <text>温度：{{realtime.temp}}°C</text> <text>湿度：{{realtime.sD}}</text> <text>更新时间：{{realtime.time}}</text> <text>风向：{{realtime.wD}}</text> <text>风力：{{realtime.wS}}</text> </view>
运行结果如下：
文字都堆叠到一起了，设置下样式：
.message-text { margin-left: 15rpx; display: block; margin-top: 50rpx; }
接着每个text设置下message-text这个类选择器，运行效果如下：
接着把indexes里的数据也显示出来，通过wx:for循环生成结点：
<block wx:for="{{indexes}}" wx:for-item="item" wx:key="key"> <text>{{item.name}}：{{item.abbreviation}}</text> <text>{{item.content}}</text> <text>{{item.level}}</text> </block>
运行后结果如下：
文本都堆在一起密密麻麻的，写个样式：
.indexes-text { display: block; margin-left: 15rpx; } .indexes-text-last{ display: block; margin-left: 15rpx; padding-bottom: 50rpx; }
运行结果如下：
9、网络版天气预报(wx.request发起请求)
单机版的就完成了，接着通过wx.requests来请求接口，实现一个网络版的天气预报。
index.js中新增刷新天气的函数：
refreshWeather: function () { var that = this wx.request({ url: 'http://aider.meizu.com/app/weather/listWeather', data: { 'cityIds': '101280601' }, method: 'GET', headers: { 'User-Agent:': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36', 'Host': 'aider.meizu.com' }, success: function (res) { if (res.data.code == 200) { that.setData({ weather: res.data.value[0] }) } }, }) },
接着按钮设置下点击时触发这个网络请求：
<button style="margin-top: 50rpx" bindtap="refreshWeather">刷新天气</button>
因为接口是http的，还需要微信开发者工具点开详情，勾选下：
接着点击运行，点击刷新天气，在Network选项卡可以看到发出的请求信息：
然后咧，微信小程序的视图层和逻辑层类似MVVM模式，逻辑层只需对数据对象
更新，即可改变视图层的数据数据显示，这里setData后，对应的控件也会改变。
到此一个非常简单的天气预报小程序就完成了。
小结
本节介绍了微信小程序开发环境的搭建，开发一个简易天气小程序体验了一波微信
小程序，相信读者对于微信小程序有个基本的了解了，接下来的章节会慢慢细化
一些知识点，比如控件定位，UI相关，请求封装，开源开发框架WePY等等，敬请期待~
