微信小程序入门2--根据百度API获取天气预报
本帖最后由 湖畔科技 于 2020-2-21 17:58 编辑三步完成根据百度API获取天气预报
第一步： 在百度地图开放平台申请AK
第二步: 下载百度地图微信小程序JavaScript API模块
第三步：调用BMapWX.weather方法进行天气信息的检索
第一步：
搜索http://lbsyun.baidu.com/进入百度地图开放平台首页，在首页的开发文档下的微信小程序JavaScript API，进入小程序js API的开发，展开左侧的开发指南找到账号与密钥。
也可以直接搜索http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key进入。
在获取AK(服务密钥)之前需要注册百度账号、申请成为百度开发者。1.注册百度账号，成为百度地图开发者
进入百度开放平台官网，点击右上角“API控制台”，注册成为百度地图开发者。如果未登录百度账号，会引导登录百度账号。如果账号未注册，请根据提示填写正确的邮箱及手机号完成开发者注册流程。
2.创建应用
再次点击进入控制台，创建一个新应用。
APP ID（小程序的APP ID）通过微信小程序微信认证获得，本论坛的入门1中有讲解。
3.获取密钥（AK）
在创建应用页面，录入应用名称、选择应用类型为"微信小程序"、勾选启用服务、填写AppID(小程序ID)。点击提交后，即可在查看应用页面看到申请成功的密钥（AK）。
第二步：
在百度地图开放平台下载百度地图微信小程序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下。
第三步：1.打开快速创建的微信小程序 pages/new/new.js 文件，用下面的代码完全替换原代码
在以下的代码中，首先引用百度地图微信小程序JavaScript API模块，然后调用BMapWX.weather方法进行天气信息的检索。 注意替换您的AK！！！
// 引用百度地图微信小程序JSAPI模块
var bmap = require('../../libs/bmap-wx.min.js');
Page({
data: {
weatherData: ''
},
onLoad: function () {
var that = this;
// 新建百度地图对象
var BMap = new bmap.BMapWX({
ak: '您的ak'
});
var fail = function (data) {
console.log(data)
};
var success = function (data) {
var weatherData = data.currentWeather;
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
});
}
})
2.打开 pages/new/new.wxml 文件，用下面的代码完全替换原代码
<view class="weather">
<text>{{weatherData}}</text>
</view>
3.将不检验合法域名……勾选。
4.最后保存修改，即可看到示例效果
页面加载后会自动显示当前定位城市天气信息。
页:
[1]