小程序导入百度天气
Facechat 2018-07-09 16:37:36 1413 收藏
展开
目前因为公司的需求，在看小程序，发现小程序还是与VUE很像的，对于有一定VUE基础的，学习小程序还是很容易入手的。
这次就来聊一下，小程序中百度天气的引入和展示。
1.申请AK
申请小程序百度AK：http://lbsyun.baidu.com/apiconsole/key
点击创建应用
应用类型选择微信小程序，APP ID选择你小程序的APP ID，应用名称填写完成
点击提交，在查看应用里就有我们所创建的应用了
2.下载bmap-wx.min.js，下载地址：http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download
下载之后解压，放入项目即可
3.项目导入bmap-wx.min.js
js模块
// 引用百度地图微信小程序JSAPI模块
var bmap = require(‘../../libs/bmap-wx.min.js‘);
Page({
data: {
weatherData: ‘‘
},
onLoad: function () {
var that = this;
// 新建百度地图对象
var BMap = new bmap.BMapWX({
ak: ‘KxGr398R7wWkrmhWGOI8bmham3hvUwQK‘
});
var fail = function (data) {
console.log(data)
};
var success = function (data) {
var weatherData = data.currentWeather[0];
weatherData = ‘城市：‘ + weatherData.currentCity + ‘\n‘ + ‘PM2.5：‘ + weatherData.pm25 + ‘\n‘ + ‘日期：‘ + weatherData.date + ‘\n‘ + ‘温度：‘ + weatherData.temperature + ‘\n‘ + ‘天气：‘ + weatherData.weatherDesc + ‘\n‘ + ‘风力：‘ + weatherData.wind + ‘\n‘;
that.setData({
weatherData: weatherData
});
}
// 发起weather请求
BMap.weather({
fail: fail,
success: success
});
}
})
wxml模块
<view class="weather">
<text>{{weatherData}}</text>
</view>
4.完成
碰到的问题：
1.
2. https://api.map.baidu.com 不在以下 request 合法域名列表中，请参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html
解决方法：添加合法域名（必须是https）
清除项目缓存，再次编译即可（或者退出项目，再次打开即可）
————————————————
版权声明：本文为CSDN博主「Facechat」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mnhn456/article/details/80973077