微信小程序开发之天气查询

幸运草
幸运草
幸运草
976
文章
3
评论
2020年5月11日18:41:50 评论 102

今天给大家介绍利用微信小程序开发实现天气查询的功能,此页面在用户输入城市名之后可以显示当前城市的天气情况,当然也可以根据返回的数据获取之后三天的天气情况。

项目效果
微信小程序开发之天气查询
准备工作
 
小程序采用的是百度天气查询接口,在开始项目之前需要先申请百度地图开放平台ak,申请的具体步骤如下:
1
进入百度开放平台官网,(https://lbs.baidu.com)点击右上角“API控制台”,注册成为百度地图开发者。如果未登录百度账号,会引导登录百度账号。如果账号未注册,请根据提示填写正确的邮箱及手机号完成开发者注册流程。
2
再次点击进入控制台,创建一个新应用。根据提示输入应用名称,应用类型(微信小程序),Appid(这里要写入微信公众平台小程序的appid,有疑问的可查看另一篇文章微信公众平台小程序账号注册)。
3
应用添加完成之后即可查看应用的ak。
4
登录微信公众平台-> "设置" -> "开发设置" -> "request 合法域名" ->添加 api.map.baidu.com -> 点击"保存并提交",如图所示:
微信小程序开发之天气查询
项目实现
微信小程序开发之天气查询
天气查询小程序的界面主要包含两大块,上方一个输入框输入城市名,一个搜索图标点击实现搜索功能;下方展示搜索结果。在js文件中通过request方法请求百度天气查询接口

'https://api.map.baidu.com/telematics/v3/weather?output=json&ak=' + ak + '&location=' + that.data.city,

需要指定ak和要查询的城市名,请求成功返回的数据如下

微信小程序开发之天气查询
微信小程序开发之天气查询
可以根据返回数据的结构来获取相应的数据,如需要获取到明天的天气,可以用res.data.results[0].weather_data[1]用户可根据自己的需求使用相应的数据显示到wxml页面中,我们这个项目主要呈现的是当天的天气、天气图片、温度和风向。
项目代码
微信小程序开发之天气查询
微信小程序开发之天气查询
微信小程序开发之天气查询
微信小程序开发之天气查询
微信小程序开发之天气查询

特别声明:以上文章内容仅代表作者本人观点,不代表变化吧观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

拜托了,2016!| 教程

绘 课 堂 · 猫 咪 的 祈 祷 2016马上就要来了!想要变美变瘦,想要考试顺利想要画得更好,还想要——更多的小鱼干——那就来和小猫咪一起许下你的新年心愿吧! 绘 课 堂 · 线 稿 用小小的线条排列画出猫咪的身体轮廓以及身体上的主要毛发质感,仔细地勾勒猫…

转载请注明:{{title}}-变化吧
  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 赞助本站
  • 支付宝扫一扫
  • weinxin
幸运草
“勒索”全世界丨解密WannaCry帝国“合伙人” 劫持

“勒索”全世界丨解密WannaCry帝国“合伙人”

绕过激活锁工具教程分享说明一下并不是所有的设备都可以,目前是5s以上到苹果x以下的机型适用,机子没有别的故障的正常机子只是被id锁了,基带坏了也可以只要是CPU正常开机, 第一个 连接:https:/...
勒索软件防暴术:企业需要学会这四招 劫持

勒索软件防暴术:企业需要学会这四招

LiteBee编程无人机教程分享 ,小白从入门到精通必备!LiteBee作为一款入门级编程飞行器套件,在搭建、编程和控制中都能够让使用者轻松自如的上手。但必定有很多人还是不了解或者对其编程方面存在疑问...
全球爆发勒索病毒 多家安全厂商推防御方案 劫持

全球爆发勒索病毒 多家安全厂商推防御方案

5月12日,英国、意大利、俄罗斯等全球多个国家爆发勒索病毒攻击,中国的校园网也未能幸免,部分高校电脑被感染,有学生毕业论文被病毒加密,只有支付高额赎金才能恢复。 而在英国方面, 5月12日英国国家医疗...