微信小程式使用百度api獲取天氣資訊
阿新 • • 發佈:2019-01-02
2> 第二步:配置你的request合法域名
配置域名請到微信公眾平臺的後臺裡設定
3> 第三步:下載百度地圖的api ,連結:http://download.csdn.net/detail/michael_ouyang/9754015
解壓後,裡面有2個js檔案,一個是常規沒壓縮的,另一個是壓縮過的
PS:由於小程式專案檔案大小限制為1M,建議使用壓縮版的js檔案!
4> 第四步:引入JS模組
在專案根目錄下新建一個路徑,將百度的js檔案拷貝到新建的路徑下,完成。
5> 第五步:在所需的js檔案內匯入js
// 引用百度地圖,注意:require傳入一個相對路徑
var bmap = require(‘../../libs/bmap-wx/bmap-wx.js’);
6> 第六步:編輯程式碼
注意:此處樓主使用的ak是隨便寫的,同學們需要自行申請!!!
index.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>
index.js
// 引用百度地圖微信小程式JSAPI模組
let bmap = require('../libs/bmap-wx/bmap-wx.min.js' );
Page({
/**
* 頁面的初始資料
*/
data: {
ak:"WZW6cnNP60O4kykMqZrolQrbct4FNGIH",
weatherData:'',
futureWeather:[]
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
let that = this;
// 新建bmap物件
let BMap = new bmap.BMapWX({
ak:that.data.ak
});
let fail = function(data){
console.log(data);
};
let success = function(data){
console.log(data);
let weatherData = data.currentWeather[0];
let futureWeather = data.originalData.results[0].weather_data;
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: weatherData
});
};
// 發起weather請求
BMap.weather({
fail,
success
});
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
}
})
7> 第七步:執行,效果圖如下