微信小程序使用百度api獲取天氣信息 ：微信小程序教程系列16

之前已經介紹過，如何使用百度地圖api來獲取地理位置信息

微信小程序的百度地圖獲取地理位置： 微信小程序教程系列15

下面介紹使用百度api來獲取天氣信息。

1> 第一步：先到百度開放平臺http://lbsyun.baidu.com申請ak
http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

申請到ak後，在我的應用裏就能查看到

2> 第二步：配置你的request合法域名

配置域名請到微信公衆平臺的後臺裏設置

3> 第三步：下載百度地圖的api ，鏈接：http://download.csdn.net/detail/michael_ouyang/9754015

解壓後，裏面有2個js文件，一個是常規沒壓縮的，另一個是壓縮過的
PS：由於小程序項目文件大小限制爲1M，建議使用壓縮版的js文件！

4> 第四步：引入JS模塊
在項目根目錄下新建一個路徑，將百度的js文件拷貝到新建的路徑下，完成。
如下圖所示，新建路徑 "libs/bmap-wx" ，將 bmap-xw.min.js 文件拷貝至 "libs/bmap-wx" 路徑下。

5> 第五步：在所需的js文件內導入js
// 引用百度地圖，注意：require傳入一個相對路徑
var bmap = require('../../libs/bmap-wx/bmap-wx.js'); 

6> 第六步：編輯代碼
注意：此處樓主使用的ak是隨便寫的，同學們需要自行申請！！！
xxx.wxml：
 

<view> 
  <text>{{weatherData}}</text> 
</view>
<view style="padding-top:30px"></view>
<block wx:for="{{futureWeather}}">
	<view style="border:1px solid #ccc; margin:5px">
		<view>{{item.date}}</view>
		<view>{{item.temperature}}</view>
		<view>{{item.weather}}</view>
		<view>{{item.wind}}</view>
	</view>
</block>

xxx.js：

// 引用百度地圖微信小程序JSAPI模塊 
var bmap = require('../../libs/bmap-wx/bmap-wx.min.js');
 
Page({
  data:{
  	ak:"FHG7utZtdyXN23W",
  	weatherData:'',
  	futureWeather:[]
  },
  onLoad:function(options){
    var that = this;
    // 新建bmap對象 
    var BMap = new bmap.BMapWX({ 
        ak: that.data.ak 
    }); 
    var fail = function(data) { 
        console.log(data);
    }; 
    var success = function(data) { 
    		console.log(data);
    		
    		var weatherData = data.currentWeather[0]; 
    		var futureWeather = data.originalData.results[0].weather_data;
    		console.log(futureWeather);
        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,
          futureWeather: futureWeather
        }); 
    } 
		
		// 發起weather請求 
		BMap.weather({ 
		    fail: fail, 
		    success: success 
		}); 
  }
  
})

7> 第七步：運行

 

更多的百度地圖api，可到github查看：https://github.com/baidumapapi/wxapp-jsapi