微信小程序入门2--根据百度API获取天气预报

湖畔科技

三步完成根据百度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！！！

1. // 引用百度地图微信小程序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. })
    

复制代码

2.打开 pages/new/new.wxml 文件，用下面的代码完全替换原代码

1. <view class="weather">
   
2.   <text>{{weatherData}}</text>
   
3. </view>

复制代码

3.将不检验合法域名……勾选。

4.最后保存修改，即可看到示例效果

页面加载后会自动显示当前定位城市天气信息。