摘要：小項(xiàng)目的內(nèi)容基本就是維護(hù)訂單表，訂單狀態(tài)，用戶表等，小程序還要解決微信登錄，微信支付等等微信。后臺(tái)管理系統(tǒng)待施工，其實(shí)這部分和小程序差不多，改改直接用，出來往的服務(wù)一扔，就給甲方用了。

引言：最近一直在做一些小的小程序項(xiàng)目，小項(xiàng)目雖然小，但是前后端和管理系統(tǒng)都還是需要的。在甲方極低的預(yù)算下，人工又顯得極其緊張，所以我大概摸索出了一套能用盡量少的代碼，盡量減少單人工作量，又能實(shí)現(xiàn)實(shí)際需求的開發(fā)方法。

本文默認(rèn)：你熟悉Vue與小程序開發(fā)，已安裝npm，懂得基本控制臺(tái)指令。  
建議：最好能夠先把WEPY和Bmob的文檔看一看，把他們的Demo跑起來。

小項(xiàng)目的內(nèi)容基本就是維護(hù)訂單表，訂單狀態(tài)，用戶表等，小程序還要解決微信登錄，微信支付等等微信API。如果用前端一個(gè)人Express+MySql做的話，一個(gè)人要維護(hù)的東西太多了，很不利于快速開發(fā)和后期調(diào)bug。因?yàn)樗袞|西都是你自己寫，代碼分散會(huì)十分不利于定位問題，誰(shuí)也不想因?yàn)楦牧艘稽c(diǎn)點(diǎn)東西就從數(shù)據(jù)庫(kù)改到sql命令改到接口再改到前端，多改一行代碼，多出一個(gè)bug，所以控制代碼量十分必要。話不多說，來看看具體的技術(shù)棧選擇：

這樣一來基本上一個(gè)前端自己可以搞定了，再來看看各個(gè)框架：

官網(wǎng)地址：https://tencent.github.io/wepy/

WEPY號(hào)稱是一個(gè)最受歡迎的小程序框架，支持npm包，pug，sass，ts，組件化開發(fā)，安裝十分簡(jiǎn)單（當(dāng)然你要先安裝好npm，沒有npm的可以先查一下npm的安裝。）

npm install wepy-cli -g

剩下的步驟的可以去WEPY官網(wǎng)看一下，直到你安裝好一個(gè)standard項(xiàng)目，就可以開始干活了。WEPY還有如下幾點(diǎn)需要多帶帶說一下：

Pug/Jade語(yǔ)法

Pug以前叫jade，是一種模板語(yǔ)言，選用這個(gè)是因?yàn)閷?duì)比Html，pug可以少敲很多字母，這對(duì)快速開發(fā)當(dāng)然是有好處的。首先當(dāng)然要安裝Pug：在wepy.config.js文件下，找到compilers屬性，如下添加一個(gè)pug配置：

module.exports = {
compilers: {
        // 其他配置不要?jiǎng)?，在這個(gè)對(duì)象下添加pug
        pug: {
        }
    }
}

然后npm install，就可以通過在template標(biāo)簽內(nèi)加上lang="pug"來使用
先看看例子：

如上代碼就是一個(gè)使用pug編寫的html部分，可以看到pug使用縮進(jìn)代替了標(biāo)簽，少敲了很多符號(hào)，十分節(jié)省我們的鍵盤。在編譯的時(shí)候，pug就會(huì)被轉(zhuǎn)譯成html，規(guī)則也十分簡(jiǎn)單：

//pug代碼
view#223.top(@tap="showDetail")
    text 666
//轉(zhuǎn)譯成html

    666

在pug里不需要寫反標(biāo)簽，編譯器會(huì)自動(dòng)通過縮進(jìn)來閉合，括號(hào)里的內(nèi)容會(huì)被放到標(biāo)簽內(nèi)，標(biāo)簽后的內(nèi)容會(huì)變成標(biāo)簽內(nèi)的文本，“.”后的內(nèi)容會(huì)變成class=，“#”后的內(nèi)容會(huì)變成id=。pug還有別的規(guī)則，但是我們只用他來寫html，就是因?yàn)榭梢陨俅蚝芏嘧?，而且很容易閱讀。

小坑：WEPY在wepy build --watch模式下，會(huì)因?yàn)閜ug的編譯器報(bào)錯(cuò)而終止watch，所以在寫pug的時(shí)候，最好不要--watch。反正pug的部分也很簡(jiǎn)單，寫寫結(jié)構(gòu)，很快就寫好了，更多的時(shí)間其實(shí)是在調(diào)樣式，不是很影響整體工作進(jìn)度。

Await/Async關(guān)鍵字

ES6支持的關(guān)鍵字，可以通過babel應(yīng)用到小程序里。后端云和小程序Api都會(huì)產(chǎn)生大量的異步代碼，不使用Await，代碼很難寫的漂亮。

官網(wǎng)地址：https://www.bmob.cn/  
文檔地址：http://doc.bmob.cn/data/wecha...

一個(gè)我經(jīng)常用的后端云平臺(tái)，封裝了微信登錄等一票API，好處是自動(dòng)建表，有SDK直接用，完全不用配服務(wù)器。其實(shí)云平臺(tái)有很多，這些平臺(tái)都是基于ParseServer改的，別的什么Mob云，Leancloud都差不多。用的時(shí)候，項(xiàng)目里我們能用到的一般只有建表和查詢。其實(shí)云平臺(tái)坑很多，但是我們只用最基本的增刪改查就好了，別的什么監(jiān)聽功能，socket，都比較坑，如果必須要用到高級(jí)功能，還是建議自己寫后端，不要用后端云。不過小項(xiàng)目一般只有存數(shù)據(jù)，查數(shù)據(jù)的需求。一般后端云每個(gè)月都有很高的免費(fèi)額度，重點(diǎn)就在這個(gè)免費(fèi)了，小項(xiàng)目甲方往往沒什么預(yù)算，也只有輕度需求，使用后端云恰好合適。等以后甲方有錢了，要做大項(xiàng)目，再把免費(fèi)的甩了，買個(gè)牛逼服務(wù)器自己寫新后臺(tái)就是了。

安裝與基本操作

Bmob支持npm安裝：

import Bmob from "hydrogen-js-sdk";

初始化：

Bmob.initialize("你的Application ID", "你的REST API Key");

數(shù)據(jù)操作（詳見Bmob文檔）：

// 新增一行數(shù)據(jù)
const query = Bmob.Query("tableName");
query.set("name","Bmob")
query.set("cover","后端云")
query.save().then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})
// 查找所有數(shù)據(jù)
const query = Bmob.Query("tableName");
query.find().then(res => {
    console.log(res)
});

條件查詢

如果你要查詢個(gè)表里的一些數(shù)據(jù)，你可以通過操作query對(duì)象來設(shè)置條件：

const query = Bmob.Query("tableName");
query.equalTo("title","==", "hello");
query.find().then(res => {
    console.log(res)
});

設(shè)置排序：

// 按分?jǐn)?shù)降序排列
query.order("-score");

踩坑：不要使用Array對(duì)象，設(shè)計(jì)合適的表結(jié)構(gòu)，避免多次請(qǐng)求

一些剛開始使用后端云的前端開發(fā)者經(jīng)常犯的一個(gè)嚴(yán)重錯(cuò)誤，就是沒有設(shè)計(jì)合適的表結(jié)構(gòu)，又錯(cuò)誤的大量使用后端云的Array對(duì)象——Array對(duì)象非常難以操作，不能儲(chǔ)存大量信息，儲(chǔ)存ID時(shí)又無法在云端聯(lián)查對(duì)應(yīng)的對(duì)象內(nèi)容，relation和picker指針難以操作，無故增加代碼復(fù)雜度，直接導(dǎo)致代碼質(zhì)量差，難以維護(hù)。其實(shí)，只需要合理設(shè)計(jì)表結(jié)構(gòu)，使用簡(jiǎn)單的查詢指令（條件選擇，排序）就可以完成絕大多數(shù)數(shù)據(jù)操作。如果你覺得不得不用Array或者relation，最好還是思考一下，項(xiàng)目的規(guī)模到底適不適合使用后端云開發(fā)。

舉個(gè)例子，我們有個(gè)用戶表，如果要存這個(gè)用戶發(fā)布的文章并查看,我們假定他發(fā)布了id是"002","004","006"的三篇文章,先來看不太合適的做法：
用戶表

文章表

在這里用戶用Array儲(chǔ)存了他的文章，那么你就能查詢到這個(gè)Array，然后獲取文章的3個(gè)ID："002","004","006"，但是沒有獲取文章的內(nèi)容。這個(gè)時(shí)候呢，聰明的同學(xué)就寫了個(gè)for循環(huán)，再查每一篇，把文章都查下來，就拿到了所有內(nèi)容。看上去沒什么問題，但是，這個(gè)操作，等待了3個(gè)網(wǎng)絡(luò)請(qǐng)求的時(shí)間，才查到3個(gè)文章，用戶會(huì)覺得這部分的相對(duì)的長(zhǎng)一些，并不是網(wǎng)速不夠，而是每啟動(dòng)一次請(qǐng)求都會(huì)消耗一部分資源，占用一些時(shí)間，從代碼的角度，多寫了個(gè)for循環(huán)逐個(gè)請(qǐng)求，還要另外寫排序，維護(hù)的時(shí)候也多出了不必要的開銷。后端的同學(xué)應(yīng)該不會(huì)犯這個(gè)錯(cuò)誤，不過如果有后端老司機(jī)，也就不需要用后端云了，正確的做法是：

用戶表

文章表

使用用戶Id標(biāo)記文章，然后使用后端云的查詢語(yǔ)句:

// 查找所有數(shù)據(jù)
const query = Bmob.Query("article");
query.equalTo("user","==","asdf")
//以按閱讀量排序
query.order("readcount")
query.find().then(res => {
    console.log(res)
});

這樣只通過一次請(qǐng)求就獲取了所有文章，并且可以按照正確的姿勢(shì)來排序。

待施工，其實(shí)這部分和小程序差不多，改改直接用，build出來往coding的pages服務(wù)一扔，就給甲方用了。