微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已經(jīng)介紹過(guò)，如何使用百度地圖api來(lái)獲取地理位置信息
微信小程序的百度地圖獲取地理位置 —— 微信小程序教程系列（15）
下面介紹使用百度api來(lái)獲取天氣信息。
1> 第一步：先到百度開放平臺(tái)http://lbsyun.baidu.com申請(qǐng)ak
http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key
申請(qǐng)到ak后，在我的應(yīng)用里就能查看到
2> 第二步：配置你的request合法域名
配置域名請(qǐng)到微信公眾平臺(tái)的后臺(tái)里設(shè)置
3> 第三步：下載百度地圖的api ，鏈接：http://download.csdn.net/detail/michael_ouyang/9754015
解壓后，里面有2個(gè)js文件，一個(gè)是常規(guī)沒壓縮的，另一個(gè)是壓縮過(guò)的
PS：由于小程序項(xiàng)目文件大小限制為1M，建議使用壓縮版的js文件！
4> 第四步：引入JS模塊
在項(xiàng)目根目錄下新建一個(gè)路徑，將百度的js文件拷貝到新建的路徑下，完成。
如下圖所示，新建路徑 "libs/bmap-wx" ，將 bmap-xw.min.js 文件拷貝至 "libs/bmap-wx" 路徑下。
5> 第五步：在所需的js文件內(nèi)導(dǎo)入js
// 引用百度地圖，注意：require傳入一個(gè)相對(duì)路徑
var bmap = require('../../libs/bmap-wx/bmap-wx.js');?
6> 第六步：編輯代碼
注意：此處樓主使用的ak是隨便寫的，同學(xué)們需要自行申請(qǐng)！！！
xxx.wxml：
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對(duì)象 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' +'風(fēng)力：' + weatherData.wind + '\n'; that.setData({ weatherData: weatherData,futureWeather: futureWeather}); } // 發(fā)起weather請(qǐng)求 BMap.weather({ fail: fail, success: success }); }})7> 第七步：運(yùn)行
更多的百度地圖api，可到github查看：https://github.com/baidumapapi/wxapp-jsapi
微信小程序教程系列
相關(guān)連接：http://blog.csdn.net/michael_ouyang/article/details/54700871
注冊(cè)上線篇
------------------------------------------------------------
微信小程序之如何注冊(cè)微信小程序
微信小程序之小程序上線
基礎(chǔ)篇
------------------------------------------------------------
微信開發(fā)者工具的快捷鍵
微信小程序的文件結(jié)構(gòu) —— 微信小程序教程系列（1）
微信小程序的生命周期實(shí)例演示 —— 微信小程序教程系列（2）
微信小程序的動(dòng)態(tài)修改視圖層的數(shù)據(jù) —— 微信小程序教程系列（3）
微信小程序的新建頁(yè)面 —— 微信小程序教程系列（4）
微信小程序的如何使用全局屬性 —— 微信小程序教程系列（5）
微信小程序的頁(yè)面跳轉(zhuǎn) —— 微信小程序教程系列（6）
微信小程序標(biāo)題欄和導(dǎo)航欄的設(shè)置 —— 微信小程序教程系列（7）
微信小程序的作用域和模塊化 —— 微信小程序教程系列（8）
微信小程序視圖層的數(shù)據(jù)綁定 —— 微信小程序教程系列（9）
微信小程序視圖層的條件渲染 —— 微信小程序教程系列（10）
微信小程序視圖層的列表渲染 —— 微信小程序教程系列（11）
微信小程序視圖層的模板 —— 微信小程序教程系列（12）
微信小程序之wxss —— 微信小程序教程系列（13）
微信小程序的網(wǎng)絡(luò)請(qǐng)求 —— 微信小程序教程系列（14）
微信小程序的百度地圖獲取地理位置 —— 微信小程序教程系列（15）
微信小程序使用百度api獲取天氣信息 —— 微信小程序教程系列（16）
微信小程序獲取系統(tǒng)日期和時(shí)間 —— 微信小程序教程系列（17）
微信小程序之上拉加載和下拉刷新 —— 微信小程序教程系列（18）
微信小程序之組件 —— 微信小程序教程系列（19）
微信小程序之微信登陸 —— 微信小程序教程系列（20）
實(shí)戰(zhàn)篇
------------------------------------------------------------
微信小程序之頂部導(dǎo)航欄實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（1）
微信小程序之上拉加載（分頁(yè)加載）實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（2）
微信小程序之輪播圖實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（3）
微信小程序之仿android fragment之可滑動(dòng)的底部導(dǎo)航欄實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（4）
微信小程序之登錄頁(yè)實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（5）
微信小程序之自定義toast實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（6）
微信小程序之自定義抽屜菜單（從下拉出）實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（7）
微信小程序之自定義模態(tài)彈窗（帶動(dòng)畫）實(shí)例 —— 微信小程序?qū)崙?zhàn)系列（8）
電商篇
------------------------------------------------------------
微信小程序之側(cè)欄分類 —— 微信小程序?qū)崙?zhàn)商城系列（1） 微信小程序之仿淘寶分類入口 —— 微信小程序?qū)崙?zhàn)商城系列（2）
微信小程序之購(gòu)物數(shù)量加減 —— 微信小程序?qū)崙?zhàn)商城系列（3）
微信小程序之商品屬性分類 —— 微信小程序?qū)崙?zhàn)商城系列（4）
微信小程序之購(gòu)物車 —— 微信小程序?qū)崙?zhàn)商城系列（5）
未完待續(xù)。。。
更多小程序的教程：http://blog.csdn.net/column/details/14653.html
總結(jié)
以上是生活随笔為你收集整理的微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 立式电工实验装置
- 下一篇： 电视剧《猎毒人》观后感