资讯类微信小程序的设计与开发

李 想 张玉军 余 谨 杨维昊

（辽宁科技大学计算机与软件工程学院，辽宁 鞍山 114004）

1 概述

小程序目前是有别于传统Web App、HTML5、原生App 以及微信公众号的一种新的应用形式，带给用户一种用完就走到体验，作为微信公众平台的重要组成，小程序是订阅号与服务号的延伸。随着微信小程序搞得风风火火，阿里巴巴和百度也开始提出自己的小程序。为什么新闻资讯类小程序更适合于微信小程序的开发而不适合支付宝、百度等。首先微信小程序与百度小程序和支付宝小程序的最主要区别之一是微信小程序借助自身优势有有庞大的流量和社交资源，与新闻资讯相辅相成。百度和支付宝两家小程序，百度主要强调智能，建设自己的开放体系，支付宝则强调线上线下资源，工具性强。与他们大体相同的是Google 推出的快应用，目前也得到了大部分手机厂商的支持，快应用没有流量，无法转移，也是资讯类软件不能设计在快应用的主要原因。

2 新闻资讯类小程序设计

2.1 小程序页面设计

研究报告显示目前资讯类App 种，占多数的是在22-35 岁的年轻用户群体，因此整个小程序设计风格偏轻量化、品质化、简洁化、年轻化。页面的扁平化设计方案，同样层次，富有细节，动效精致为用户提供便捷和高效的阅读体验。对于热门跟帖栏目，我们专门设计一个阅读栏目，因为热门跟帖是提高用户黏性的主要功能之一。研究报告显示用户使用时间以及场景分布其中睡前占大部分，其次是上下班途中和课间休息中。超过半数用户集中在睡前时间段阅读新闻咨询等，针对大部分用户需求，夜间配色模式的设计尤为重要。为了迎合视觉柔和的原则，背景色和文字色对比度采用WCAG2.0 标准，AAA级别的视觉标准。对于图片本身的颜色来说，为了追寻效率，减少服务器计算，我们对图片添加30%的深色遮罩来降低对视觉的刺激。一味追寻用户健康的同时，我们为了留住用户，通过使用库克定律，通过测试，我们把用户是用最少的功能进行了删除，让用户选择数量变少，选择所花时间缩短，使用常常激起用户情绪的颜色作为点缀色，资讯信息首页布局采用传统的尼尔森F 视觉模型。

2.2 小程序开发

小程序原生云开发采用腾讯自己的服务器，提供免费的额度，我们在开发时候可以采用Uni 的框架，然后采用UniCloud 提供的阿里云服务器，阿里云服务器提供的免费额度会大于腾讯提供的免费额度，未来扩容也更容易。设计数据库唯一主键采用存储用户唯一OpenId 的形式，通过微信开发平台提供的getUserInfo 函数接口获取code 在云函数通过code 去换取OpenId。小程序没有cookie 机制，我们把登陆状态存在微信给我们提供的storage 中。这里很多开发者一般把OpenId 作为登录状态进行存储，对于一般小程序的开发不会造成用户信息泄露的影响，但是一个用户对应一个OpenId，一些用户非法获取他人的OpenId 之后，可以通过OpenId 去获取其他不安全小程序的用户信息。这里我们采用的是 session_key 作为登陆状态通过session_key 与OpenId 的一一对应关系去存储云数据库数据，图1 是小程序登录流程图。

图1 小程序登录流程图

云函数为了维护方便，采用ES6 面向对象编程，在小程序编译时勾选ES6 转ES5 的选项，以前我们在开发时候不采用ES6 语法是因为一些浏览器对于ES6 的支持不友好，而在小程序开发时我们不必考虑这个问题class一定比ES5 函数的写法带来更好的性能，代码变少了，运行速度变快了。云函数的开发语法规范类似与Node 或者我们可以采用纯Node 开发。对于云数据库表Schema 的设计开发，资讯类小程序设计了七张表，分别是用户表、Banner 表、用户搜索记录表、留言反馈表、热搜表、资讯信息表以及评论记录表。用户搜索记录表通过记录搜索时间搜索内容和搜索类别用来做简单的用户首页非热搜内容推荐。

UniApp 开发过程中我们可以通过一些优化手段加快速度，通过UniApp 与RN 和Flutter 的比较我们发现UniApp 的性能最弱，Flutter 性能最好，但是Flutter 上手最难，RN 采用React 语法，两方面都适中。针对跨端能力Flutter 和RN 分别来自FaceBook 和谷歌没有提供跨端编译小程序的能力，目前国内对开发者对小程序开发需求增加，目前RN 已经有了支持小程序开发的能力，但是目前生态不如UniApp，UniApp 和RN 开发性能都远不及Flutter，因为Flutter 采用Dart 语言无限接近原生开发，摆脱了JsBridge 对逻辑层的渲染，采用自渲染引擎，大大提高了速度，没有对Js 的渲染那么就只适合对跨端App 的开发。既然UniApp 是我们唯一的选择，我们可以通过底层编译分析，让UniApp 编译出App 或小程序的性能接近与RN。那就是我们尽量使用WEEX 渲染引擎的代码，渲染成原生组件提高运行性能。在开发时候如果只开发小程序端，避免使用uni 前缀开头的接口和官方提供的库函数，目前官方所有的uni 前缀开头的语法都支持wx 前缀的组件，避免使用可以减少运行时的兼容判断，从而提高性能。图2 是Uni-App 编译原理架构图，其实uni 扩展组件及mpvue 兼容组件是上层代码与底层编译调用的中间层，上面的优化方法主要就是通过减少这一层对各个平台不同接口的兼容性，从而减少判断，最终实现提升性能的效果。

图2 Uni-App 编译原理架构图

对于云服务的负载和请求情况，DCloud 官方为我们提供了可视化界面，记录了对云函数调用情况，云数据库的日志文件，以及整个云服务器的请求次数，CDN 流量，请求延迟等。在我们传统的资讯类网站或者App 开发时，我们还要配置自己的域名，做备案，云服务后台为我们提供了两种选择方式：其一是我们可以省略了备案的步骤，把小程序的审核发布交给公众号服务平台，因为不符合规定的小程序只能用于开发者测试，也就是我们根本不用去配置自己的域名。其二是很多已经开发好的三方接口，我们可以继续使用，但是这里我们要在云服务后天做跨域配置，添加第三方域名。这些对于一个普通的商户的程序员来说已经足够使用了，但是对于很多经常做开发的开发者来说还远远不够，因为很多时候我们写一个服务接口可以给很多程序同时通过服务，用云开发的方式每一套云函数都只能对应本小程序的某个请求。DCloud 也给我们提供了解决方案，首先我们也要配置相应的跨域请求，让第三方请求时不被拦截，然后我们在云控制台后台进入我们目前正在使用的云服务器找到云函数的详情页面，在云函数URL 化里面去配置自己的HTTP 或者HTTPS 路径，我们也可以采用官方的路径。我们每一个云函数的根域名都是一样的，我们只需要通过不同的原函数名字去请求拼接我们的URL地址即可，这样就实现了为一个小程序编写的云函数也可以供第三方请求使用。DCloud 云平台网络拓扑图如图3 所示。

图3 DCloud 网络拓扑图

3 结论

很多商户把自己的产品通过小程序的方式展现在用户面前，云开发现在也越来越流行，目前通过UniCloud 提供的云服务用户使用的并不多，一部分用户认为自己的数据存储在别人的服务器上面害怕数据安全的问题，数字天堂公司目前不仅受到我们普通开发者提供了存储与计算服务，还为很多央企和运营商也提供了服务UniCloud 也为我们签署了保密协议，安全性是可以得到很好的保障的，如果我们购买阿里云的服务器自己挂载，如果没有定期检测安全性，那么我们数据受到威胁到可能性更大。对于服务器的增配，一般我们需要购买一个更大型运算能力和吞吐量更大的服务器，最简单的方式是通过阿里云提供的克隆的方式进行数据拷贝，然后很多配置我们还要重新配置，如果数据量很大克隆时间也会比较长。从这些角度来分析，如果采用云开发，我们升降配自己的服务器则不必考虑这些问题。无疑目前资讯类微信小程序通过云开发的理念设计和开发是最符合用户和开发人员需求的。