• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

天气查询小程序

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1.前期准备

1.1picker组件

picker是从底部弹起的滚动选择器组件,目前根据mode属性值的不同共支持5种选择器,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器。若省略mode值不写,则默认效果是普通选择器。



除了上述通用的属性,对于不同的mode,picker拥有不同的属性。
这个小程序主要使用的是当mode=’region’时的省市区选择器效果(最低版本为1.4.0)

1.2网络API

和风天气:提供的API接口
根据网站的相关代码提示和接口信息制作url
回到微信公众平台,添加服务器域名

步骤:
(1)百度搜索 “和风天气官网”

(2)点击进入官网 -->点击天气API进行注册–>注册成功后登录控制台 --> 点击应用管理 ,选择新建应用 (名称随便写) -->添加key(类型选择Web API)

点击进入官网

点击天气API进行注册



注册成功后登陆控制台


点击应用管理,选择新建应用


添加key(类型选择Web API)

把key记录下来

(3)获取天气的小图标: 点击开发文档–>参考资料–>天气代码和图标 -->点击图片打包下载到桌面–>解压(只解压_MACOSX下面的图片)到项目的images文件下

(4)获取天气信息:选择文档的API -->选择常规天气数据
请求URL:
免费版:https://free-api.heweather.net/s6/weather/{weather-type}?{parameters}

商业版https://api.heweather.net/s6/weather/now?location=beijing&key=xx

我们使用免费版,例如查询北京的数据:
https://free-api.heweather.net/s6/weather/now?location=beijing&key=
01db9ba239584d93878c71dbf77956f3

(5)登录微信公众平台:开发–>开发设置–>服务器域名 -->扫码登录–>设置request合法域名

2.代码实现

app.json中定义代码如下

index.wxml中代码如下



index.wxss中代码如下

index.js中代码如下


3.功能介绍

在picker组件中绑定事件bindchange,当触发事件时changeRegion函数会被执行,同时还会收到一个事件对象event。


在index.js中的changeRegion函数执行时会改变原来的定义在index.wxml中的region变量值,并且会调用天气函数getWeather()进行天气更新


天气函数中调用了微信提供的专属API接口wx.request进行网络请求
wx.request中属性如下


其中url为必传,请求网络接口地址
data为请求参数,根据请求的接口实际需要参数来传递
success函数为调用成功时的回调函数,此时一般会传入一个对象值用于给我们使用

因此此时可以填入我们之前获取的和风天气的url地址,必传参数location和key,key是我们创建应用时得到的key

res为调用回调函数成功时传给我们的对象,先在控制台输出查看一下,此时在该函数中修改在data中的变量值now,然后可根据now的属性修改在index.wxml中定义的各个变量值


在onLoad函数中调用getWeather函数表示页面每刷新一次会调用一次getWeather函数,这样避免了在没有使用picker组件去触发事件时页面刷新带来的变量now为空的情况,从而使页面数据加载不出来

4.界面展示




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序之初体验-关于当前系统代理不是安全代理发布时间:2022-07-18
下一篇:
微信小程序支付二 支付开发发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap