【開發經驗】使用Wepy與Bmob新sdk快速開發小程序

引言：最近一直在作一些小的小程序項目，小項目雖然小，可是先後端和管理系統都仍是須要的。在甲方極低的預算下，人工又顯得極其緊張，因此我大概摸索出了一套能用盡可能少的代碼，儘可能減小單人工做量，又能實現實際需求的開發方法。

本文默認：你熟悉Vue與小程序開發，已安裝npm，懂得基本控制檯指令。  
建議：最好可以先把WEPY和Bmob的文檔看一看，把他們的Demo跑起來。

小項目的內容基本就是維護訂單表，訂單狀態，用戶表等，小程序還要解決微信登陸，微信支付等等微信API。若是用前端一我的Express+MySql作的話，一我的要維護的東西太多了，很不利於快速開發和後期調bug。由於全部東西都是你本身寫，代碼分散會十分不利於定位問題，誰也不想由於改了一點點東西就從數據庫改到sql命令改到接口再改到前端，多改一行代碼，多出一個bug，因此控制代碼量十分必要。話很少說，來看看具體的技術棧選擇：

開發部分	選用技術/框架	開發語言
小程序	WEPY	js/pug/css
後臺服務	Bmob後端雲	-
後臺管理系統	Vue-Element-Admin	js
後臺管理系統服務端	Coding Pages服務	-

這樣一來基本上一個前端本身能夠搞定了，再來看看各個框架：

WEPY，讓小程序支持組件化開發的框架

官網地址： https://tencent.github.io/wepy/

WEPY號稱是一個最受歡迎的小程序框架，支持npm包，pug，sass，ts，組件化開發，安裝十分簡單（固然你要先安裝好npm，沒有npm的能夠先查一下npm的安裝。）

npm install wepy-cli -g

剩下的步驟的能夠去WEPY官網看一下，直到你安裝好一個standard項目，就能夠開始幹活了。WEPY還有以下幾點須要單獨說一下：

Pug/Jade語法

Pug之前叫jade，是一種模板語言，選用這個是由於對比Html，pug能夠少敲不少字母，這對快速開發固然是有好處的。首先固然要安裝Pug：在wepy.config.js文件下，找到compilers屬性，以下添加一個pug配置：

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

而後npm install，就能夠經過在template標籤內加上lang='pug'來使用
先看看例子：

<template lang='pug'>
  view.topInfo
    //- 背景
    image.back(src='../assets/rankTopBack.png', mode='aspectFill')
    //- 內容
    view.side
      text.small 排名
      text.main 91%
    view.center
      image.avatar(src='{{userInfo.avatarUrl}}')
      view.userName {{userInfo.nickName}}
    view.side
      text.small 今日被贊
      text.main 3
</template>

如上代碼就是一個使用pug編寫的html部分，能夠看到pug使用縮進代替了標籤，少敲了不少</>符號，十分節省咱們的鍵盤。在編譯的時候，pug就會被轉譯成html，規則也十分簡單：

//pug代碼
view#223.top(@tap='showDetail')
    text 666
//轉譯成html
<view class="top" id="223" @tap="showDetail">
    <text>666</text>
</view>

在pug裏不須要寫反標籤，編譯器會自動經過縮進來閉合，括號裏的內容會被放到標籤內，標籤後的內容會變成標籤內的文本，「.」後的內容會變成class=，「#」後的內容會變成id=。pug還有別的規則，可是咱們只用他來寫html，就是由於能夠少打不少字，並且很容易閱讀。

小坑：WEPY在 wepy build --watch模式下，會由於pug的編譯器報錯而終止watch，因此在寫pug的時候，最好不要--watch。反正pug的部分也很簡單，寫寫結構，很快就寫好了，更多的時間實際上是在調樣式，不是很影響總體工做進度。

Await/Async關鍵字

ES6支持的關鍵字，能夠經過babel應用到小程序裏。後端雲和小程序Api都會產生大量的異步代碼，不使用Await，代碼很難寫的漂亮。

Bmob後端雲，全方位一體化的後端服務平臺

官網地址： https://www.bmob.cn/
文檔地址： http://doc.bmob.cn/data/wecha...

一個我常常用的後端雲平臺，封裝了微信登陸等一票API，好處是自動建表，有SDK直接用，徹底不用配服務器。其實雲平臺有不少，這些平臺都是基於ParseServer改的，別的什麼Mob雲，Leancloud都差很少。用的時候，項目裏咱們能用到的通常只有建表和查詢。其實雲平臺坑不少，可是咱們只用最基本的增刪改查就行了，別的什麼監聽功能，socket，都比較坑，若是必需要用到高級功能，仍是建議本身寫後端，不要用後端雲。不太小項目通常只有存數據，查數據的需求。通常後端雲每月都有很高的免費額度，重點就在這個免費了，小項目甲方每每沒什麼預算，也只有輕度需求，使用後端雲剛好合適。等之後甲方有錢了，要作大項目，再把免費的甩了，買個牛逼服務器本身寫新後臺就是了。

安裝與基本操做

Bmob支持npm安裝：

import Bmob from "hydrogen-js-sdk";

初始化：

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

數據操做（詳見Bmob文檔）：

// 新增一行數據
const query = Bmob.Query('tableName');
query.set("name","Bmob")
query.set("cover","後端雲")
query.save().then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})
// 查找全部數據
const query = Bmob.Query("tableName");
query.find().then(res => {
    console.log(res)
});

條件查詢

若是你要查詢個表裏的一些數據，你能夠經過操做query對象來設置條件：

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

設置排序：

// 按分數降序排列
query.order("-score");

踩坑：不要使用Array對象，設計合適的表結構，避免屢次請求

一些剛開始使用後端雲的前端開發者常常犯的一個嚴重錯誤，就是沒有設計合適的表結構，又錯誤的大量使用後端雲的Array對象——Array對象很是難以操做，不能儲存大量信息，儲存ID時又沒法在雲端聯查對應的對象內容，relation和picker指針難以操做，無端增長代碼複雜度，直接致使代碼質量差，難以維護。其實，只須要合理設計表結構，使用簡單的查詢指令（條件選擇，排序）就能夠完成絕大多數數據操做。若是你以爲不得不用Array或者relation，最好仍是思考一下，項目的規模到底適不適合使用後端雲開發。

舉個例子，咱們有個用戶表，若是要存這個用戶發佈的文章並查看,咱們假定他發佈了id是'002','004','006'的三篇文章,先來看不太合適的作法：
用戶表

id	name	myarticle
asdf	用戶名	['002','004','006']

文章表

id	title	content
002	標題1	內容
004	標題2	內容
006	標題3	內容

在這裏用戶用Array儲存了他的文章，那麼你就能查詢到這個Array，而後獲取文章的3個ID：'002','004','006'，可是沒有獲取文章的內容。這個時候呢，聰明的同窗就寫了個for循環，再查每一篇，把文章都查下來，就拿到了全部內容。看上去沒什麼問題，可是，這個操做，等待了3個網絡請求的時間，才查到3個文章，用戶會以爲這部分的相對的長一些，並非網速不夠，而是每啓動一次請求都會消耗一部分資源，佔用一些時間，從代碼的角度，多寫了個for循環逐個請求，還要另外寫排序，維護的時候也多出了沒必要要的開銷。後端的同窗應該不會犯這個錯誤，不過若是有後端老司機，也就不須要用後端雲了，正確的作法是：

用戶表

id	name
asdf	用戶名

文章表

id	title	content	user
002	標題1	內容	asdf
004	標題2	內容	asdf
006	標題3	內容	asdf

使用用戶Id標記文章，而後使用後端雲的查詢語句:

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

這樣只經過一次請求就獲取了全部文章，而且能夠按照正確的姿式來排序。

Vue-Element-Admin,後臺管理系統

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