云開發(fā)buff
小程序也上線兩年多了锁保，剛上線那會感覺與VUE.JS的框架極其相似，寫過一些簡單的DEMO嘗試各個接口逼纸。被微信封裝一層之后再去調用系統(tǒng)的各個能力顯得極其簡單和健壯狼电。
18年末又推出了云開發(fā)浪默，大大的加速了產(chǎn)品的迭代周期，簡單的應用基本幾個小時內(nèi)就可以完成救恨，雖然還沒有去測試云開發(fā)的壓力贸辈，不過在短時間內(nèi)做出一個功能完備的DEMO來，感覺比用AXURE畫原型還方便一些肠槽。
黨建題庫
去年為了應付黨建的考試擎淤，節(jié)省紙張，按照自己先速記一頁答案再練習的方式花了2個小時時間做了一個簡單的黨建題目刷題助手秸仙。
主要包括兩個功能頁面：
- 練習：每頁展示20道題（包括單選嘴拢、多選、判斷）寂纪，初始顯示答案進行速記席吴，點擊測試按鈕進行練習，再次提交弊攘，查看練習結果抢腐。可以將題目添加到錯題本
- 錯題本：每頁展示20道題目襟交，邏輯與練習模塊類似迈倍。
- 搜索：根據(jù)題干和題目兩種方式搜索（只做了前端，未加載后臺數(shù)據(jù)捣域。）
體驗如下：
【視頻】
設計要點
mvvm
與vue.js一樣啼染，頁面中所有的數(shù)據(jù)都定義存儲在data對象中宴合。然后將數(shù)據(jù)通過{{}}的格式綁定的wxml頁面中，實現(xiàn)了數(shù)據(jù)和頁面的雙向綁定迹鹅。定義完model和view卦洽，剩下的就是建立一個個的ViewModel去實現(xiàn)邏輯。
wxs
WXS（WeiXin Script）是小程序的一套腳本語言斜棚，結合 WXML阀蒂，可以構建出頁面的結構。
- wxs 不依賴于運行時的基礎庫版本弟蚀，可以在所有版本的小程序中運行蚤霞。
- wxs 與 javascript 是不同的語言，有自己的語法义钉，并不和 javascript 一致昧绣。
- wxs 的運行環(huán)境和其他 javascript 代碼是隔離的，wxs 中不能調用其他 javascript 文件中定義的函數(shù)捶闸，也不能調用小程序提供的API夜畴。
- wxs 函數(shù)不能作為組件的事件回調。
- 由于運行環(huán)境的差異删壮，在 iOS 設備上小程序內(nèi)的 wxs 會比 javascript 代碼快 2 ~ 20 倍贪绘。在 android 設備上二者運行效率無差異。
針對于邏輯層一些簡單的數(shù)值操作和數(shù)組操作可以利用wxs實現(xiàn)醉锅，主要在于第五點兔簇，IOS設備上速度會比JS快上2~20倍。
示例在tool.wxs中定義判斷對錯函數(shù)
//判斷題目是否正確
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>
前后端數(shù)據(jù)交互
云開發(fā)所有的數(shù)據(jù)都是以集合的形式存儲的硬耍。在后臺建立了兩個集合：題庫和錯題本垄琐。在兩個功能頁面的加載和退出時調用接口讀取數(shù)據(jù)和同步數(shù)據(jù)。操作十分簡單经柴。
示例：加載錯題本
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('[數(shù)據(jù)庫] [查詢記錄] 成功: ', res)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '查詢記錄失敗'
})
console.error('[數(shù)據(jù)庫] [查詢記錄] 失斃昃健：', err)
}
})
項目的源碼可以點擊閱讀原文，訪問github項目坯认。
NEXT
- 云開發(fā)除了提供了數(shù)據(jù)庫能力翻擒，簡化開發(fā)。還提供了云函數(shù)牛哺，使用第三方的庫或者自己的編碼實現(xiàn)更強大的后端功能陋气，下次介紹云函數(shù)維護token的例子，用于發(fā)送小程序模板消息
- 目前云開發(fā)可以通過環(huán)境變量簡單的獲取openid,appid,unionid等信息引润。后續(xù)應該會支持mobile巩趁、運動數(shù)據(jù)等需要調用login模塊的數(shù)據(jù)，不過目前貌似云開發(fā)的更新略慢淳附。
- 下次介紹用云開發(fā)維護token和模板消息能力议慰，以及一個網(wǎng)絡投訴小DEMO的介紹蠢古。
DEMO：
黨建題庫
