微信小程序调用天气接口并且渲染在页面过程详解


Posted in Javascript onJune 24, 2019

前两天写了关于组件库 iView Weapp的教程,其实也就是把文档上的例子拿出来体验了一遍,今天写一个具体的例子,调用一个免费的天气接口的api,并且把所获取的内容展示在前端的界面,前端界面与 iView Weapp结合,展示的一个小的demo.

先上效果

微信小程序调用天气接口并且渲染在页面过程详解

开始写代码:

1:找打一个免费的天气接口

免费接口api:

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

https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7

2:写js代码

写一个request请求,把准备好的天气接口放在url里面,当请求成功的时候,在控制台打印一下返回的res.data数据

wx.request({
url: 'https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7',
header: {
'content-type': 'application/json'
},
success: res => {
console.log(res.data)
}
})

这个时候可以看到控制台已经有打印了接口数据了

微信小程序调用天气接口并且渲染在页面过程详解

3:接收到了数据之后,是对数据进行处理

在请求接口成功之后,用setData接收数据,并且需在data中声明一个接收数据的变量。

微信小程序调用天气接口并且渲染在页面过程详解

4:js写完之后,现在开始写wxml里面的内容,将数据渲染在界面

前面说用的是组件库 iView Weapp,样式可以自己选择,我这里选了一个卡片。

在使用组件的时候,需要在json里面引入一下:

微信小程序调用天气接口并且渲染在页面过程详解

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

将里面的代码复制过来,放在wxml,并且根据改成自己需要的。

<view class='list-li mflex' wx:for="{{list.forecast}}" wx:key="index">
<i-card title="{{list.city}}天气" extra="{{list.city}}" thumb="https://i.loli.net/2017/08/21/599a521472424.jpg">
<view slot="content">
{{item.date}} 
{{item.high}} 
{{item.low}} 
</view>
<view slot="footer">{{list.ganmao}}</view>
</i-card>
</view>

ok,到这里就完成了。

5:贴一下完整的代码:

json:

{
"usingComponents": {
"i-card": "../../dist/card/index"
}
}

js:

Page({
data: {
list: []
},
onLoad: function (options) {
wx.request({
url: 'https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7',
header: {
'content-type': 'application/json'
},
success: res => {
console.log(res.data)
this.setData({
//第一个data为固定用法,第二个data是json中的data
list: res.data.data
})
}
})
},
})

wxml:

<view class='list-li mflex' wx:for="{{list.forecast}}" wx:key="index">
<i-card title="{{list.city}}天气" extra="{{list.city}}" thumb="https://i.loli.net/2017/08/21/599a521472424.jpg">
<view slot="content">
{{item.date}} 
{{item.high}} 
{{item.low}} 
</view>
<view slot="footer">{{list.ganmao}}</view>
</i-card>
</view>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
微信小程序-可移动菜单的实现过程详解
Jun 24 #Javascript
webpack自动打包和热更新的实现方法
Jun 24 #Javascript
Promise扫盲贴
Jun 24 #Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 #Javascript
前端天气插件tpwidget使用方法详解
Jun 24 #Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 #Javascript
JS实现给数组对象排序的方法分析
Jun 24 #Javascript
You might like
php中实现记住密码自动登录的代码
2011/03/02 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
PHP与以太坊交互详解
2018/08/24 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
对于Python的框架中一些会话程序的管理
2015/04/20 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python通过实例讲解反射机制
2019/10/17 Python
python文字转语音实现过程解析
2019/11/12 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
特步官方商城:Xtep
2017/03/21 全球购物
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
文化活动实施方案
2014/03/28 职场文书
施工安全标语
2014/06/07 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
旷工检讨书1000字
2015/01/01 职场文书
工作感想范文
2015/08/07 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python