微信小程序开发天气APP

微信小程序开发天气APP

作者：谢明良张永

来源：《考试与评价》2017年第03期

【摘要】使用微信开发者工具设计一款微信端的天气App，通过城市定位功能和天气查询功能获取天气信息，所得到的天气信息在经过“小程序”逻辑层操作处理再由视图层的各种组件显示给用户。用户只需通过扫码的方式即可获得这款天气APP，无需任何的装载程序，事后也无需卸载，大大减少了手机的内存开销，做到触手可及，用完就走。

【关键词】小程序 APP 前端

一、引言

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

二、设计

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

1.逻辑层设计

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

2.视图层设计

天气页面的设计需要贴合用户的需求，让用户对想要了解的天气信息及未来天气的变化一目了然，所以界面应设计得尽可能的简洁，不需要过多花哨的组件。主要的的界面应当包含以

下三部分：当前天气状况、未来天气状况、图形展示天气变化情况。至于其他的信息可以适当的添加。

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

三、开发

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

1.数据绑定

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

2.本地缓存

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

小程序对本地缓存数据操作分为同步和异步两种。同步方法有成功回调函数，表示数据处理成功后的操作。同步方法和异步方法的区别是：同步方法会堵塞当前任务，直到同步方法处理返回，异步方法不会塞当前任务。

3.canvas

微信的小程序的canvas与js原生的canvas内容十分类似，页面设置是一模一样的，逻辑层通过wx.createContext（）的方法来创建画布的上下文，因为小程序目前只有2D，所以不需要来设置2d还是webGL。接下来就可以进行绘制了，绘制的一般步骤是：（1）先定义绘制样式setStrokeStyle=’’ ，或者是填充风格setFillStyle=’’；（2）设置要绘制的信息，使用Canvas 绘图上下文进行绘图描述。（3）确定是路径绘制还是填充绘制，con.stroke（）进行路径绘制，con.fill（）进行填充绘制。

本文利用微信开发者工具设计了一款能够定位当前城市，并直接显示当地的天气状况以及能够按照城市对天气进行查询的天气APP，对微信小程序的开发做了简单初步的探索。从开发效率和成本来看，小程序产品在微信Web+框架下的开发速度是远比原生应用周期更短，同样它比APP少了很大的开发成本，而且不需要时刻去维护。切合小程序的初衷，可能未来，点菜小程序、室内导航小程序、自助超市导购小程序等，这些使用不频繁而且不需要固定用户、不考虑流量的、单一功能化的需求会拥有一个很大的市场。

参考文献

[1]（美国）（RichardYork）约克.CSS入门经典.清华大学出版社，2008

[2]李刚.疯狂javascript讲义.电子工业出版社，2012

[3]（美）鲍尔斯.JavaScript学习指南.人民邮电出版社，2009