基于uni-app满分教育小程序设计与实现*

浙江经贸职业技术学院 毛凌志

驾考满分教育小程序是针对一个周期内扣满12分的用户，需要进行满分教育学习并通过满分教育考试而研发的一款小程序，该考试的特点是题量大，易混淆、难度较大，加上考生水平层次多样，通过率只有50%，为此研发此小程序，提供错题回顾，题目解析等功能，帮助学员顺利通过考试。产品采用uni-app云端一起化弹性架构，有效降低初创企业成本。

1 业务背景

驾驶证记满12分的驾驶员，需要参考5+2的学习，即5天网络学习，每天3小时，还有两天的现场学习，现在学习需要人脸识别，课前、课中、课后都要签到，不能找人代替。学习后交80元报名费参加考试，考试题型分为单选和判断，满分100分，90分及以上为通过，考试有两次机会，一次不过，可以立马再考一次，合格后清分，领回驾驶证。考试不合格的，继续参加学习和考试。拒不参加学习，也不接受考试的，由公安机关交通管理部门公告其机动车驾驶证停止使用。驾驶证被扣期间不能开车上路。

2 用户痛点

各培训学校的排期较满，能约上学习基本要2周以后，抛开考试不过的因素基本上顺利拿证要持续一个月甚至更久。在此期间用户都不能用车，非常不便。培训学校自身提供了一本纸质书和配套的App（交通365），但是书籍内容老久阅读不便没有什么实际效果，而App题量要又较大，很多是多选题，又不在考试的范围之内，使用起来不便。部分用户的手机老久，不知如何下载安装使用，且使用起来卡顿。一般记满12分的为酒驾、或是长途车等专业货车司机，其文化程度不高、年纪偏大，不擅长考试，且考试题库的题量较大，各省的考试略有不一样，以浙江省为例，90%的题目出自科目一，10%的题目出自科目四，且相较拿证考试，满分教育的题目和难度更难，虽然有驾考宝典、驾校一点通、元培驾考等，也有单独针对满分教育的模块，但各省的考题重点仍有不一，考生也不知该使用哪个产品能顺利过关，且从实际的考试通过率来看，一次通过率不高，加上很多考生不重视，没有复习直接参加考试，通过率近20%。

3 产品设计

通过对科目一、科目四的题目进行归类总结，利用科学的记忆方法，将题目进行关联和关键词组合记忆技巧，对易混淆及测试的错题进行收藏便于回顾，同时提供搜索功能，帮助用户查找特定关心的题目。UI参考小米以简洁在大方的风格为主。管理后台可以开通用户的VIP会员权限，直接在手机上完成的所有工作，无PC管理后台，方便直接。做为会员类产品，且是一次性的使用产品，特别适合小程序，无需下载，即用即走，且绑定微信账号，用户不便于分享给其他人，涉及个人隐私数据。小程序跨端，也支持PAD大屏，是产品落地的不二之选[1]。

4 技术架构

延用此前研发的教师资格证岗培训小程序的架构体系[2]，在此基础上，仅对界面部分略做调整。整个系统基于uni-app/uniCloud进行展开。uniCloud屏幕了阿里云、腾讯云的差异，构筑在两者之上，避免程序被某一平台绑架。整体使用nodejs/vue做为语言底层支撑。使用阿里云做为云端服务，因为腾讯云免费的有10个云函数的限制，且腾讯的云存储给出的图片链接是临时URL，使用起来不方便。云端一体化架构，同时是一个可扩展的弹性架构，用户不再需要去考虑高可用，或是周户增长带来的系统架构升级扩展等复杂问题，同时使用了Schemaless的Mongodb后端，使得业务扩张不需要调整架构。在项目从0-1的过程中，使用uni-app架构不用花一毛钱。堪称业界典范。同时云端一体化使得我们省去了，配置Https证书，同时购买域名等基本费用，整个架构从传统的注重性能、高可用、注重前后端分离，注重管理后台的CRUD等技术层面的东西，推向到向商业、业务场景的交付，不再关注这些技术细节，这些都由云端一体化的架构帮我们去解决，整个思考的层次上提升了好几个维度和量级。这一点上笔者认为是非常牛的。特别适合个体或是创业型企业。小公司的架构选择和大公司是完全不一样的。uniCloud还创新的吸收了其他快速开发框架的优点，在不断的进化，其借鉴了Meteor.js框架，通过应用clientDb组件将前后端一体，直接在前端完成数据的CRUD。

5 数据架构

早先将数据以JSON的形式，直接存储在客户端，只有将用户权限的部署和云端有交互，这样云端只有一张用户权限表，简化了数据架构，基本就没有数据的表结构，这样做的好处是架构的迁移不需要依赖云端架构，减轻了迁移的成本。同时整个架构非常的轻，也减轻了用户访问的压力，用户首次访问将数据缓存到本地，之后除非系统数据版本进行更新，否则就不和服务器进行交互。同时最新的数据存储中云函数中，可以动态的更新，非常的方便。架构较为巧妙。同时也提供Schema配置文件，基于配置文件可以动态生成CRUD的管理后台，虽然应用的是类Mongodb的数据存储结构，但仍可以以传统表结构的方式进行设计存储。

6 营销推广

通过线下满分教育学习基地进行地推。

产品的延展:先期以满分教育为切口，后期逐步切换到驾考领域。

产品的交互体验:借鉴同类竞品的UI体验，主调以简洁清新为主。

前端代码:基于code.fun，直接生成uni-app的前端代码，此功能要求开发者需要有一台mac电脑，Sketch仅支持mac。

定价策略:基础功能免费，高阶功能收费，且提供不过退的服务。使用户放心购买使用。

研发策略:使用MVP策略，构建最小可用产品，通过用户反馈再不停迭代[3]。

7 第三方技术应用

Iconfont:国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具，使用字体的方式实现图标的显示。

Codechina:应用代码仓库进行代码管理，由于Gitlab在国内的访问有时候受限，而开源中国的Gitee，在大文件的支持上需要收费，因此可以使用Gitlab或是CSDN的Codechina做为替代，两者均免费支持LFS，花精力一定能找到免费的替代品，个体创收就是要灵动。后续在使用过程中，发现Gitlab有时网页端也无法打开，因此后续就直接切换为由CSDN国内产商提供的免费服务。其实从这些案例中可以看出，并不能盲目崇洋媚外，近几年在架上的技术演进发展，在一些领域，已经做了一些吸收再改良的软基础设施。

uChart图表组件:用于可视化展示用户的行为轨迹、按课程、按天。

知晓云进行CDN文件存储:由于历史原因，视频、图片、PDF等静态资源，放置在知晓云中进行免费存储和分发加速。

WUX、vant、iview、weui、uni-ui、colorUI第三方UI组件:各种开源的组件库，可以做的视觉风格的参考，可以基于开源的略作调整，纯直接使用的话，如果对界面风格要求不高是可以的，但是对整体性有要求，还是要进行调整和融合。加上要一些组件库的代码整体性较强，想要剥离单个使用，还是比较困难的，这个时候就需要自己二次定制，甚至只能放弃别觅其他，因为定制的难度太高。

8 研发中遇到的问题

uni组件文件的组织形式:早期的uni组件是放在Components文件夹下，后期调整为放在uni_modules文件夹中，再引入新组件后，可能依赖的组件会存在两份分别存放在两个文件中，可能会有冲突的存在，解决的方式就是在没有问题的情况下，先暂时不动，待有问题再进行迁移。

编译生成的JS过大，加载显示不出来:点击HBuilder中的运行-＞运行到小程序模拟器-＞运行时是否压缩代码。

无法打开微信开发者工具:没有打开微信的服务端口。

撤消本地的变更，回退到上一个提交版本:git reset--hard last commit id。

样式布局方式:基于flex布局，改变传统使用div+css的网页方式，相较后者而言更加简单方便。

包含虚拟支付内容，上线审核不通过:iOS内不支持小程序包含虚拟支付，通过云函数来作为开关，进行敏感内容的显隐的开关。

uChart图表为0的显示文字重叠，导致看不清数字的值:将为0值的显示隐去，从而将有数值的条目信息显示清晰，避免重叠。官方提供了在线生成器，各个选项可以在线生成配置项，较为方便。

无法获取手机号和使用Webview:这两个功能只对企业用户开户。

题库数据的获取:通过雷电安卓模拟器，结合Fiddler抽取数据，并使用Django进行数据的存储。

搜索功能如何实现:早先考虑搜索功能使用SQL，但这样要引入服务器端数据库，和现有架构不匹配，需要全面改动，后来考虑直接使用客户端本地进行遍历循环，虽然效率时间上慢了一些，但是效果良好，对于整体而言，还是相当满意的。

横屏功能:小程序本身定位于手机，目前也支持大屏的PAD，通过配置，可以使得横向展示，从而拓展了其应用场景，在全真模拟考试场景中，就应用了横屏功能，使得有条件的用户可以使用PAD进行全真刷题，逼近真实内容。

会员权限的分级:早先会员只有两级会员、非会员，因此使用布尔变量进行存储，产品进行升级后，会员分为三个等级，保过班会员、高级会员、基础会员 再加上管理员和非会员，总共分为五级，因此就调整为使用数值型变量。

单路由云函数:腾讯云对云函数免费的版本限制为10个，为此官方及第三方提供了创新的单路由云函数，即可以只使用一个云函数就完成所有的功能，其思路就是在一个函数在根据传入的函数功能路径来区分具体执行的函数是哪一个，但笔者认为，这样操作过于繁琐，也可以使用clientDb直接在前端完成所有的工作。但clientDb可能会有一定的数据风险，且代码逻辑嵌入在小程序端，需要发布审核才能上线，相比于直接的云函数，应该来说并不是特别好用。有条件还是直接上云函数更加适合。

iOS端“弹性滚动”的问题

虽然微信已经帮助抹平了众多iOS和安卓的差异，但是在一些细节上还是会存在一些问题，比如 view在是固定的，但是在iOS就会弹性滚动，需要特殊处理设置"enablePullDownRefresh":false，并设置"disableScroll":true，并使用scroll-view来设置内容的布局，这样就既能滚动适应页面超出一页的情况，又解决iOS"弹性滚动"的问题。

大屏适配:可以直接使用微信小程序提供的模拟器，其能真实模拟布局的情况，针对部分排版字体在不同平台上的模拟显示情况，来调整字体大小、布局等。对于高度过高的弹窗，则内嵌一个滚动条，限制为固定高度，这样就不会因为分辨率的问题，导致无法点击其他按钮操作。