小程序开发日志（一）——党建题库
2019-03-27 本文已影响0人
alenma
云开发buff
小程序也上线两年多了，刚上线那会感觉与VUE.JS的框架极其相似，写过一些简单的DEMO尝试各个接口。被微信封装一层之后再去调用系统的各个能力显得极其简单和健壮。
18年末又推出了云开发，大大的加速了产品的迭代周期，简单的应用基本几个小时内就可以完成，虽然还没有去测试云开发的压力，不过在短时间内做出一个功能完备的DEMO来，感觉比用AXURE画原型还方便一些。
党建题库
去年为了应付党建的考试，节省纸张，按照自己先速记一页答案再练习的方式花了2个小时时间做了一个简单的党建题目刷题助手。
主要包括两个功能页面：
- 练习：每页展示20道题（包括单选、多选、判断），初始显示答案进行速记，点击测试按钮进行练习，再次提交，查看练习结果。可以将题目添加到错题本
- 错题本：每页展示20道题目，逻辑与练习模块类似。
- 搜索：根据题干和题目两种方式搜索（只做了前端，未加载后台数据。）
体验如下：
【视频】
设计要点
mvvm
与vue.js一样，页面中所有的数据都定义存储在data对象中。然后将数据通过{{}}的格式绑定的wxml页面中，实现了数据和页面的双向绑定。定义完model和view，剩下的就是建立一个个的ViewModel去实现逻辑。
wxs
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
- wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
- wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。
- 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
针对于逻辑层一些简单的数值操作和数组操作可以利用wxs实现，主要在于第五点，IOS设备上速度会比JS快上2~20倍。
示例在tool.wxs中定义判断对错函数
//判断题目是否正确
var isRight=function(quesState,selected,answer){
if(quesState=='result'){
var reg = getRegExp(",", "g")
var selectedStr = selected.sort().toString().replace(reg, "");
console.log(selectedStr);
if(selectedStr==answer.trim()){
return true
}else{
return false
}}else{
return true
}
}
module.exports.isRight=isRight;
在wmxl中使用
<wxs src="../tools.wxs" module="tools" />
<scroll-view scroll-y="true" scroll-top="{{scrollTop}}" style='height: {{height}}px'>
<view wx:for="{{questions}}" wx:for-index="index">
<!-- 单选题 -->
<radio-group class="radio-group" bindchange="radioChange" wx:if="{{item.type=='单选题'}}">
<label class="content" style='color:{{tools.isRight(quesState,item.selected,item.answer)? "black":"red"}}'>{{item.xuhao}}-[{{item.type}}]{{item.content}}</label>
<label wx:if="{{quesState!='test'}}">{{item.answer}}</label>
<button wx:if="{{tools.ifaddwong(wronglist,item.xuhao)}}" data-xuhao="{{item.xuhao}}" bindtap='addWrong'>添加到错题本</button>
<label class="radio" style='background-color:{{tools.getbackgroudcolor(quesState,item.answer,"A")}}; color:{{tools.getcolor(quesState,item.selected,item.answer,"A")}}'>
<radio value="{{'A'+'-'+index}}" checked='{{ischecked}}' /> A{{item.A}}
</label>
<label class="radio" style='background-color:{{tools.getbackgroudcolor(quesState,item.answer,"B")}}; color:{{tools.getcolor(quesState,item.selected,item.answer,"B")}}'>
<radio value="{{'B'+'-'+index}}" checked='{{ischecked}}' /> B{{item.B}}
</label>
<label class="radio" style='background-color:{{tools.getbackgroudcolor(quesState,item.answer,"C")}} ;color:{{tools.getcolor(quesState,item.selected,item.answer,"C")}}'>
<radio value="{{'C'+'-'+index}}" checked='{{ischecked}}' /> C{{item.C}}
</label>
<label class="radio" style='background-color:{{tools.getbackgroudcolor(quesState,item.answer,"D")}}; color:{{tools.getcolor(quesState,item.selected,item.answer,"D")}}'>
<radio value="{{'D'+'-'+index}}" checked='{{ischecked}}' /> D{{item.D}}
</label>
</radio-group>
前后端数据交互
云开发所有的数据都是以集合的形式存储的。在后台建立了两个集合：题库和错题本。在两个功能页面的加载和退出时调用接口读取数据和同步数据。操作十分简单。
示例：加载错题本
const db = wx.cloud.database();
const _ = db.command
var selectNum = this.data.start + (pageNo - 1) * 20
db.collection('tiku01').where({ xuhao: _.gte(selectNum).and(_.lte(selectNum + 20)) }).get({
success: res => {
this.setData({
questions: res.data
})
wx.hideLoading()
console.log('[数据库] [查询记录] 成功: ', res)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '查询记录失败'
})
console.error('[数据库] [查询记录] 失败：', err)
}
})
项目的源码可以点击阅读原文，访问github项目。
NEXT
- 云开发除了提供了数据库能力，简化开发。还提供了云函数，使用第三方的库或者自己的编码实现更强大的后端功能，下次介绍云函数维护token的例子，用于发送小程序模板消息
- 目前云开发可以通过环境变量简单的获取openid,appid,unionid等信息。后续应该会支持mobile、运动数据等需要调用login模块的数据，不过目前貌似云开发的更新略慢。
- 下次介绍用云开发维护token和模板消息能力，以及一个网络投诉小DEMO的介绍。
DEMO：
党建题库
