微信小程式 天氣預報開發執行個體代碼源碼，小程式執行個體

小程式 天氣預報開發執行個體代碼源碼，小程式執行個體

小程式 天氣預報

執行個體主要功能

1. 自動定位所在城市
2. 根據所定位的城市擷取天氣資訊
3. 顯示未來幾天的天氣情況
4. 查看當天天氣的詳情資訊

先看

小程式-天氣 首頁

小程式-天氣 詳情頁

思路及編碼部份自動定位所在城市

wx.getLocation：通過官方文檔的API中可以看到wx.getLocation可以擷取到當前的地理位置和速度，不過擷取到的地理位置只是經緯度，而不是真正的城市名稱，但我們可以根據這個經緯度來擷取城市名稱等資訊（需要用到第三方介面），再通過城市名稱和城市ID擷取對應的天氣資訊。

在.js邏輯層增加函數：

data:{  weatherApikey:'', //天氣apikey，在http://apistore.baidu.com 上申請  city:'', //城市名稱  areaid:'', //城市對應的id  curWd:{}, //當天天氣情況  indexs:{}, //當天天氣詳情說明  forecast:{} //未來4天的天氣情況},onLoad:function(options){  // 生命週期函數--監聽頁面載入  this.setData({weatherApikey:getApp().globalData.weatherApikey});  this.loadLocation();},//擷取當前的位置資訊，即經緯度loadLocation: function() { var page = this; wx.getLocation({  type: 'gcj02', // 預設為 wgs84 返回 gps 座標，gcj02 返回可用於 wx.openLocation 的座標  success: function(res){   // success   var latitude = res.latitude;   var longitude = res.longitude;   //擷取城市   page.loadCity(latitude, longitude);  } })},//通過經緯度擷取城市loadCity: function(latitude, longitude) { var page = this; //這個key是自己在http://apistore.baidu.com上申請的 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: {}, // 佈建要求的 header  success: function(res){   // success    var city = res.data.result.address_component.city;    city = city.replace("市", ""); //將“市”去掉，要不然取不了天氣資訊    page.setData({city: city});    page.loadId(city);  } })},//通過城市名稱擷取城市的唯一IDloadId: 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);  } })},//通過城市名稱和城市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});  } })},//事件綁定，跳轉到天氣詳情頁面gotoDetail: function(event) {// console.log(this.data.areaid+"==在這裡跳轉=="+this.data.city);wx.navigateTo({ url: '../detail/detail?city='+this.data.city+"&cityid="+this.data.areaid})}

注意：page.setData或this.setData都是用來設定data中的資料值的。通過上面的邏輯層可以看出在這裡基本都是處理資料和一些事件綁定，而且本身已經為我們封裝了很多實用的功能，這裡用到的比如：wx.navigateTo、wx.request、wx.getLocation，在與視圖通訊時有點類似AngularJS的雙向資料繫結。

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>

說明：在這裡用到了的一些組件，如：view：視圖容器；block：不會在頁面上留下任何東西，迴圈時使用這個不會增加額外的標籤；template：引用模板；import：匯入模板資訊，只有匯入後才能引用；{{}}：引用資料；wx:for：迴圈。

模板檔案

模板檔案其實就是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>

注意：關於模板的描述可以參考官方文檔 模板 和 引用 。

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

感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！