查询天气微信小程序开发

一、引言

本文设计的天气APP是目前最受微信小程序开发者青睐的生活工具类型的APP，其主要功能便是城市定位、显示天气状况、查询城市天气。界面设计简洁明了，使用者能对当前天气状况及未来天气变化一目了然。

二、设计

小程序为开发者提供了一个简单、高效的开发框架，让小程序开发者可以在微信中开发具有原生APP体验的服务。框架主要有视图层 (View) 和和逻辑层 (App Service) 两大块，并在视图层与逻辑层间提供数据传输和事件系统。通过数据绑定系统可以让逻辑层数据与视图层保持同步，只要在逻辑层做一定的数据加工，视图层就会做出相应的更新。同样，通过事件系统也可以让视图层的操作在逻辑层得到响应

1.逻辑层设计

天气页面的逻辑层主要作用是使天气信息能够的视图层显示和响应界面操作，由于通过网络获得的数据并不都能符合视图层的要求，所以采集的数据需要经过一系列的加工，而且为能简便有效的在视图上显示这些数据信息，应当将这些加工处理后的数据储存在一个数组当中这样逻辑层与视图层进行数据绑定时只要对该数组进行绑定即可，不需要逐个数据进行绑定这样既减少代码又简单高效。该逻辑层的实现主要经过以下几个步骤:获取经纬度、城市定位及城市信息处理、获取天气信息及处理天气信息、与视图层数据进行绑定。

2.视图层设计

天气页面的设计需要贴合用户的需求，让用户对想要了解的天气信息及未来天气的变化一目了然，所以界面应设计得尽可能的简洁，不需要过多花哨的组件。主要的的界面应当包含以下三部分:当前天气状况、未来天气状况、图形展示天气变化情况。至于其他的信息可以适当的添加。

本文的天气界面设计分为上、中、下三层，顶层用于显示当前，这部分内容在样式上设计上比较显眼突出，用靓丽的视觉效果告诉使用者当前的天气状况。中层使用绘图组件绘制折线图展示天气的变化趋势，底层使用滚动视图的方式显示未来的天气状况。整个界面在样式设计上同样需要贴合简洁的设计理念，背景与色彩上偏向暖色调，文字与组件的布局使用简单的流式布局。

三、开发

自微信小程序对外宣布以来，小程序的开发问题成为许多程序开发人员讨论的重点，因此笔者也打算就本文天气APP 的开发所使用到的一些功能和组件做一些深入的探讨。如:数据绑定、本地缓存、canvas 画布组件等。

1数据绑定

微信小程序是通过“状态模式-单向数据流”来管理视图和对象绑定，状态模式定义一个对象，这个对象可以通过管理其状态从而使得应用程序作出相应的变化。简单的讲，对象状态化，只要对象状态发送变化，就通知页面更新视图元素。小程序处理数据绑定分为三个步奏首先，分别哪个 UI元素被绑定了相应的对象;然后，监视对象状态的变化;最后，将所有变化传播到绑定的视图上。

2本地缓存

每个微信小程序都可以有自己的本地缓存，可以对本地缓存进行设置、获取和清理，本地缓存最大为 10MB。和一般的缓存系统一样小程序本地缓存的实现采用键值对的方式完成数据插入和读取，通过对 key进行一次 Hash算法得到一个唯一值，并与value 绑定起来;查的时候对根据 Hash 后的 key 查询，算法空间复杂度0(1);有了本地缓存，开发者可以将一些静态数据 (用户数据，服务器授权 ID 等) 、网络地址(图片、文件等网络地址)、分页数据进行缓存。通过本地缓存，小程序就能做到离线应用(可以操作缓存数据)和流畅的用户体验能够减少网络请求，节约服务器资源。

出处 考试与评价

原标题 微信小程序开发天气APP

作者 谢明良张永

参考资料

https://www.hooketech.com/query-weather.html