小程序调用天气接口并且渲染在页面
时间:2022-06-24
本文章向大家介绍小程序调用天气接口并且渲染在页面,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
五分钟上手-微信小程序组件库 iView Weapp https://www.jianshu.com/p/09b4515152ff
前两天写了关于组件库 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>
- SQL中利用DMV进行数据库性能分析
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建
- 独家!万达网科大裁员后将转型AI 朱战备或接班曲德君
- Git分支管理的策略梳理
- 数据场景分析 线上线下商家到底谁能干过谁?
- 张钦坤:云计算、开放平台与服务商版权责任
- biztalk 2010 dev版安装小记
- 微信小程序如何获取组件实际高度
- flex4/flash builder中动态加载Module并与之交互的正确方式
- Google发布会看图的人工智能,让它来评评你的照片拍得好不好
- Git日常操作命令梳理
- Git忽略规则.gitignore梳理
- 深入浅出事件流处理NEsper(二)
- 微信推出“微信使用小助手”,中老年人也能轻松玩转微信
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 树莓派基础实验39:解析无线电接收机PWM、SBUS信号
- nodejs源码分析第十九章 -- udp模块
- Spark Extracting,transforming,selecting features
- 逆向so文件调试工具ida基础知识点
- 二叉搜索树中的众数
- 了解递归:普通函数递归和非递归栈式实现之间的区别
- 字节真题 ZJ26-异或:使用字典树代替暴力破解降低时间复杂度
- curl命令半天没响应,有可能返回内容导致session挂了
- 查看JVM参数信息 查看G1堆的使用情况
- LC1263-AI寻路优化: 距离优先bfs -> heuristic + A* -> tarjan + A*
- 从Zookeeper 到 Elastic Job 的原理解析和使用(一)
- 从Zookeeper 到 Elastic Job 的Simple Job使用(二)
- resteasy 接收post请求参数——json and 表单
- 合理配置Mysql缓存,提高缓存命中率
- 浮点数的基本数据类型不能用 == 比较