微信小程序开发-倾听天气(一)

发表于 | 分类于 ，

最近开始尝试开发微信小程序。之前多多少少了解了微信小程序的开发，了解了wxml，wxss，wxs跟一些微信小程序的api，但是并没有什么想法应该要拿什么来练手。最近找到和风天气(https://www.heweather.com/)有向普通开发者提供开发api，看了文档也觉得文档很友好，数据也很足够，所以就想尝试开发一款天气预报的微信小程序。

简单的说，最基本的需要是用户需要查看所在地的天气情况跟最近几天的天气预报，并获得一些建议，而和风天气开放给普通用户也有这些信息，所以这个需求可以很容易实现。目前我也是打算实现最基础的展示功能先上线，走完整个开发到上线的流程，看看有什么坑。

话不多说，先上小程序码，可以去看看效果：

倾听天气 小程序码

创建小程序账号

第一步，肯定是要到微信公众平台申请一个小程序的账号，这个账号需要一个未申请过微信账号或其他开发账号的邮箱，然后申请之后还需要一个管理员。申请之后，可以得到一个AppID，这个AppID就是你开发小程序时需要绑定的。

然后就下载微信开发者工具，安装。打开工具，选择小程序，然后在新建项目那里，在AppID填入你刚才注册获得的Appid。选择好目录，项目名称跟后端服务（目前我没有使用云服务，但计划之后的版本会加入），点击新建即可新建小程序项目。

腾讯地图开发者及和风天气开发者账号

从需求中分析到，需要获得用户的定位信息跟天气数据，前者可以通过微信小程序内置api获取，后者可以通过和风天气api获取。不过长远考虑可以获得更多地图数据以丰富小程序的功能，所以这里一并申请了腾讯地图开发者。

其实申请也不难，腾讯地图api是在腾讯位置服务申请的开发者账号，只要用QQ或微信扫一下二维码就可以注册成功了，简直0操作成本。然后在控制台的key管理那里创建新密钥。通过这个密钥就可以获得腾讯地图的数据了

注册和风天气的开发者账号也不难，进入官网之后进行注册。开发者的权限是跟开发者账号绑定的，一般的开发者（比如我）可以直接注册普通开发者，然后创建key，就可以获得最基础的数据。如果要申请认证开发者就需要提供开发上线的应用（目前我上线小程序之后就开始申请了）。申请就还需要提供个人信息了，但是因为小程序没有链接，所以我就直接写让他们去微信里面搜索了……

最后，还需要在微信公众平台，小程序账号的开发一栏，进入开发设置，设置服务器域名的request合法域名。设置的是把接口的域名添加进去。注意，这个操作每个月是有显示修改次数的。

这样，就完成了开发前的准备了。

开发

开发的过程耗时不长，只是因为每天比较忙，所以只能腾三个晚上每天大概6个小时从各种注册到开发到上线申请。

遇到的坑也不算太多，简单的百度一下也可以解决，不过既然是整理开发过程，我觉得还是可以拿一些出来说说的：

用户权限

因为是第一个版本，没打算获取用户太多信息，只需要获得定位信息就可以了，所以目前只获取用户定位权限。

现在微信小程序的用户权限都需要做多一些配置。比如获取定位权限，就需要先在app.json配置permission：

1
2
3
4
5
6
7
8
9
{
  // ...
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于获取你所在地区的天气信息"
    }
  },
  // ...
}

然后再在js文件中调用wx.getLocation()方法，这里我是在index.js中onLoad中调用getUserLocation()，在这个方法中获取定位的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onLoad: function () {
  // 获取用户经纬度
  this.getUserLocation()
},
getUserLocation () {
  wx.getLocation({
    type: 'gcj02',
    success: res => {
      this.updateLocation(res);
    },
    fail: err => {
      console.log(err)
    }
  })
},

腾讯位置服务获取位置描述

毕竟是腾讯的产品，腾讯位置服务也有微信小程序JS SDK，不需要使用API调用。引入的方法也不难。

前面已经获得了key，然后在腾讯位置服务页面下载SDK，然后放到项目目录下（我的项目是放在了util目录下）。再在js文件中引入，并声明一个实例（官网也有详细的代码介）：

1
2
3
4
5
6
7
// 引入腾讯地图SDK核心类
let QQMapWX = require('./qqmap-wx-jssdk.min.js');

// 实例化地图API核心类
let qqmapsdk = new QQMapWX({
  key: config.MAP_API_KEY
});

这样就可以开始使用了。前面已经获得了用户的位置信息，这个位置信息主要可以获得位置的经纬度，然后我们就要考虑使用经纬度获取位置的描述信息了。这个可以使用腾讯位置服务SDK的逆地址解析接口reverseGeocoder(options:Object)。

这个接口可以不传入任何字段，默认为当前位置坐标。然后返回的是经纬度对应的地理描述信息，不传则返回的是当前位置的描述信息。这个就有点有趣了，也就是可能可以绕过微信小程序的用户授权，直接获取用户的地理信息。不过为了不出问题，我们还是通过用户授权获取位置信息吧。

和风天气获取常规天气数据

天气数据我通过和风天气的常规天气数据api获取的。前面已经获取了和风天气普通开发者的key了，这里使用wx.request向接口https://free-api.heweather.net/s6/weather/{weather-type}?{parameters}发出请求。接口的要求官网也是有说明的，这里就不多说。我是把腾讯位置服务跟和风天气的请求操作都做了封装，放在util目录的api.js中，这样可以减少在页面js文件中写请求内容，请求操作统一开发。这里我使用了Promise.all把常规天气数据请求都包起来了，方便全部请求完成之后再关闭加载弹窗。

1
2
3
4
5
6
7
8
getHefengData (lat, lon) {
  wx.showLoading({
    title: '获取天气信息中',
  })
  Promise.all([this.getWthNow(lat, lon), this.getWthForecast(lat, lon), this.getWthHourly(lat, lon), this.getWthLifestyle(lat, lon)]).then(res => {
    wx.hideLoading();
  })
},

wxs的使用

因为微信小程序不支持在wxml中做数据处理，所以wxs的出现我觉得是js到wxml的中介物。数据或者状态通过wxs的处理后才能渲染到wxml。

比如说这个项目中，接口获取的天气状态码需要转换成天气状态描述跟对应的图标，这个时候就需要通过wxs的处理。所以，在微信小程序中，js扮演的角色更多是获取数据，保存状态，数据通过wxs的处理变成需要渲染的内容放到wxml中。

使用也不难，新建一个对应的wxs，把处理逻辑放进去，通过<wxs src="./xxx.wxs" module="xxx" />引入到wxml中，然后通过xxx.fn来使用方法：

1
<text class='iconfont {{tools.getCondIcon(now.now.cond_code)}}'></text>

因为和风天气的天气状态比较多，所以我把天气状态对应的描述都放到app.wxs中，再在index.wxs引用。

结尾

页面设计其实比较简陋，所以没什么好写的，而且显示的都是文字，展示效果并不那么好，所以等之后的迭代有比较好的设计再看有没有什么可以整理的吧。