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

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

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

项目效果
微信小程序开发之天气查询
准备工作
 
小程序采用的是百度天气查询接口,在开始项目之前需要先申请百度地图开放平台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马上就要来了!想要变美变瘦,想要考试顺利想要画得更好,还想要——更多的小鱼干——那就来和小猫咪一起许下你的新年心愿吧! 绘 课 堂 · 线 稿 用小小的线条排列画出猫咪的身体轮廓以及身体上的主要毛发质感,仔细地勾勒猫…

幸运草
看图猜成语Pro 小程序-一起猜成语 知识分享

看图猜成语Pro 小程序-一起猜成语

看图猜成语Pro是一款益智小游戏,是用一幅画或几个字的组合来猜一个成语。该游戏巧妙地使用图与字的结合,能够让玩家在休闲娱乐的同时能够了解到成语的趣味。   看图猜成语Pro针对0-12岁的孩子设计,成...
内外部网站抓取收录算法 网站

内外部网站抓取收录算法

如何让新上线的网站当天被百度收录最近百度对于新站的收录尤为严格,尤其是Info域名或者国外的虚拟主机,我猜想,百度也是害怕了站群对它所带来的影响,需要对每一个涉嫌站群的域名或者是服务器进行严格的审查,...
网站收录问题的常规解决方法 网站

网站收录问题的常规解决方法

网站收录算法研究之新站收录一般要解决收录问题的站可以分为两类:新站和老站。本文主要从这两个方面进行阐述,受惩罚的站不在此范围内。 一、新站问题。 1.网站上线一周前,先去做一些论坛签名或者软文之类的锚...
如何让网站收录高 内容的质量的关键 网站

如何让网站收录高 内容的质量的关键

网站收录算法研究之新站收录作为一个网站,如何评判网站内容的质量。大家都知道。内容是网站的重点,做网站难以解决的问题之一就是内容,它决定了一个网站能有多大的成就,前期没有好的内容支持,哪怕再有营销思路都...