天气预报APP - 微信小程序开发系列教程(上)

2016/11/12

前言:
通过此教程,重点在于学习微信小程序『逻辑层』以及『视图层』的使用,通过API接口返回数据并正确的数据绑定然后渲染APP视图展示,这也是大部分APP开发的基础知识。

看下界面展示

Screenshot 2016-11-12 16.57.46.png

这是调试器展示的示例,最终效果还是比较复合微信小程序的引导原则:简单轻便,用完即走!

项目开始工作

新建项目

打开『微信WEB开发者工具』添加项目,没有内测帐号的可以参考:无需内测,下载使用WEB开发工具

1.2.png

没有AppID的情况

1.1.png

选择APP项目地址:

2.png

紧接着点击『创建项目』,让我们开始吧!

项目结构

1478942065454503.png

有一个 index 目录里面是主页。 app.js 是程序主入口, utils/util.js 是整个程序的工具脚本,用于读取天气数据。 还有一个 weather.jpg 的图片文件,是小程序的背景图!

逻辑层-数据获取

做一个天气的APP,首先最重要的当然是数据的获取,那天气肯定都是和位置有关的,所以我们需要第一步获取当前的定位,微信小程序给我们提供的现成的API:

4.png

紧接着我们需要利用此接口,获取定位信息,代码写在util.js

1
2
3
4
5
6
7
8
9
10
11
//获取当前的地理位置
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);
    });
}

最后,最重要的要将这个方法暴露给应用层:

1
2
3
module.exports = {
    loadWeatherData: loadWeatherData
}

欲知后事如何?传送门:天气预报APP - 微信小程序开发系列教程(下)

已有 6 条评论

  1. [...]传送门:天气预报APP - 微信小程序开发系列教程(上)[...]

  2. 背景图会随天气情况变化吗?

  3. 厉害!

  4. ghost ghost

    天气小程序的api出现了错误,现在刷不出天气了,不知道是什么原因。

    1. 检查接口url、apiKey这些访问试试看能不能正常反馈数据,也是用darksky.net?

  5. 小新 小新

    虽然app不算复杂 但是博主设计的样式可真不错,收藏了!

添加新评论