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

前两天写了关于组件库 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在微信小程序中渲染HTML内容的方法示例

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文本内容.然而,这个组件存在一个极

  • 详解微信小程序调用支付接口支付

    我前段时间做微信支付,遇到了很多坑,网上也没有讲解的特别明白的,通过借鉴各路人才的经验,最后也完成了,网上有很多讲解,我在这只讲一些注意点和解决的方法.我就讲讲我从完全懵到完成的过程吧. 在微信提供的接口文档中提供了一个微信支付接口,应该是直接调用这个接口就可以发起微信支付 文档路径:https://developers.weixin.qq.com/miniprogram/dev/api/api-pay.html#wxrequestpaymentobject 但是,当开始信心满满的去看所需参数时

  • 微信小程序使用for循环动态渲染页面操作示例

    微信小程序使用for循环动态渲染页面操作示例

    本文实例讲述了微信小程序使用for循环动态渲染页面操作.分享给大家供大家参考,具体如下: 先来看看运行效果: 这种列表效果可以说是最常见的一种,肯定不是我们一个一个写上去,这就用到了我们这次要说的for循环渲染了 其实也很简单,我就直接上代码了 wxml部分: <view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'> <text

  • 微信小程序调用PHP后台接口 解析纯html文本

    微信小程序调用PHP后台接口 解析纯html文本

    微信小程序调用PHP后台接口,解析纯html文本,效果图片预览 1.微信js动态传参: wx.request({ url: 'https://m.****.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//含富文本html data: { is_detail:1 }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT heade

  • 浅谈高大上的微信小程序中渲染html内容—技术分享

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文本内容.然而,这个组件存在一个极

  • 微信小程序调用微信支付接口的实现方法

    微信小程序调用微信支付接口的实现方法

    前言:应项目要求,需要使用微信小程序做支付,写完后告知手续费太高方案不予通过(宝宝心里苦,但宝宝不说).此次开发在因站在巨人的肩膀上顺利完成. 微信支付文档传送门:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3 1.开发工具: Eclipse+Tomcat+微信web开发工具 2.开发环境: java+maven 3.开发前准备: 3.1 所需材料 小程序的appid,APPsecret,支付商户号(mch_i

  • 微信小程序学习笔记之函数定义、页面渲染图文详解

    微信小程序学习笔记之函数定义、页面渲染图文详解

    前面一篇介绍了微信小程序目录结构.基本配置.这里再来介绍一下函数定义.页面渲染. 小程序逻辑app.js:定义App函数用来注册一个小程序,包含全局数据和函数,指定小程序的生命周期回调等.整个小程序只有一个 App 实例,全部页面共享使用. //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStor

  • 微信小程序 wx.request(接口调用方式)详解及实例

    微信小程序 wx.request(接口调用方式)详解及实例

    微信小程序 wx.request----接口调用方式 最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例. wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' },

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

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

    前两天写了关于组件库 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%

  • 微信小程序调用支付接口的完整流程记录

    目录 当然在开发之前,我们需要有下面这些东西: 步骤如下: 总结 官方的文档路径------>文档路径:developers.weixin.qq.com/miniprogram… 当然在开发之前,我们需要有下面这些东西: appId(小程序分配) 小程序密钥(小程序配置界面获取) 商户号 api密钥(商家后台自己设置) 首先我们要知道把大象放进冰箱拢共需要三步(不是),那么我们调起支付也是一样的 步骤如下: wx.login获取用户临时登录凭证code,发送到后端服务器换取openId 在下单时

  • 微信小程序引用公共js里的方法的实例详解

    微信小程序引用公共js里的方法的实例详解

    微信小程序引用公共js里的方法的实例详解 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag

  • 微信小程序：数据存储、传值、取值详解

    小程序界面传值 父级界面:A界面 子级界面:B界面 一.url传值 详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释. 1. 正向传值:A界面 –>B界面 用 navigator标签或 wx.navigator传值,A界面向B界面传id值 A界面获取id值传向B界面如果需要传多个参数, 用 & 链接即可 // 方法一:navigator标签传值 <navigator url="/page/index/index?id=110" >传值&

  • 微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解 button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值. 如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角.如下图所示: 如上图四个角会模糊..wxss代码如下: .clickEncryptBtn{ width:130px; border-radius: 3px; margin:20px auto; padding-to

  • 微信小程序授权获取用户详细信息openid的实例详解

    微信小程序授权获取用户详细信息openid的实例详解

    小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl, }) }, }) 第二种 我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如

  • 微信小程序组件 contact-button（客服会话按钮）详解及实例代码

    微信小程序组件 contact-button contact-button 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话. 属性名 类型 默认值 说明 size Number 18 会话按钮大小,有效值 18-27,单位:px type String default-dark 会话按钮的样式类型,有效值 default-dark, default-light session-from String   用户从该按钮进入会话时,开发者将收到带上本参数的事件推送.本

  • 微信小程序学习笔记之获取位置信息操作图文详解

    微信小程序学习笔记之获取位置信息操作图文详解

    本文实例讲述了微信小程序学习笔记之获取位置信息操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序文件上传.下载操作.这里分析一下获取位置信息操作. [获取当前位置信息]wx.getLocation() getlocation.wxml: <view> <button bindtap="getlocation">获取位置</button> </view> getlocation.js: Page({ getlocation: fu

  • 微信小程序滚动、轮播图和文本实例详解

    微信小程序滚动、轮播图和文本实例详解

    目录 小程序的宿主环境 - 组件 1.scroll-view 组件的基本使用 2.swiper 和 swiper-item 组件的基本使用 3.text 组件的基本使用 4.rich-text 组件的基本使用 附:微信小程序轮播图单独添加图片.修改轮播图图片.单独修改某张图片 总结 小程序的宿主环境 - 组件 1.scroll-view 组件的基本使用 实现如图的纵向滚动效果 <scroll-view class="container_2" scroll-y> <vi

随机推荐