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

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

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

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

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

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

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

npm install wepy-cli -g

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

Pug/Jade語法

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

module.exports = {
compilers: {
        // 其他配置不要動，在這個對象下添加pug
        pug: {
        }
    }
}

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

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

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

    666

在pug里不需要寫反標(biāo)簽，編譯器會自動通過縮進(jìn)來閉合，括號里的內(nèi)容會被放到標(biāo)簽內(nèi)，標(biāo)簽后的內(nèi)容會變成標(biāo)簽內(nèi)的文本，“.”后的內(nèi)容會變成class=，“#”后的內(nèi)容會變成id=。pug還有別的規(guī)則，但是我們只用他來寫html，就是因為可以少打很多字，而且很容易閱讀。

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

Await/Async關(guān)鍵字

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

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

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

安裝與基本操作

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)
});

條件查詢

如果你要查詢個表里的一些數(shù)據(jù)，你可以通過操作query對象來設(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對象，設(shè)計合適的表結(jié)構(gòu)，避免多次請求

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

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

文章表

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

用戶表

文章表

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

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

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

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