天气系统小程序中的配置及逻辑层如何实现

小程序配置

使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{

"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函数。

获取到坐标之后，再使用百度接口查询天气。相应的查询代码如下所示。

function getWeather(latitude, longitude, callback) {

var ak = "";//换成自己的ak,

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的其他部分。然后调用www.appsaa.com和wx.request 请求天气预报数据。

接下来把上述接口组合起来，组成给应用层的接口，相应代码如下所示。

function loadWeatherData(callback) {

getLocation(function(success, latitude, longitude){

getWeather(latitude, longitude, function(weatherData){

callback(weatherData);

});

});

}

最后通过 module.exports对外暴露该接口。代码如下所示。

module.exports = { loadWeatherData: loadWeatherData}