亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序 天氣預(yù)報(bào)開(kāi)發(fā)實(shí)例代碼源碼

 更新時(shí)間:2017年01月20日 17:35:30   投稿:lqh  
這篇文章主要介紹了微信小程序 天氣預(yù)報(bào)開(kāi)發(fā)實(shí)例代碼源碼的相關(guān)資料,這里含有源碼,需要的朋友可以參考下

微信小程序 天氣預(yù)報(bào)

實(shí)例主要功能

  1. 自動(dòng)定位所在城市
  2. 根據(jù)所定位的城市獲取天氣信息
  3. 顯示未來(lái)幾天的天氣情況
  4. 查看當(dāng)天天氣的詳情信息

先看效果圖

微信小程序-天氣 首頁(yè)

微信小程序-天氣 詳情頁(yè)

思路及編碼部份自動(dòng)定位所在城市

wx.getLocation:通過(guò)官方文檔的API中可以看到wx.getLocation可以獲取到當(dāng)前的地理位置和速度,不過(guò)獲取到的地理位置只是經(jīng)緯度,而不是真正的城市名稱,但我們可以根據(jù)這個(gè)經(jīng)緯度來(lái)獲取城市名稱等信息(需要用到第三方接口),再通過(guò)城市名稱和城市ID獲取對(duì)應(yīng)的天氣信息。

在.js邏輯層增加函數(shù):

data:{
 weatherApikey:'', //天氣apikey,在http://apistore.baidu.com 上申請(qǐng)
 city:'', //城市名稱
 areaid:'', //城市對(duì)應(yīng)的id
 curWd:{}, //當(dāng)天天氣情況
 indexs:{}, //當(dāng)天天氣詳情說(shuō)明
 forecast:{} //未來(lái)4天的天氣情況
},
onLoad:function(options){
 // 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 this.setData({weatherApikey:getApp().globalData.weatherApikey});
 this.loadLocation();
},

//獲取當(dāng)前的位置信息,即經(jīng)緯度
loadLocation: function() {
 var page = this;
 wx.getLocation({
 type: 'gcj02', // 默認(rèn)為 wgs84 返回 gps 坐標(biāo),gcj02 返回可用于 wx.openLocation 的坐標(biāo)
 success: function(res){
  // success
  var latitude = res.latitude;
  var longitude = res.longitude;

  //獲取城市
  page.loadCity(latitude, longitude);
 }
 })
},

//通過(guò)經(jīng)緯度獲取城市
loadCity: function(latitude, longitude) {
 var page = this;
 //這個(gè)key是自己在http://apistore.baidu.com上申請(qǐng)的
 var key = "XSWBZ-EVQ3V-UMLPA-U4TP6-6MQFZ-UUFSL";
 var url = "http://apis.map.qq.com/ws/geocoder/v1/?location="+latitude+","+longitude+"&key="+key+"&get_poi=1";
 wx.request({
 url: url,
 data: {},
 method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
 // header: {}, // 設(shè)置請(qǐng)求的 header
 success: function(res){
  // success
  var city = res.data.result.address_component.city;
  city = city.replace("市", ""); //將“市”去掉,要不然取不了天氣信息
  page.setData({city: city});
  page.loadId(city);
 }
 })
},

//通過(guò)城市名稱獲取城市的唯一ID
loadId: function(city) {
 var page = this;
 var url = "http://apis.baidu.com/apistore/weatherservice/citylist";
 wx.request({
 url: url,
 data: {
  cityname: city
 },
 header: {
  apikey:page.data.weatherApikey
 }, 
 method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
 success: function(res){
  // success
  var cityid = res.data.retData[0].area_id;

  page.setData({areaid: cityid});
  page.loadWeather(city, cityid);
 }
 })
},

//通過(guò)城市名稱和城市ID獲取天氣情況
loadWeather: function(city, areaId) {
 var page = this;
 var url = "http://apis.baidu.com/apistore/weatherservice/recentweathers";
 wx.request({
 url: url,
 data: {
  cityname:city,
  cityid: areaId
 },
 header: {
  apikey: page.data.weatherApikey
 },
 method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
 success: function(res){
  // success
  page.setData({curWd : res.data.retData.today, indexs: res.data.retData.today.index, forecast:res.data.retData.forecast});
 }
 })
},

//事件綁定,跳轉(zhuǎn)到天氣詳情頁(yè)面
gotoDetail: function(event) {
// console.log(this.data.areaid+"==在這里跳轉(zhuǎn)=="+this.data.city);
wx.navigateTo({
 url: '../detail/detail?city='+this.data.city+"&cityid="+this.data.areaid
})
}

注意:page.setData或this.setData都是用來(lái)設(shè)置data中的數(shù)據(jù)值的。通過(guò)上面的邏輯層可以看出在這里基本都是處理數(shù)據(jù)和一些事件綁定,而且微信本身已經(jīng)為我們封裝了很多實(shí)用的功能,這里用到的比如:wx.navigateTo、wx.request、wx.getLocation,在與視圖通訊時(shí)有點(diǎn)類似AngularJS的雙向數(shù)據(jù)綁定。

index.wxml解析

<view class="main-container">
 <import src="../templates/today-tpl"/>
 <view bindtap="gotoDetail">
 <template is="today-tpl" data="{{city, curWd}}"/>
 </view>

 <import src="../templates/index-tpl"/>

 <view class="index-content">
  <block wx:for="{{indexs}}" wx:key="item" wx:for-index="idx">
   <template is="index-tpl" data="{{item,idx}}"></template>
  </block>
 </view>

 <import src="../templates/forecast-tpl"/>
 <view class="forecast">
  <block wx:for="{{forecast}}" wx:key="item">
   <template is="forecast-tpl" data="{{item}}"/>
  </block>
 </view>

</view>

說(shuō)明:在這里用到了微信的一些組件,如:view:視圖容器;block:不會(huì)在頁(yè)面上留下任何東西,循環(huán)時(shí)使用這個(gè)不會(huì)增加額外的標(biāo)簽;template:引用模板;import:導(dǎo)入模板信息,只有導(dǎo)入后才能引用;{{}}:引用數(shù)據(jù);wx:for:循環(huán)。

模板文件

模板文件其實(shí)就是wxml文件

<template name="today-tpl">
 <view class="today">
  <view class="city">{{city}}</view>
  <view class="date">{{curWd.date}} {{curWd.week}}</view>

  <view class="temp">{{curWd.curTemp}}</view>
  <view class="weather">{{curWd.type}} {{curWd.lowtemp}}/{{curWd.hightemp}}</view>
  <view class="wd">{{curWd.wd}}</view>
 </view>
</template>

注意:關(guān)于模板的描述可以參考官方文檔 模板 和 引用 。

源碼下載:http://xiazai.jb51.net/201701/yuanma/weather(jb51.net).rar

另外,本站在線工具小程序上有一款天氣查詢工具,工具中還添加了城市選擇切換的功能,感興趣的朋友可以掃描如下小程序碼查看:

感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!

相關(guān)文章

  • Google 地圖類型詳解及示例代碼

    Google 地圖類型詳解及示例代碼

    本文主要介紹Google 地圖類型,這里整理了Google 地圖類型的基本知識(shí)資料,并附簡(jiǎn)單的示例代碼便于大家學(xué)習(xí)參考,希望能幫助有需要的小伙伴
    2016-08-08
  • JS深入淺出Function與構(gòu)造函數(shù)

    JS深入淺出Function與構(gòu)造函數(shù)

    這篇文章主要介紹了JS深入淺出Function與構(gòu)造函數(shù),F(xiàn)unction是一個(gè)構(gòu)造函數(shù),可以通過(guò)該構(gòu)造函數(shù)去創(chuàng)建一個(gè)函數(shù),創(chuàng)建的函數(shù)是一個(gè)Function對(duì)象,具體內(nèi)容請(qǐng)參考下面文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下
    2021-12-12
  • 強(qiáng)制設(shè)為首頁(yè)代碼

    強(qiáng)制設(shè)為首頁(yè)代碼

    強(qiáng)制設(shè)為首頁(yè)代碼...
    2006-06-06
  • 微信小程序 (十八)picker組件詳細(xì)介紹

    微信小程序 (十八)picker組件詳細(xì)介紹

    這篇文章主要介紹了微信小程序 picker組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • 微信小程序 開(kāi)發(fā)之快遞查詢功能的實(shí)現(xiàn)

    微信小程序 開(kāi)發(fā)之快遞查詢功能的實(shí)現(xiàn)

    這篇文章主要介紹了微信小程序 開(kāi)發(fā)之快遞查詢功能的實(shí)現(xiàn)的相關(guān)資料,這里實(shí)現(xiàn)微信小程序查詢快遞的功能,需要的朋友可以參考下
    2017-01-01
  • 微信小程序 教程之注冊(cè)頁(yè)面

    微信小程序 教程之注冊(cè)頁(yè)面

    這篇文章主要介紹了微信小程序 注冊(cè)頁(yè)面的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • js封裝一個(gè)websocket實(shí)現(xiàn)及使用詳解

    js封裝一個(gè)websocket實(shí)現(xiàn)及使用詳解

    這篇文章主要為大家介紹了js封裝一個(gè)websocket實(shí)現(xiàn)示例及使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • JavaScript parseInt0.0000005打印5原理解析

    JavaScript parseInt0.0000005打印5原理解析

    這篇文章主要為大家介紹了JavaScript parseInt0.0000005打印5原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • JavaScript高級(jí)之自定義異常

    JavaScript高級(jí)之自定義異常

    在JavaScript中所有的異常都是Error對(duì)象,遇到異常就會(huì)拋出一個(gè)Error對(duì)象,這個(gè)對(duì)象中包含錯(cuò)誤的描述信息,通過(guò)JavaScript提供的異常處理語(yǔ)句,我們可以用結(jié)構(gòu)化的方式來(lái)捕捉發(fā)生的錯(cuò)誤,讓異常處理代碼與核心業(yè)務(wù)代碼實(shí)現(xiàn)分離,需要的朋友可以參考一下
    2021-12-12
  • 微信小程序 動(dòng)態(tài)的設(shè)置圖片的高度和寬度詳解及實(shí)例代碼

    微信小程序 動(dòng)態(tài)的設(shè)置圖片的高度和寬度詳解及實(shí)例代碼

    這篇文章主要介紹了微信小程序 動(dòng)態(tài)的設(shè)置圖片的高度和寬度詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
    2017-02-02

最新評(píng)論