首页 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践全文在线阅读

《微信公众平台开发:从零基础到ThinkPHP5高性能框架实践》21.5 案例实践:天气预报

关灯直达底部

在本节中,将开发一个天气预报的小程序,使用的数据接口为百度天气预报的接口,该接口可以根据经纬度坐标查询所在地天气。

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.jsvar 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 天气预报小程序效果图