推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

    查看: 1262|回復: 0
    打印 上一主題 下一主題

    [小程序教程] 微信小程序教程(16) : 微信小程序使用百度api獲取天氣信息

    [復制鏈接]
    跳轉到指定樓層
    樓主
    發表于 2018-4-21 16:30:28 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

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


    [html] view plain copy


    • <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:


    [javascript] view plain copy


    • // 引用百度地圖微信小程序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



    推56論壇 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與推56論壇立場無關
    2、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
    3、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
    4、如本帖侵犯到任何版權問題,請立即告知本站,本站將予與清除侵權內容或刪除該帖子并致以最深的歉意
    5、推56論壇管理員和版主有權不事先通知發貼者而刪除本文

    本版積分規則

    關閉

    推56站長論壇推薦上一條 /1 下一條

    站長QQ
    在線咨詢
    咨詢熱線
    QQ:405327411

    QQ|免責聲明|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

    推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回復 返回頂部 返回列表
    3分赛车计划软件 大富翁电玩捕鱼 4场进球 手机捕鱼有哪些技巧 那个棋牌真实信誉好 微乐长春麻将手机版 广东麻将买马是什么意思 game516棋牌下载 炒股行情 信誉棋牌游戏大全 天津十一选五基本走势图解 福彩快乐8开奖 免费麻将小游戏