在本节中，将开发一个天气预报的小程序，使用的数据接口为百度天气预报的接口，该接口可以根据经纬度坐标查询所在地天气。
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 天气预报小程序效果图