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


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 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
jQuery cdn使用介绍
May 08 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
微信小程序-可移动菜单的实现过程详解
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
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
超简单的Python HTTP服务
2019/07/22 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
UNIX特点都有哪些
2016/04/05 面试题
工厂门卫岗位职责
2013/11/25 职场文书
企划专员岗位职责
2013/12/09 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
市场总监岗位职责
2015/02/11 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
关于vue-router-link选择样式设置
2022/04/30 Vue.js