微信小程序调用天气界面 在页面流程上详细渲染

两天前，我写了一篇关于组件库iView Weapp的教程。其实我把文档里的例子拿出来再体验了一遍。今天我写了一个具体的例子，叫做自由天气界面api，在前端界面显示获取的内容。前端界面结合iView Weapp展示了一个小演示。

第一效果

开始编写代码：

1:找一个免费的天气界面

自由接口api:

https://www.apiopen.top/api.html#top

https://www.apiopen.top/weatherApi?城市=上海

2.编写js代码

写一个请求，把准备好的天气界面放在url中，当请求成功时，在控制台上打印返回的res.data数据

wx . request({ URL : ' https://www . API open . top/Weather APi？City=Shanghai '，header : { ' content-type ' : ' application/JSON ' }，success 3360 RES={ console . log(RES . data)})此时可以看到界面数据已经被控制台打印出来了。

3:接收数据后，是对数据进行处理

请求接口成功后，用setData接收数据，并在数据中声明一个接收数据的变量。

4:4:js完成后，现在开始用wxml编写内容，并在界面上呈现数据

如前所述，使用的是组件库iView Weapp，样式可以自己选择。我在这里选了一张牌。

使用组件时，您需要将其引入json:

https://weapp.iviewui.com/components/card

复制里面的代码，放入wxml中，根据自己的需要进行修改。

=' { { list }的视图类=' list-Li mflex' wx:forecast } } ' wx : key=' index ' I-card title=' { { list。city } } weather ' extra=' { { list . city } } Thumb=' https://i.loli.net/2017/08/21/599a521472424.jpg' view slot=' content“{ item . date } } { { item . high } } { { item . low } }/view slot=

5:粘贴完整的代码：

json:

{ '使用组件' : {'i-card': '././dist/card/index'}}js:

Page({data: {list: []}，onLoad:函数(选项){ wx . request({ URL : ' https://www . API open . top/Weather APi？City=Shanghai '，header : { ' content-type ' : ' application/JSON ' }，success 3360 RES={ console . log(RES . data)this . setdata({//第一个数据是固定用法，第二个数据是datalist3360res.data.in JSON。

=' { { list }的视图类=' list-Li mflex' wx:forecast } } ' wx : key=' index ' I-card title=' { { list。city } } weather ' extra=' { { list . city } } ' thumb=' https://I . loli . net/2017/08/21/599 a 521472424 . jpg ' View slot=' content ' { item . date } } { { item . high } } { { item . low } }/View slot=' footer ' { list。ganmao}}/view/I-card/view以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。