微信小程序练手 demo 之天气小程序总结(流水帐)

想大体了解微信小程序的基础结构，加上以前没有写过 MVVM 结构，也借此了解一下，因为以前写过天气的 demo，此次也用比较熟悉的天气预报做为实现的功能，所使用的接口是和风天气，利用到的 API 有 实况天气， 多日天气预报， 逐小时天气预报， 生活指数， 固然实际上还有空气质量、历史天气等其余数据，此处使用几个做为展现。

微信小程序开发以前须要注册微信公众平台，在 微信小程序 · 简易教程 处有详细的步骤，注册完下载微信开发者工具，填写申请完开发者帐号之后的 AppID(在 mp.weixin.com 开发 -> 开发设置 中查看)，而后直接选择 建立 QuickStart 项目 (刚开始没看清楚选成云开发了，后来才发现跟教程的不太对，以后再接触云开发吧……)，而后到如下的图片界面：

每一个页面的结构基本由 xx.js xx.wxml xx.wxss xx.json 构成，相似 HTML + CSS + JavaScript，本身体会与后者不一样的是：

• wxml 相似于 HTML，可是小程序规定了所能使用的组件(构成页面的基本单位)，有 view ，button，web-view等等，此外还使用自定义组件，自定义组件须要在 json 文件中先声明，再写 wxml 模板，js 中注册，详细步骤在 微信小程序 · 自定义组件。在写这个天气 demo 时只用到了小程序提供的基础组件，自定义组件还须要进一步了解，

• wxss 相似于 CSS，只是在选择器中作了不少限制，例如子选择器a > b，后代选择器a b，是不可用的，提倡直接使用 .class
• js 与 JavaScript 相似，只是执行环境不一样，不须要像浏览器端，写document window等内置对象，语法是类似的，只要稍微熟悉一下就能够了
• json 配置页面功能，若是写过 Chrome 的扩展的话，应该很熟悉了，就跟manifest.json相似，小程序里能够配置权限，是否全局开启下拉刷新，是否禁止上下滚动等等

大体看了一遍文档之后，开始以 quickstart 项目为模板写上本身的代码，页面布局以下：

因而以上面的结构分好各块代码，每块使用一个 view包括，内部按内容再细分，其中，每小时天气预报与多日天气预报因为信息过多，采用 scroll-view 展现，以滑动的形式浏览所有数据。实况天气中数据不是不少，直接的分块的 view中把各个组件写上，并写上对应的数据绑定变量，每小时、多日、生活指数中，因为是多个相似的数据，采用 view wx:for的形式，获取数据后循环渲染。

样式的部分，每小时、多日天气预报的样式使用 item { flex: 1 }使每一小块均匀分布，生活指数分两列显示，容器 flex 布局，flex-wrap 设置为 wrap，给每一个 item 设置 { width: 50%; }。

而后就是编写 js，在进入小程序之后，首先利用微信的请求定位，获取到对应的经纬度，再经过 腾讯位置服务 转换为具体的地理位置显示，再把获取到的地理位置做为参数向和风天气发出请求，获得响应之后得到响应的数据，其中一部分数据须要通过处理简化，而后保存到 page.data，同时视图层渲染对应的数据

获取到的天气数据中，日期是包含年份的，一般看天气的信息有月日便可，因而在得到响应的数据之后先对日期的部分进行处理：

for (let i = 0; i < he.daily_forecast.length; i++) { // 去掉日期中的年份
            res.data.daily_forecast[i].date = res.data.daily_forecast[i].date.slice(5)
}

而后再进行 setData 操做

在大体基本功能完成后，实况天气的上方新加了一个 input，用于手动输入城市查询那个城市的天气，手动输入查询的城市不通过微信定位，直接把输入的内容做为参数向天气接口查询，成功则显示对应的城市及具体的天气，若是查询的城市有误，则弹出 toast 提示查询失败。在手动查询城市天气完之后，清空 input 的内容，所以须要在 input 的组件中加上 value={{inputValue}}，查询完之后把 page.data.inputValue 值置为空。另外，在真机体验时发现若是网络很差，会加载得很慢，等待时间会很长，数据一直显示不了，因而在进入小程序时先加载一个 loading，在请求成功时去掉 loading，优化用户体验。添加了下拉刷新，首先在 json 中设置 "enablePullDownRefresh": true，而后在 js 中写对应的函数便可

onPullDownRefresh: function() { 
    getWeather()
}

关于腾讯位置服务的使用，首先下载相关的 js sdk，而后在微信公众平台的开发设置中设置 request 合法域名，添加 https://apis.map.qq.com(一样地，所用到的天气 API 的地址也是如此)，而后引入 js sdk 并实例化就可使用了

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
Page({
    onLoad: function () {
            // 实例化API核心类
            qqmapsdk = new QQMapWX({
                key: '申请的key'
            });
        },
    onShow: function () {
            qqmapsdk...
    }
})

整个小程序 demo 的过程当中，没遇到太大的困难，大概也是由于写的是比较简单的练手项目而已，不少小程序的功能还没用到，例如多个页面之间的数据传递，路由，插件等等，还须要进一步学习。另外，微信开发者工具备时候会出现打不了中文的状况，搜了一下是个常见的 bug，须要重启微信开发者工具。调试工具中没法查看伪元素样式也有点不方便，但愿以后微信开发者工具能改进这方面，这样的话体验可以能好。

另外附上个人微信小程序 demo，能够扫码体验一下(图标本身瞎画的晴天娃娃)，因为还须要优化，体验不佳的话还请谅解