在這一節中，咱們將開發一個天氣預報的小程序，使用的數據接口爲百度天氣預報的接口，該接口能夠根據經緯度座標查詢所在地天氣。
準備工做
使用百度接口須要預先申請。在本書第4章中有百度ak的申請方法以及百度天氣預報接口介紹。所不一樣的是第4章使用城市名稱查詢天氣，而本節中使用座標進行查詢。
在小程序中，將會向該地址發起請求，須要預先將百度接口所在域名設置到小程序的request合法域名中。如圖21-7所示。
圖21-7小程序服務器配置
須要注意的是，小程序目前只支持https協議，使用以前須要肯定域名接口是否支持。若是是本身的服務器，須要配置安全證書等操做。
在微信Web開發者工具中，點擊左側導航，在「項目」中將域名信息進行刷新同步。如圖21-8所示。git
圖21-8 域名配置同步
選項配置
項目文件列表如圖21-9所示，程序只有一個頁面index，該頁面有相應的js、wxml、wxss文件，另外有一個公共模塊common.js用於獲取外部數據。json
圖21-9域名配置同步
小程序配置文件app.json的配置以下所示。小程序
{
"pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "天氣預報", "navigationBarTextStyle":"black" }, "networkTimeout": { "request": 10000 }, "debug": true }
因爲項目只有一個頁面，因此不須要底部tab。另外設置網絡請求時間爲10秒，而且啓用調試模式。
邏輯層實現
首先在common.js中使用獲取用戶當前地理位置接口獲取用戶的座標地址，座標類型選擇gcj02。
//獲取當前位置座標微信小程序
function getLocation(callback) { wx.getLocation({ type: 'gcj02', success: function(res) { callback(true, res.latitude, res.longitude); }, fail: function() { callback(false); } }) }
Wx.getlocation調用成功以後，將座標信息返回給callback函數。失敗時將false傳給callback函數。
獲取到座標以後，再使用百度接口查詢天氣。相應的查詢代碼以下所示。api
function getWeather(latitude, longitude, callback) { var ak = "ECe3698802b9bf4457f0e01b544eb6bb"; var url = "https://api.map.baidu.com/telematics/v3/weather?location=" + longitude + "," + latitude + "&output=json&ak=" + ak; wx.request({ url: url, success: function(res){ console.log(res); callback(res.data); } }); }
在上述代碼中，先定義百度接口的ak，再經過拼接參數構造url的其餘部分。而後調用 wx.request 請求天氣預報數據。
接下來把上述接口組合起來，組成給應用層的接口，相應代碼以下所示。安全
function loadWeatherData(callback) { getLocation(function(success, latitude, longitude){ getWeather(latitude, longitude, function(weatherData){ callback(weatherData); }); }); }
最後經過 module.exports對外暴露該接口。代碼以下所示。服務器
module.exports = { loadWeatherData: loadWeatherData }
頁面與視圖層處理
在頁面文件中，使用 require 將公共代碼引入。代碼以下所示。微信
//index.js var common = require('common.js') Page({ data: { weather: {} }, onLoad: function () { var that = this; common.loadWeatherData(function(data){ that.setData({ weather: data }); }); } })
在頁面的Page函數中， data定義爲天氣的初始化數據，該數據將會以 JSON 的形式由邏輯層傳至渲染層。在 onLoad 方法中，使用common中的 loadWeatherData 方法獲取天氣數據並設置到 UI 上，並將取到的數據使用 setData 方法將它設置到數據層中。
在頁面的界面實現中，相應的代碼以下所示。網絡
<!--index.wxml--> <view class="container"> <view class="header"> <view class="title">{{weather.results[0].currentCity}}</view> <view class="desc">{{weather.date}}</view> </view> <view class="menu-list"> <view class="menu-item" wx:for="{{weather.results[0].weather_data}}" wx:key="*this"> <view class="menu-item-main"> <text class="menu-item-name">{{item.date}} {{item.weather}} {{item.wind}} {{item.temperature}}</text> <image class="menu-item-arrow" src="{{item.dayPictureUrl}}"></image> </view> </view> </view> </view>
最外層是一個 class 爲 container 的 View，它的裏面放了2個子 View，分別用於存放頁面頭和頁面列表。頁面頭中存放城市名稱和時間。頁面列表用於存放最近幾天的天氣狀況。
頁面的樣式表實現以下所示。app
.header { padding: 30rpx; line-height: 1; } .title { font-size: 52rpx; } .desc { margin-top: 10rpx; color: #888888; font-size: 28rpx; } .menu-list { display: flex; flex-direction: column; background-color: #fbf9fe; margin-top: 10rpx; } .menu-item { color: #000000; display: flex; background-color: #fff; margin: 10rpx 30rpx; flex-direction: column; } .menu-item-main { display: flex; padding: 40rpx; border-radius: 10rpx; align-items: center; font-size: 32rpx; justify-content: space-between; } .menu-item-arrow { width: 96rpx; height: 96rpx; transition: 400ms; }
上述頁面文件和樣式表，都是從微信官方Demo中移植而來。
最終實現的天氣預報小程序效果如圖21-10所示。
圖21-10天氣預報小程序效果圖