找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发:帮你查天气——基于百度地图天气API

[复制链接]
查看: 728|回复: 1
最佳答案
0 

1

主题

2

帖子

260

积分

新人求带

积分
260
 楼主| 发表于 2019-2-6 09:42:08 | 显示全部楼层 |阅读模式
先上截图:
7819683-e4ed86fb219b1340.jpg


小程序二维码:
7819683-99834453ceccbadd.jpg




我的博客:https://blog.csdn.net/michael_f2008
https://www.jianshu.com/u/3e215da329b8

一、申请百度地图的AK

在[百度地图开放平台](http://lbsyun.baidu.com/)上注册账号并登录,然后在“控制台”中创建一个应用。
选择“微信小程序”,并填入创建小程序时得到的APP ID。
提交后就可以在前一个页面中看到新创建的应用的AK了。

二、下载SDK
在“开发文档”中点击“微信小程序JavaScript API”
在“相关下载”中点击“全部下载”。
压缩包里主要包括两个文件夹:demo和src,开发时主要用到`src`里的js文件:bmap-wx.js(为讲解方便,本文不使用.min)。

## 三、配置服务器域名
登录微信小程序管理后台,进入**开发**——**开发设置**
在**服务器域名**中,填入**request合法域名**:https://api.map.baidu.com

> PS:微信要求域名都为https,所以有些API为http的就不能用了。

四、写代码
打开**微信开发者工具**,并新建一个小程序项目,会自动生成一些文件(新建项目的方法、各文件的作用,网上有很多教程,不再赘述)。

1、打开`index.js`文件,添加对`bmap-wx.js`文件的引用:
  1. //index.js

  2. //获取应用实例

  3. const app = getApp()

  4. //调用百度地图天气API的js文件

  5. var bmap = require('../../utils/bmap-wx.js');
复制代码

2、在`onLoad`方法中,新建一个`BMapWX`对象,并填入AK:
  1. var BMap = new bmap.BMapWX({

  2.         ak: '你申请的百度地图AK'

  3. });
复制代码

3、在`onLoad`方法中,发起查询天气的请求:
  1. BMap.weather({

  2.         fail: fail,

  3.         success: success

  4. });
复制代码

4、在`onLoad`方法中,定义查询成功和失败的方法:
  1. var fail = function(data) {

  2.         console.log('查询失败')

  3. };

  4. var success = function(data) {

  5.         console.log('查询成功');

  6.         var currentWeather = data;

  7.         this.setData({

  8.                 currentWeather: currentWeather

  9.         });

  10. }
复制代码

注意,`setData`中的`currentWeather`要与`Page`中的`data`部分对应:
  1. data: {

  2.         currentWeather: ''

  3.     },
复制代码

至此,就可以获得返回的天气数据了,剩下的工作就是解析返回的数据。

五、解析数据
在第三步中,查询成功获得的返回数据`data`包括了我们需要展示的信息,因此解析的工作也主要是针对`data`。

`data`主要包括两部分内容:`currentWeather`和`originalData`
1、解析`data.currentWeather`
解析方式如下:
  1. var currentWeather = data.currentWeather[0];

  2.         //currentWeather.currentCity:"济南市"

  3.         //currentWeather.date:"周四 01月17日 (实时:3℃)"

  4.         //currentWeather.pm25:"85"

  5.         //currentWeather.temperature:"7 ~ -2℃"

  6.         //currentWeather.weatherDesc:"晴"

  7.         //currentWeather.wind:"南风微风"
复制代码

注意,`data.currentWeather`是一个JSON数组,关键的数据都存在`data.currentWeather[0]`中

2、解析`data.originalData`
`data.originalData.results[0].index[0]`是穿衣的相关信息
`data.originalData.results[0].index[1]`是洗车的相关信息
`data.originalData.results[0].index[2]`是感冒的相关信息
`data.originalData.results[0].index[3]`是运动的相关信息
`data.originalData.results[0].index[4]`是紫外线强度的相关信息

`data.originalData.results[0].weather_data[0]`是今天的天气情况
`data.originalData.results[0].weather_data[1]`是明天的天气情况
`data.originalData.results[0].weather_data[2]`是后天的天气情况
`data.originalData.results[0].weather_data[3]`是大后天的天气情况


至此,就完成了数据解析工作,通过`setData`可以将数据与`index.wxml`中的变量绑定。修改`success`如下:
  1. var success = function(data) {

  2.         console.log('查询成功');

  3.         //实时天气

  4.         var currentWeather = data.currentWeather[0];

  5.         //感冒信息

  6.         var flu = data.originalData.results[0].index[2];

  7.         //未来三天的天气

  8.         var forecast = new Array(3);

  9.         for (var i = 0; i < 3; i++) {

  10.                 forecast[i] = data.originalData.results[0].weather_data[i + 1];

  11.         }

  12.         //配置数据

  13.         this.setData({

  14.                 currentWeather: currentWeather,

  15.                 flu: flu,

  16.                 forecast: forecast

  17.         });

  18. }

复制代码

在`index.wxml`文件中调用:

```html
<!--当前定位的城市-->
<view class='cityName'>{{currentWeather.currentCity}}</view>

<!--未来3天的天气情况,包括日期、天气描述、温度范围、风力-->
  <view class='forecast'>
    <view class='next-day' wx:key="{{index}}" wx:for="{{forecast}}">
      <view class='detail date'>{{item.date}}</view>
      <view class='detail'>{{item.weather}}</view>
      <view class='detail'>{{item.temperature}}</view>
      <view class='detail'>{{item.wind}}</view>
    </view>
  </view>

<!--感冒信息-->
<view class='tips'>   
        <view class='index'>感冒指数:{{flu.zs}}</view>
        <view class='description'>{{flu.des}}</view>
</view>
```

六、`bmap-wx.js`简单介绍
打开`bmap-wx.js`文件,可以看到只有一个类`BMapWX`。该类包含了四个方法,而我们需要用到的是`weather(param)`方法:

```js
/**
* 天气检索
*
* @param {Object} param 检索配置
*/
weather(param) {
        var that = this;
        param = param || {};
        let weatherparam = {
                coord_type: param["coord_type"] || 'gcj02',
        output: param["output"] || 'json',
        ak: that.ak,
        sn: param["sn"] || '',
        timestamp: param["timestamp"] || ''
        };
        let otherparam = {
                success: param["success"] || function () {},
                fail: param["fail"] || function () {}
        };
        let type = 'gcj02';
        let locationsuccess = function (result) {
                weatherparam["location"] = result["longitude"] + ',' + result["latitude"];
                wx.request({
                        url: 'https://api.map.baidu.com/telematics/v3/weather',
                        data: weatherparam,
                        header: {"content-type": "application/json"},
                        method: 'GET',
                        success(data) {
                                let res = data["data"];
                                if (res["error"] === 0 && res["status"] === 'success') {
                                        let weatherArr = res["results"];
                                        // outputRes 包含两个对象,
                                        // originalData为百度接口返回的原始数据
                                        // wxMarkerData为小程序规范的marker格式
                                        let outputRes = {};
                                        outputRes["originalData"] = res;
                                        outputRes["currentWeather"] = [];   
                                        outputRes["currentWeather"][0] = {
                                                 currentCity: weatherArr[0]["currentCity"],
                                                pm25: weatherArr[0]["pm25"],
                                                date: weatherArr[0]["weather_data"][0]["date"],
                                                temperature: weatherArr[0]["weather_data"][0]["temperature"],
                                                weatherDesc: weatherArr[0]["weather_data"][0]["weather"],
                                                wind: weatherArr[0]["weather_data"][0]["wind"]
                                        };
                                        otherparam.success(outputRes);
                                } else {
                                        otherparam.fail({
                                                errMsg: res["message"],
                                                statusCode: res["status"]
                                        });
                                }
                        },
                        fail(data) {
                                otherparam.fail(data);
                        }
                });
        }
        let locationfail = function (result) {
                otherparam.fail(result);
        }
        let locationcomplete = function (result) {
        }
        if (!param["location"]) {
                that.getWXLocation(type, locationsuccess, locationfail, locationcomplete);
        } else {
                let longitude = param.location.split(',')[0];
                let latitude = param.location.split(',')[1];
                let errMsg = 'input location';
                let res = {
                        errMsg: errMsg,
                        latitude: latitude,
                        longitude: longitude
                };
                locationsuccess(res);
        }
}
```
可以看出,成功返回的数据为`data`,通过解析,封装成了我们在前面得到的`data.currentWeather`和`data.originalData`两个数组。

另外,程序中默认查询的城市是当前定位的城市,依据的参数是经纬度坐标。

```js
weatherparam["location"] = result["longitude"] + ',' + result["latitude"];
```
如果想查询其它城市,例如北京,可以修改为:

```js
weatherparam["location"] = param["北京"];
```
其中`param`就是`weather()`函数的参数。


回复

使用道具 举报

最佳答案
0 

1

主题

2

帖子

260

积分

新人求带

积分
260
 楼主| 发表于 2019-2-12 08:23:40 | 显示全部楼层
自己顶!!!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com