在這一節(jié)中,我們將開(kāi)發(fā)一個(gè)天氣預(yù)報(bào)的小程序,使用的數(shù)據(jù)接口為百度天氣預(yù)報(bào)的接口,該接口可以根據(jù)經(jīng)緯度坐標(biāo)查詢(xún)所在地天氣。
準(zhǔn)備工作
使用百度接口需要預(yù)先申請(qǐng)。在本書(shū)第4章中有百度ak的申請(qǐng)方法以及百度天氣預(yù)報(bào)接口介紹。所不同的是第4章使用城市名稱(chēng)查詢(xún)天氣,而本節(jié)中使用坐標(biāo)進(jìn)行查詢(xún)。
在小程序中,將會(huì)向該地址發(fā)起請(qǐng)求,需要預(yù)先將百度接口所在域名設(shè)置到小程序的request合法域名中。如圖21-7所示。

圖21-7小程序服務(wù)器配置
需要注意的是,小程序目前只支持https協(xié)議,使用之前需要確定域名接口是否支持。如果是自己的服務(wù)器,需要配置安全證書(shū)等操作。
在微信Web開(kāi)發(fā)者工具中,點(diǎn)擊左側(cè)導(dǎo)航,在“項(xiàng)目”中將域名信息進(jìn)行刷新同步。如圖21-8所示。

圖21-8 域名配置同步
選項(xiàng)配置
項(xiàng)目文件列表如圖21-9所示,程序只有一個(gè)頁(yè)面index,該頁(yè)面有相應(yīng)的js、wxml、wxss文件,另外有一個(gè)公共模塊common.js用于獲取外部數(shù)據(jù)。

圖21-9域名配置同步
小程序配置文件app.json的配置如下所示。
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "天氣預(yù)報(bào)",
"navigationBarTextStyle":"black"
},
"networkTimeout": {
"request": 10000
},
"debug": true
}
由于項(xiàng)目只有一個(gè)頁(yè)面,所以不需要底部tab。另外設(shè)置網(wǎng)絡(luò)請(qǐng)求時(shí)間為10秒,并且啟用調(diào)試模式。
邏輯層實(shí)現(xiàn)
首先在common.js中使用獲取用戶(hù)當(dāng)前地理位置接口獲取用戶(hù)的坐標(biāo)地址,坐標(biāo)類(lèi)型選擇gcj02。
//獲取當(dāng)前位置坐標(biāo)
function getLocation(callback) {
wx.getLocation({
type: 'gcj02',
success: function(res) {
callback(true, res.latitude, res.longitude);
},
fail: function() {
callback(false);
}
})
}
Wx.getlocation調(diào)用成功之后,將坐標(biāo)信息返回給callback函數(shù)。失敗時(shí)將false傳給callback函數(shù)。
獲取到坐標(biāo)之后,再使用百度接口查詢(xún)天氣。相應(yīng)的查詢(xún)代碼如下所示。
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,再通過(guò)拼接參數(shù)構(gòu)造url的其他部分。然后調(diào)用 wx.request 請(qǐng)求天氣預(yù)報(bào)數(shù)據(jù)。
接下來(lái)把上述接口組合起來(lái),組成給應(yīng)用層的接口,相應(yīng)代碼如下所示。
function loadWeatherData(callback) {
getLocation(function(success, latitude, longitude){
getWeather(latitude, longitude, function(weatherData){
callback(weatherData);
});
});
}
最后通過(guò) module.exports對(duì)外暴露該接口。代碼如下所示。
module.exports = {
loadWeatherData: loadWeatherData
}
頁(yè)面與視圖層處理
在頁(yè)面文件中,使用 require 將公共代碼引入。代碼如下所示。
//index.js
var common = require('common.js')
Page({
data: {
weather: {}
},
onLoad: function () {
var that = this;
common.loadWeatherData(function(data){
that.setData({
weather: data
});
});
}
})
在頁(yè)面的Page函數(shù)中, data定義為天氣的初始化數(shù)據(jù),該數(shù)據(jù)將會(huì)以 JSON 的形式由邏輯層傳至渲染層。在 onLoad 方法中,使用common中的 loadWeatherData 方法獲取天氣數(shù)據(jù)并設(shè)置到 UI 上,并將取到的數(shù)據(jù)使用 setData 方法將它設(shè)置到數(shù)據(jù)層中。
在頁(yè)面的界面實(shí)現(xiàn)中,相應(yīng)的代碼如下所示。
<!--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>
最外層是一個(gè) class 為 container 的 View,它的里面放了2個(gè)子 View,分別用于存放頁(yè)面頭和頁(yè)面列表。頁(yè)面頭中存放城市名稱(chēng)和時(shí)間。頁(yè)面列表用于存放最近幾天的天氣情況。
頁(yè)面的樣式表實(shí)現(xiàn)如下所示。
.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;
}
上述頁(yè)面文件和樣式表,都是從微信官方Demo中移植而來(lái)。
最終實(shí)現(xiàn)的天氣預(yù)報(bào)小程序效果如圖21-10所示。

圖21-10天氣預(yù)報(bào)小程序效果圖
本章介紹了微信小程序的開(kāi)發(fā)接口及使用方法。微信小程序的視圖層和WeUI一致,邏輯層JS接口體系與微信JS SDK有相通之處。最后提供了一個(gè)根據(jù)地理位置自動(dòng)查詢(xún)當(dāng)前位置的天氣預(yù)報(bào)案例,可幫助讀者快速上手一個(gè)小程序的開(kāi)發(fā)
源碼下載:https://files.cnblogs.com/files/zhijiangch/fangbei-xiaochengxu-weather.zip