前言:
通过此教程,重点在于学习微信小程序『逻辑层』以及『视图层』的使用,通过API接口返回数据并正确的数据绑定然后渲染APP视图展示,这也是大部分APP开发的基础知识。
看下界面展示
这是调试器展示的示例,最终效果还是比较复合微信小程序的引导原则:简单轻便,用完即走!
项目开始工作
新建项目
打开『微信WEB开发者工具』添加项目,没有内测帐号的可以参考:无需内测,下载使用WEB开发工具
没有AppID的情况
选择APP项目地址:
紧接着点击『创建项目』,让我们开始吧!
项目结构
有一个 index 目录里面是主页。 app.js 是程序主入口, utils/util.js 是整个程序的工具脚本,用于读取天气数据。 还有一个 weather.jpg 的图片文件,是小程序的背景图!
逻辑层-数据获取
做一个天气的APP,首先最重要的当然是数据的获取,那天气肯定都是和位置有关的,所以我们需要第一步获取当前的定位,微信小程序给我们提供的现成的API:
紧接着我们需要利用此接口,获取定位信息,代码写在util.js
| //获取当前的地理位置
| function getLocation(callback) {
| wx.getLocation({
| success: function(res) {
| callback(true, res.latitude, res.longitude);
| },
| fail: function() {
| callback(false);
| }
| })
| } |
|
定位信息(经度、纬度)有了,那我们就可以通过任何的天气API来获取具体的数据了,这里我们选择darksky.net接口获取天气信息,有关darksky的接口申请请戳我:https://darksky.net/dev/
这里我已经拿到了接口Dark Sky API,大家随便使用,那具体的天气信息data的获取代码如下:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
| //根据darksky.net接口获取天气信息
| function getWeatherByLocation(latitude, longitude, callback) {
| var apiKey = "cb4b12e15af2771d497f762476d754f5";
| 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);
| });
| }
| });
| }
|
| //Reverse Geocoding 根据经纬度获取城市名称
| function getCityName(latitude, longitude, callback) {
| var apiURL = "http://api.map.baidu.com/geocoder?output=json&location="+ latitude + "," + longitude + "&key=37492c0ee6f924cb5e934fa08c6b1676";
| wx.request({
| url: apiURL,
| success: function(res) {
| callback(res.data["result"]["addressComponent"]["city"]);
| }
| });
| }
|
| //取得我们需要的数据并重组成新的结果
| function parseWeatherData(data) {
| var weather = {};
| weather["current"] = data.currently;
| weather["daily"] = data.daily;
| return weather;
| } |
|
最后,我们把前面所有的方法整合起来,组成给应用层的接口:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
| //加载天气数据
| function requestWeatherData(cb) {
| getLocation(function(success, latitude, longitude){
| //如果 GPS 信息获取不成功, 设置一个默认坐标
| if(success == false) {
| latitude = 0;
| longitude = 0;
| }
| //请求天气数据 API
| getWeatherByLocation(latitude, longitude, function(weatherData){
| cb(weatherData);
| });
| });
| }
| //将时间戳格式化为日期
| 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];
| }
| 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
| } |
|
欲知后事如何?传送门:天气预报APP - 微信小程序开发系列教程(下)
[...]传送门:天气预报APP - 微信小程序开发系列教程(上)[...]
背景图会随天气情况变化吗?
厉害!
天气小程序的api出现了错误,现在刷不出天气了,不知道是什么原因。
检查接口url、apiKey这些访问试试看能不能正常反馈数据,也是用darksky.net?
虽然app不算复杂 但是博主设计的样式可真不错,收藏了!