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

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

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

每个页面的结构基本由 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 项目为模板写上自己的代码，页面布局如下：
微信小程序练手 demo 之天气小程序总结(流水账)
于是以上面的结构分好各块代码，每块使用一个 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，可以扫码体验一下(图标自己瞎画的晴天娃娃)，由于还需要优化，体验不佳的话还请谅解
微信小程序练手 demo 之天气小程序总结(流水账)

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

相关推荐