完整微信小程序开发教程实例详解：微天气《上》

这次拎大家一起研发一个功能完备的微信小程序，期望能够对大家存有一些参考价值。

这次咱们一起研发一个天气预报小程序，之所以选这个类型，存有两个原因。 一就是天气类的小程序整体复杂度比较高，适宜我们表明问题。 另外，这种类型的应用领域也更加适宜微信小程序生态的场景，我的认知这个生态不适合研发过分繁杂的应用领域。 所以挑选了则个类型。咱们首先去看一看最终效果，有个感官的重新认识：

这个就是在我的调试器上面的最终运转效果，根据你当前的边线表明当前以及未来一周的天气情况。 对于小程序的采用场景，个人真的比较适宜。

准备工作工作

先给大家看看了运转效果，创建一个感官重新认识。那么接下来，我们就可以已经开始了。首先在微信开发者工具里创建一个项目:

接下来，项目建立窗口有一点表明下， 在 AppID 条目中， 如果你已经存有了公测账号，就核对你的 AppID， 如果你还没公测账号，页面旁边的并无AppID就可以了(坚信大多数同学就是没公测账号的，所以可以采用这个方法稳步在本地调试)。

关于小程序的基本流程，以及项目结构等，可以参见咱们之前的文章 不须要公测账号，拎你体验微信小程序完备研发过程。 基础部分咱们这里就不多可知。

项目结构

整个项目的文件结构如下：

大家可以看见，存有一个 index 目录里面就是主页。 app.js 就是程序主入口， utils.js 就是咱们的工具脚本，用作加载天气数据。 除了一个 bg.jpg 的图片文件，就是小程序的背景图。

这个项目的所有文件都在这里了，是不是挺直观的？ 项目的完备代大家可以在咱们的 Github 主页上查阅https://github.com/swiftcafex/wechat-weather

基本结构了解完了， 接下来咱们可以已经开始 Coding 了。 对于这个天气程序来说， 首先必须处置的一个事情就是天气数据的以获取了。 那咱们就一步一步的去搞。

首先，我们须要以获取当前的地理位置， 微信给我们提供更多了适当的USB， 我们在 util.js 中可以定义这样一个方法：

function getLocation(callback) {

wx.getLocation({

success: function(res) {

callback(true, res.latitude, res.longitude);

},

fail: function() {

callback(false);

}

})

}

wx.getLocation 方法给我们回到一个我们当前边线的经纬度信息。 如果顺利，我们将信息传到给 callback， 如果失利我们给 callback 传到 false。 特别注意，失利的情况在实际研发中就是须要特别注意处置的。比如说，如果一些用户没打开定位权限，不处置失利的话，就有可能产生预期之外的情况了。

以获取至当前边线之后，我们还要以获取什么呢？ 天气数据。 有关的 API 很多， 我们这个小程序用的就是 darksky.net提供更多的天气 API。 它提供更多了一个很直观的 API USB:

function getWeatherByLocation(latitude, longitude, callback) {

var apiKey = "你自己的Key";

var apiURL = "https://api.darksky.net/forecast/" + apiKey + "/" + latitude + "," + longitude + "?lang=zh&units=ca";

wx.request({

url: apiURL,

success: function(res){

var weatherData = parseWeatherData(res.data);

getCityName(latitude, longitude, function(city){

weatherData.city = city;

callback(weatherData);

});

}

});

}

getWeatherByLocation 这个方法依然写下在 util.js 里面，它的逻辑也很直观，堆叠出来 darksky 的 API 的 URL，然后调用 wx.request 命令网络数据。 因为我们不须要使用 API 回到的所有数据， 只须要赢得当天的天气，以及未来 7 天的预报即可。 所以这里还采用 parseWeatherData 方法获得我们须要的数据相结合共同组成代莱结果。 这个方法的定义如下：

function parseWeatherData(data) {

var weather = {};

weather["current"] = data.currently;

weather["daily"] = data.daily;

return weather;

}

从上面的代码不难看出，我们只获得了完整结果集的 currently 和 daily 数据，然后再次回到。 为什么我们必须这样获得部分数据呢，主要是因为这个USB的其他数据我们并不需要，所以就没有必要再托付给应用层了。 原始数据的格式给大家张贴一下：

优化数据格式

大家可能将注意到了，这个 API 给我们回到的数据中，有些数据的格式我们还须要稳步处置一下。 比如说 time 就是用时间撕的形式给我们回到的，但我们须要将时间表明在 UI 上， 所以我们就须要展开一下格式切换。 另外 temperature 字段的格式也不是我们须要的。温度数据我们不须要表明至小数点之后，挑整数就可以。

定义几个格式化数据的方法：

//将时间撕格式化为日期

function formatDate(timestamp) {

var date = new Date(timestamp * 1000);

return date.getMonth()+1 + "月" + date.getDate() + "日 " + formatWeekday(timestamp);

}

//将时间撕格式化为时间

function formatTime(timestamp) {

var date = new Date(timestamp * 1000);

return date.getHours() + ":" + date.getMinutes();

}

//中文形式的每周日期

function formatWeekday(timestamp) {

var date = new Date(timestamp * 1000);

var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

var index = date.getDay();

return weekday[index];

}

这三个方法都就是对日期展开格式化输入。具体内容功能代码里的注解已经说明了，不多可知。 最后，我们把前面所有的方法资源整合出来，共同组成给应用层的USB：

//读取天气数据

function requestWeatherData(cb) {

getLocation(function(success, latitude, longitude){

//如果 GPS 信息以获取不顺利， 设置一个预设座标

if(success == false) {

latitude = 39.90403;

longitude = 116.407526;

}

//命令天气数据 API

getWeatherByLocation(latitude, longitude, function(weatherData){

cb(weatherData);

});

});

}

命令原始数据，这里调用了 getLocation 命令当前边线， 在反弹里面推论回到结果与否以获取边线顺利，如果不顺利，设置一个预设边线。 这个推论在实际的产品中还是比较有价值的。 边线以获取不顺利的情况还是比较多的。比如说用户没打开定位权限。

紧接着，在里面又调用了 getWeatherByLocation 方法以获取天气数据，然后将完整的天气数据回到。

原始数据加载顺利后， 我们再PCB一层，将原始数据展开加工：

function loadWeatherData(callback) {

requestWeatherData(function(data){

//对原始数据搞一些修整， 然后输入给前端

var weatherData = {};

weatherData = data;

weatherData.current.formattedDate = formatDate(data.current.time);

weatherData.current.formattedTime = formatTime(data.current.time);

weatherData.current.temperature = parseInt(weatherData.current.temperature);

var wantedDaily = [];

for(var i = 1;i < weatherData.daily.data.length;i++) {

var wantedDailyItem = weatherData.daily.data[i];

var time = weatherData.daily.data[i].time;

wantedDailyItem["weekday"] = formatWeekday(time);

wantedDailyItem["temperatureMin"] = parseInt(weatherData.daily.data[i]["temperatureMin"])

wantedDailyItem["temperatureMax"] = parseInt(weatherData.daily.data[i]["temperatureMax"])

wantedDaily.push(wantedDailyItem);

}

weatherData.daily.data = wantedDaily;

callback(weatherData);

});

}

这就是最终输入给应用层的方法，它里面用了咱们刚才定义的几个数据格式化方法将回到的完整天气数据加工了一下。 最终传达给反弹方法。

最后我们将这个方法曝露给应用层：

module.exports = {

loadWeatherData: loadWeatherData

}

这个语法和 nodejs 比较相近。 到此为止，咱们这个小程序的数据处理逻辑部分就研发顺利完成了。 大家可以稍微消化一下， 下一篇可以和大家一起处置应用层的逻辑。 如果你想要查阅完备的代码， 也可以步入 Github 主页浏览：https://github.com/swiftcafex/wechat-weather。