1. 程式人生 > >微信小程式使用百度api獲取天氣資訊

微信小程式使用百度api獲取天氣資訊

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> 第七步:執行,效果圖如下
這裡寫圖片描述