摘要:小項目的內(nèi)容基本就是維護訂單表,訂單狀態(tài),用戶表等,小程序還要解決微信登錄,微信支付等等微信。后臺管理系統(tǒng)待施工,其實這部分和小程序差不多,改改直接用,出來往的服務一扔,就給甲方用了。
</>復制代碼
引言:最近一直在做一些小的小程序項目,小項目雖然小,但是前后端和管理系統(tǒng)都還是需要的。在甲方極低的預算下,人工又顯得極其緊張,所以我大概摸索出了一套能用盡量少的代碼,盡量減少單人工作量,又能實現(xiàn)實際需求的開發(fā)方法。
</>復制代碼
本文默認:你熟悉Vue與小程序開發(fā),已安裝npm,懂得基本控制臺指令。
建議:最好能夠先把WEPY和Bmob的文檔看一看,把他們的Demo跑起來。
小項目的內(nèi)容基本就是維護訂單表,訂單狀態(tài),用戶表等,小程序還要解決微信登錄,微信支付等等微信API。如果用前端一個人Express+MySql做的話,一個人要維護的東西太多了,很不利于快速開發(fā)和后期調(diào)bug。因為所有東西都是你自己寫,代碼分散會十分不利于定位問題,誰也不想因為改了一點點東西就從數(shù)據(jù)庫改到sql命令改到接口再改到前端,多改一行代碼,多出一個bug,所以控制代碼量十分必要。話不多說,來看看具體的技術棧選擇:
開發(fā)部分 | 選用技術/框架 | 開發(fā)語言 |
---|---|---|
小程序 | WEPY | js/pug/css |
后臺服務 | Bmob后端云 | - |
后臺管理系統(tǒng) | Vue-Element-Admin | js |
后臺管理系統(tǒng)服務端 | Coding Pages服務 | - |
這樣一來基本上一個前端自己可以搞定了,再來看看各個框架:
WEPY,讓小程序支持組件化開發(fā)的框架</>復制代碼
官網(wǎng)地址:https://tencent.github.io/wepy/
WEPY號稱是一個最受歡迎的小程序框架,支持npm包,pug,sass,ts,組件化開發(fā),安裝十分簡單(當然你要先安裝好npm,沒有npm的可以先查一下npm的安裝。)
</>復制代碼
npm install wepy-cli -g
剩下的步驟的可以去WEPY官網(wǎng)看一下,直到你安裝好一個standard項目,就可以開始干活了。WEPY還有如下幾點需要多帶帶說一下:
Pug以前叫jade,是一種模板語言,選用這個是因為對比Html,pug可以少敲很多字母,這對快速開發(fā)當然是有好處的。首先當然要安裝Pug:在wepy.config.js文件下,找到compilers屬性,如下添加一個pug配置:
</>復制代碼
module.exports = {
compilers: {
// 其他配置不要動,在這個對象下添加pug
pug: {
}
}
}
然后npm install,就可以通過在template標簽內(nèi)加上lang="pug"來使用
先看看例子:
</>復制代碼
如上代碼就是一個使用pug編寫的html部分,可以看到pug使用縮進代替了標簽,少敲了很多符號,十分節(jié)省我們的鍵盤。在編譯的時候,pug就會被轉(zhuǎn)譯成html,規(guī)則也十分簡單:
</>復制代碼
//pug代碼
view#223.top(@tap="showDetail")
text 666
//轉(zhuǎn)譯成html
666
在pug里不需要寫反標簽,編譯器會自動通過縮進來閉合,括號里的內(nèi)容會被放到標簽內(nèi),標簽后的內(nèi)容會變成標簽內(nèi)的文本,“.”后的內(nèi)容會變成class=,“#”后的內(nèi)容會變成id=。pug還有別的規(guī)則,但是我們只用他來寫html,就是因為可以少打很多字,而且很容易閱讀。
</>復制代碼
小坑:WEPY在wepy build --watch模式下,會因為pug的編譯器報錯而終止watch,所以在寫pug的時候,最好不要--watch。反正pug的部分也很簡單,寫寫結構,很快就寫好了,更多的時間其實是在調(diào)樣式,不是很影響整體工作進度。
ES6支持的關鍵字,可以通過babel應用到小程序里。后端云和小程序Api都會產(chǎn)生大量的異步代碼,不使用Await,代碼很難寫的漂亮。
Bmob后端云,全方位一體化的后端服務平臺</>復制代碼
官網(wǎng)地址:https://www.bmob.cn/
文檔地址:http://doc.bmob.cn/data/wecha...
一個我經(jīng)常用的后端云平臺,封裝了微信登錄等一票API,好處是自動建表,有SDK直接用,完全不用配服務器。其實云平臺有很多,這些平臺都是基于ParseServer改的,別的什么Mob云,Leancloud都差不多。用的時候,項目里我們能用到的一般只有建表和查詢。其實云平臺坑很多,但是我們只用最基本的增刪改查就好了,別的什么監(jiān)聽功能,socket,都比較坑,如果必須要用到高級功能,還是建議自己寫后端,不要用后端云。不過小項目一般只有存數(shù)據(jù),查數(shù)據(jù)的需求。一般后端云每個月都有很高的免費額度,重點就在這個免費了,小項目甲方往往沒什么預算,也只有輕度需求,使用后端云恰好合適。等以后甲方有錢了,要做大項目,再把免費的甩了,買個牛逼服務器自己寫新后臺就是了。
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對象來設置條件:
</>復制代碼
const query = Bmob.Query("tableName");
query.equalTo("title","==", "hello");
query.find().then(res => {
console.log(res)
});
設置排序:
</>復制代碼
// 按分數(shù)降序排列
query.order("-score");
</>復制代碼
一些剛開始使用后端云的前端開發(fā)者經(jīng)常犯的一個嚴重錯誤,就是沒有設計合適的表結構,又錯誤的大量使用后端云的Array對象——Array對象非常難以操作,不能儲存大量信息,儲存ID時又無法在云端聯(lián)查對應的對象內(nèi)容,relation和picker指針難以操作,無故增加代碼復雜度,直接導致代碼質(zhì)量差,難以維護。其實,只需要合理設計表結構,使用簡單的查詢指令(條件選擇,排序)就可以完成絕大多數(shù)數(shù)據(jù)操作。如果你覺得不得不用Array或者relation,最好還是思考一下,項目的規(guī)模到底適不適合使用后端云開發(fā)。
舉個例子,我們有個用戶表,如果要存這個用戶發(fā)布的文章并查看,我們假定他發(fā)布了id是"002","004","006"的三篇文章,先來看不太合適的做法:
用戶表
id | name | myarticle |
---|---|---|
asdf | 用戶名 | ["002","004","006"] |
文章表
id | title | content |
---|---|---|
002 | 標題1 | 內(nèi)容 |
004 | 標題2 | 內(nèi)容 |
006 | 標題3 | 內(nèi)容 |
在這里用戶用Array儲存了他的文章,那么你就能查詢到這個Array,然后獲取文章的3個ID:"002","004","006",但是沒有獲取文章的內(nèi)容。這個時候呢,聰明的同學就寫了個for循環(huán),再查每一篇,把文章都查下來,就拿到了所有內(nèi)容。看上去沒什么問題,但是,這個操作,等待了3個網(wǎng)絡請求的時間,才查到3個文章,用戶會覺得這部分的相對的長一些,并不是網(wǎng)速不夠,而是每啟動一次請求都會消耗一部分資源,占用一些時間,從代碼的角度,多寫了個for循環(huán)逐個請求,還要另外寫排序,維護的時候也多出了不必要的開銷。后端的同學應該不會犯這個錯誤,不過如果有后端老司機,也就不需要用后端云了,正確的做法是:
用戶表
id | name |
---|---|
asdf | 用戶名 |
文章表
id | title | content | user |
---|---|---|---|
002 | 標題1 | 內(nèi)容 | asdf |
004 | 標題2 | 內(nèi)容 | asdf |
006 | 標題3 | 內(nèi)容 | asdf |
使用用戶Id標記文章,然后使用后端云的查詢語句:
</>復制代碼
// 查找所有數(shù)據(jù)
const query = Bmob.Query("article");
query.equalTo("user","==","asdf")
//以按閱讀量排序
query.order("readcount")
query.find().then(res => {
console.log(res)
});
這樣只通過一次請求就獲取了所有文章,并且可以按照正確的姿勢來排序。
Vue-Element-Admin,后臺管理系統(tǒng)待施工,其實這部分和小程序差不多,改改直接用,build出來往coding的pages服務一扔,就給甲方用了。
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/98046.html
摘要:前言經(jīng)過將近一個多月的開發(fā)我們團隊開發(fā)的微信小程序出發(fā)吧一起終于開發(fā)完成現(xiàn)在的線上版本為版本文章主要介紹該小程序在開發(fā)中所用到的技術已經(jīng)在開發(fā)中遇到問題的采取的解決方法開源地址開發(fā)中技術問題匯總使用的出現(xiàn)問題在小程序開發(fā)過程中我們經(jīng)常會用 前言 經(jīng)過將近一個多月的開發(fā),我們團隊開發(fā)的微信小程序 出發(fā)吧一起 終于開發(fā)完成,現(xiàn)在的線上版本為 2.2.4-beta 版本文章主要介紹該小程序...
摘要:小程序心理學辭典應用開發(fā)的心得前言最近學習小程序,用了五天工作之余從開始,到一個簡單的完成,有點心得,記錄下來。數(shù)據(jù)庫方面,小程序最近推出云開發(fā)的服務,這東西類似,這些后端云服務,而且這些第三方的服務對微信支持的也不錯。 小程序-心理學辭典應用開發(fā)的心得 前言 最近學習小程序,用了五天工作之余從0開始,到一個簡單的App完成,有點心得,記錄下來。 想法 最近在學習算法動態(tài)規(guī)劃那部分,有...
摘要:傳統(tǒng)的網(wǎng)頁編程采用的三劍客來實現(xiàn),在微信小程序中同樣有三劍客。觀察者模式不難實現(xiàn),重點是如何在微信小程序中搭配其特有的生命周期來使用。交互事件傳統(tǒng)的事件傳遞類型有冒泡型與捕獲型,微信小程序中自然也有。 本文由作者鄒永勝授權網(wǎng)易云社區(qū)發(fā)布。 簡介為了更好的展示我們即時通訊SDK強悍的能力,網(wǎng)易云信IM SDK微信小程序DEMO的開發(fā)就提上了日程。用產(chǎn)品的話說就是: 云信 IM 小程序 S...
閱讀 2671·2021-11-23 09:51
閱讀 1657·2021-11-22 13:54
閱讀 2795·2021-11-18 10:02
閱讀 953·2021-08-16 10:57
閱讀 3567·2021-08-03 14:03
閱讀 1882·2019-08-30 15:54
閱讀 3537·2019-08-23 14:39
閱讀 608·2019-08-23 14:26