在本節中，將開發一個天氣預報的小程序，使用的數據接口為百度天氣預報的接口，該接口可以根據經緯度坐標查詢所在地天氣。
1.準備工作
使用百度接口需要預先申請。第4章介紹了百度ak的申請方法以及百度天氣預報接口。所不同的是，第4章中使用城市名稱查詢天氣，而本節中使用坐標查詢。
在小程序中，將會向該地址發起請求，需要預先將百度接口所在域名設置到小程序的request合法域名中，如圖21-7所示。
需要注意的是，小程序目前只支持HTTPS協議，使用前需要確定域名接口是否支持。如果是自己的服務器，需要配置安全證書等操作。
在微信Web開發者工具中，點擊左側導航，在「項目」中將域名信息進行刷新同步，如圖21-8所示。
圖21-7 小程序服務器配置
圖21-8 域名配置同步
2.選項配置
項目文件列表如圖21-9所示，程序只有一個頁面index，該頁面有相應的.js、.wxml、.wxss文件。另外，它還有一個公共模塊common.js，用於獲取外部數據。
圖21-9 域名配置同步
小程序配置文件app.json的配置如下。
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "天氣預報",
"navigationBarTextStyle":"black"
},
"networkTimeout": {
"request": 10000
},
"debug": true
}
由於項目只有一個頁面，所以不需要底部tab。另外，設置網絡請求時間為10s，並且啟用調試模式。
3.邏輯層實現
首先在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函數。
獲取到坐標之後，再使用百度接口查詢天氣。相應的查詢代碼如下。
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
}
4.頁面與視圖層處理
在頁面文件中，使用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>
<view>
<view>{{weather.results[0].currentCity}}</view>
<view>{{weather.date}}</view>
</view>
<view>
<view wx:for="{{weather.results[0].weather_data}}" wx:key="
*this">
<view>
<text>{{item.date}} {{item.weather}} {{item.wind}}
{{item.temperature}}</text>
<image src="{{item.dayPictureUrl}}"></image>
</view>
</view>
</view>
</view>
最外層是一個class為container的view，其中放了兩個子view，分別用於存放頁面頭和頁面列表。頁面頭中存放城市名稱和時間。頁面列表用於存放最近幾天的天氣情況。
頁面的樣式表實現如下。
.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 天氣預報小程序效果圖