之前已經介紹過，如何使用百度地圖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

微信小程序教程系列

相關連接：http://blog.csdn.net/michael_ouyang/article/details/54700871

注冊上線篇

------------------------------------------------------------

微信小程序之如何注冊微信小程序

微信小程序之小程序上線

基礎篇

------------------------------------------------------------

微信開發者工具的快捷鍵

微信小程序的文件結構 —— 微信小程序教程系列（1）

微信小程序的生命周期實例演示 —— 微信小程序教程系列（2）

微信小程序的動態修改視圖層的數據 —— 微信小程序教程系列（3）

微信小程序的新建頁面 —— 微信小程序教程系列（4）

微信小程序的如何使用全局屬性 —— 微信小程序教程系列（5）

微信小程序的頁面跳轉 —— 微信小程序教程系列（6）

微信小程序標題欄和導航欄的設置 —— 微信小程序教程系列（7）

微信小程序的作用域和模塊化 —— 微信小程序教程系列（8）

微信小程序視圖層的數據綁定 —— 微信小程序教程系列（9）

微信小程序視圖層的條件渲染 —— 微信小程序教程系列（10）

微信小程序視圖層的列表渲染 —— 微信小程序教程系列（11）

微信小程序視圖層的模板 —— 微信小程序教程系列（12）

微信小程序之wxss —— 微信小程序教程系列（13）

微信小程序的網絡請求 —— 微信小程序教程系列（14）

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

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

微信小程序獲取系統日期和時間 —— 微信小程序教程系列（17）

微信小程序之上拉加載和下拉刷新 —— 微信小程序教程系列（18）

微信小程序之組件 —— 微信小程序教程系列（19）

微信小程序之微信登陸 —— 微信小程序教程系列（20）

實戰篇

------------------------------------------------------------

微信小程序之頂部導航欄實例 —— 微信小程序實戰系列（1）

微信小程序之上拉加載（分頁加載）實例 —— 微信小程序實戰系列（2）

微信小程序之輪播圖實例 —— 微信小程序實戰系列（3）

微信小程序之仿android fragment之可滑動的底部導航欄實例 —— 微信小程序實戰系列（4）

微信小程序之登錄頁實例 —— 微信小程序實戰系列（5）

微信小程序之自定義toast實例 —— 微信小程序實戰系列（6）

微信小程序之自定義抽屜菜單（從下拉出）實例 —— 微信小程序實戰系列（7）

微信小程序之自定義模態彈窗（帶動畫）實例 —— 微信小程序實戰系列（8）

電商篇

------------------------------------------------------------

微信小程序之側欄分類 —— 微信小程序實戰商城系列（1）

微信小程序之仿淘寶分類入口 —— 微信小程序實戰商城系列（2）

微信小程序之購物數量加減 —— 微信小程序實戰商城系列（3）

微信小程序之商品屬性分類 —— 微信小程序實戰商城系列（4）

微信小程序之購物車 —— 微信小程序實戰商城系列（5）

未完待續。。。

更多小程序的教程：http://blog.csdn.net/column/details/14653.html

總結

以上是生活随笔為你收集整理的微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。