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

liangliangshuo 2019-06-30

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

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

每个页面的结构基本由 xx.js xx.wxml xx.wxss xx.json 构成,类似 HTML + CSS + JavaScript,自己体会与后者不同的是:

  • wxml 类似于 HTML,但是小程序规定了所能使用的组件(构成页面的基本单位),有 viewbuttonweb-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 之天气小程序总结(流水账)

相关推荐

戴翔的技术 / 0评论 2020-02-03