|
|
从上一篇帖子中，我们已经建立了自己的第一个微信小程序，现在将介绍如何根据百度API获取天气信息。
本文将从以下三个方面进行展开介绍：
一、在百度地图开发平台申请AK
二、下载API模块
三、进行天气信息的探索
一、在百度地图开发平台申请AK
1.1 注册账号
若有账号，则跳过此步骤。
搜索http://lbsyun.baidu.com进入百度地图开放平台首页，在首页的开发文档下的微信晓辰戌Javascript API，进入小程序JS API的开发，展开左侧的开发指南找到账号与密钥。
（也可以直接搜索http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key进入！！！）进入之后，将看到官方对于账号和密钥的使用方法介绍。
进入百度地图开放平台首页，点击右上角"API控制台"，注册成为百度地图开发者。如果未登录百度账号，官方会引导登录百度账号。如果账号未注册，请根据官方提示填写正确的
邮箱及手机号完成开发者注册流程。
1.2 创建应用
再次点击进入控制台，创建一个新应用。
应用名称自定义、应用类型选择微信小程序、启用服务建议全勾选、APPID（微信小程序的APPID、通过微信小程序微信认证获得，完善小程序信息后，APPID会自动生成。
在小程序发布流程下的小程序信息中，点击查看详情，一直往下滑即可看到。）。填写完成后点击提交。
1.3 获取密钥
应用创建完成后，即可在应用页面看到申请成功的密钥（AK）。
二、下载API模块
在百度地图开放平台中下载百度地图微信小程序JavaScript API。
搜索http://lbs.baidu.com/index.php?title=wxjsapi/wxjs-download，进行下载。
解压后在wxapp-jsapi-master文件夹下的src中有两个JS文件，bmap-wx.js为常规没压缩的，bmap-wx.min.js是压缩过的，由于微信小程序项目文件大小有限制，建议使用压缩过的。
在项目中新建一个文件夹libs,将bmap-wx.min.js文件拷贝到libs下。
三、进行天气信息的探索
在编写代码前，可以临时开启开发环境不校检请求域名、TLS版本及HTTPS证书选项，跳过服务器域名的校检。
打开js文件，用下面的代码完全替代原代码。
在以下代码中，首先引用百度地图微信小程序JavaScript API模块，然后调用BMapWX.weather方法进行天气信息的探索。
注意替换您的AK！！！
- 1. // 引用百度地图微信小程序JSAPI模块，也就是刚刚下载的JSAPI模块
- 2. var bmap = require('../../libs/bmap-wx.min.js');
- 3. Page({
- 4. data: {
- 5. weatherData: ''
- 6. },
- 7. onLoad: function () {
- 8. var that = this;
- 9. // 新建百度地图对象
- 10. var BMap = new bmap.BMapWX({
- 11. ak: '您的ak'
- 12. });
- 13. var fail = function (data) {
- 14. console.log(data)
- 15. };
- 16. var success = function (data) {
- 17. var weatherData = data.currentWeather[0];
- 18. weatherData = '城市：' + weatherData.currentCity + '\n' + 'PM2.5：' + weatherData.pm25 + '\n' + '日期：' + weatherData.date + '\n' + '温度：' + weatherData.temperature + '\n' + '天气：' + weatherData.weatherDesc + '\n' + '风力：' + weatherData.wind + '\n';
- 19. that.setData({
- 20. weatherData: weatherData
- 21. });
- 22. }
- 23. // 发起weather请求
- 24. BMap.weather({
- 25. fail: fail,
- 26. success: success
- 27. });
- 28. }
- 29. })
打开wxml文件，用下面的代码完全替代原代码。
- 1. <view class="weather">
- 2. <text>{{weatherData}}</text>
- 3. </view>
完成之后，进行保存编译，即可看到示例效果，页面加载完成后会自动显示当前定位城市的天气信息。
以上就是根据百度API获取天气信息的全部内容，感谢您的观看！
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有帐号？注册
x
阿莫论坛20周年了！感谢大家的支持与爱护！！
月入3000的是反美的。收入3万是亲美的。收入30万是移民美国的。收入300万是取得绿卡后回国，教唆那些3000来反美的！
|
发表于 2020-10-13 10:46:40
楼主
