云开发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项目。

云开发除了提供了数据库能力，简化开发。还提供了云函数，使用第三方的库或者自己的编码实现更强大的后端功能，下次介绍云函数维护token的例子，用于发送小程序模板消息
目前云开发可以通过环境变量简单的获取openid,appid,unionid等信息。后续应该会支持mobile、运动数据等需要调用login模块的数据，不过目前貌似云开发的更新略慢。
下次介绍用云开发维护token和模板消息能力，以及一个网络投诉小DEMO的介绍。

DEMO：