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

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

项目效果

准备工作

 

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