想大致了解微信小程序的基础结构,加上之前没有写过 MVVM 结构,也借此了解一下,由于之前写过天气的 demo,这次也用比较熟悉的天气预报作为实现的功能,所使用的接口是和风天气,利用到的 API 有 实况天气, 多日天气预报, 逐小时天气预报, 生活指数, 当然实际上还有空气质量、历史天气等其他数据,此处使用几个作为展示。 微信小程序开发之前需要注册微信公众平台,在 微信小程序 · 简易教程 处有详细的步骤,注册完下载微信开发者工具,填写申请完开发者账号以后的 AppID(在 mp.weixin.com 开发 -> 开发设置 中查看),然后直接选择 每个页面的结构基本由 xx.js xx.wxml xx.wxss xx.json 构成,类似 HTML + CSS + JavaScript,自己体会与后者不同的是:
大致看了一遍文档以后,开始以 quickstart 项目为模板写上自己的代码,页面布局如下:
样式的部分,每小时、多日天气预报的样式使用 然后就是编写 js,在进入小程序以后,首先利用微信的请求定位,获取到对应的经纬度,再通过 腾讯位置服务 转换为具体的地理位置显示,再把获取到的地理位置作为参数向和风天气发出请求,得到响应以后获得响应的数据,其中一部分数据需要经过处理简化,然后保存到 page.data,同时视图层渲染对应的数据 获取到的天气数据中,日期是包含年份的,通常看天气的信息有月日即可,于是在获得响应的数据以后先对日期的部分进行处理:
然后再进行 setData 操作 在大致基本功能完成后,实况天气的上方新加了一个 input,用于手动输入城市查询那个城市的天气,手动输入查询的城市不经过微信定位,直接把输入的内容作为参数向天气接口查询,成功则显示对应的城市及具体的天气,如果查询的城市有误,则弹出 toast 提示查询失败。在手动查询城市天气完以后,清空 input 的内容,因此需要在 input 的组件中加上
关于腾讯位置服务的使用,首先下载相关的 js sdk,然后在微信公众平台的开发设置中设置 request 合法域名,添加
整个小程序 demo 的过程中,没遇到太大的困难,大概也是因为写的是比较简单的练手项目而已,很多小程序的功能还没用到,例如多个页面之间的数据传递,路由,插件等等,还需要进一步学习。另外,微信开发者工具有时候会出现打不了中文的情况,搜了一下是个常见的 bug,需要重启微信开发者工具。调试工具中无法查看伪元素样式也有点不方便,希望之后微信开发者工具能改进这方面,这样的话体验能够能好。 另外附上我的微信小程序 demo,可以扫码体验一下(图标自己瞎画的晴天娃娃),由于还需要优化,体验不佳的话还请谅解 |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码