小程序开发日志（一）——党建题库

云开发buff

小程序也上线两年多了，刚上线那会感觉与VUE.JS的框架极其相似，写过一些简单的DEMO尝试各个接口。被微信封装一层之后再去调用系统的各个能力显得极其简单和健壮。

18年末又推出了云开发，大大的加速了产品的迭代周期，简单的应用基本几个小时内就可以完成，虽然还没有去测试云开发的压力，不过在短时间内做出一个功能完备的DEMO来，感觉比用AXURE画原型还方便一些。

党建题库

去年为了应付党建的考试，节省纸张，按照自己先速记一页答案再练习的方式花了2个小时时间做了一个简单的党建题目刷题助手。

主要包括两个功能页面：

• 练习：每页展示20道题（包括单选、多选、判断），初始显示答案进行速记，点击测试按钮进行练习，再次提交，查看练习结果。可以将题目添加到错题本
• 错题本：每页展示20道题目，逻辑与练习模块类似。
• 搜索：根据题干和题目两种方式搜索（只做了前端，未加载后台数据。）

体验如下：
【视频】

设计要点

mvvm

与vue.js一样，页面中所有的数据都定义存储在data对象中。然后将数据通过{{}}的格式绑定的wxml页面中，实现了数据和页面的双向绑定。定义完model和view，剩下的就是建立一个个的ViewModel去实现逻辑。

wxs

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
3. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
4. wxs 函数不能作为组件的事件回调。
5. 由于运行环境的差异，在 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中使用

  

    
      {{item.xuhao}}-[{{item.type}}]{{item.content}}
      {{item.answer}}
      添加到错题本
      
         A{{item.A}}
      
      
         B{{item.B}}
      
      
         C{{item.C}}
      
      
         D{{item.D}}
      
    

前后端数据交互

云开发所有的数据都是以集合的形式存储的。在后台建立了两个集合：题库和错题本。在两个功能页面的加载和退出时调用接口读取数据和同步数据。操作十分简单。
示例：加载错题本

    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：

党建题库

原文