前言:
通过此教程,重点在于学习微信小程序『逻辑层』以及『视图层』的使用,通过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不算复杂 但是博主设计的样式可真不错,收藏了!