国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【開發(fā)經(jīng)驗】使用Wepy與Bmob新sdk快速開發(fā)小程序

hikui / 2898人閱讀

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

</>復制代碼

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

</>復制代碼

  1. 本文默認:你熟悉Vue與小程序開發(fā),已安裝npm,懂得基本控制臺指令。
  2. 建議:最好能夠先把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ā)的框架

</>復制代碼

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

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

</>復制代碼

  1. npm install wepy-cli -g

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

Pug/Jade語法

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

</>復制代碼

  1. module.exports = {
  2. compilers: {
  3. // 其他配置不要動,在這個對象下添加pug
  4. pug: {
  5. }
  6. }
  7. }

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

</>復制代碼

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

</>復制代碼

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

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

</>復制代碼

  1. 小坑:WEPY在wepy build --watch模式下,會因為pug的編譯器報錯而終止watch,所以在寫pug的時候,最好不要--watch。反正pug的部分也很簡單,寫寫結構,很快就寫好了,更多的時間其實是在調(diào)樣式,不是很影響整體工作進度。
Await/Async關鍵字

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

Bmob后端云,全方位一體化的后端服務平臺

</>復制代碼

  1. 官網(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安裝:

</>復制代碼

  1. import Bmob from "hydrogen-js-sdk";

初始化:

</>復制代碼

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

數(shù)據(jù)操作(詳見Bmob文檔):

</>復制代碼

  1. // 新增一行數(shù)據(jù)
  2. const query = Bmob.Query("tableName");
  3. query.set("name","Bmob")
  4. query.set("cover","后端云")
  5. query.save().then(res => {
  6. console.log(res)
  7. }).catch(err => {
  8. console.log(err)
  9. })
  10. // 查找所有數(shù)據(jù)
  11. const query = Bmob.Query("tableName");
  12. query.find().then(res => {
  13. console.log(res)
  14. });
條件查詢

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

</>復制代碼

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

設置排序:

</>復制代碼

  1. // 按分數(shù)降序排列
  2. query.order("-score");
踩坑:不要使用Array對象,設計合適的表結構,避免多次請求

</>復制代碼

  1. 一些剛開始使用后端云的前端開發(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標記文章,然后使用后端云的查詢語句:

</>復制代碼

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

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

Vue-Element-Admin,后臺管理系統(tǒng)

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

文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/98046.html

相關文章

  • 微信程序開發(fā)問題匯總

    摘要:前言經(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 版本文章主要介紹該小程序...

    SnaiLiu 評論0 收藏0
  • 程序-心理學辭典應用開發(fā)的心得

    摘要:小程序心理學辭典應用開發(fā)的心得前言最近學習小程序,用了五天工作之余從開始,到一個簡單的完成,有點心得,記錄下來。數(shù)據(jù)庫方面,小程序最近推出云開發(fā)的服務,這東西類似,這些后端云服務,而且這些第三方的服務對微信支持的也不錯。 小程序-心理學辭典應用開發(fā)的心得 前言 最近學習小程序,用了五天工作之余從0開始,到一個簡單的App完成,有點心得,記錄下來。 想法 最近在學習算法動態(tài)規(guī)劃那部分,有...

    cnTomato 評論0 收藏0
  • 微信程序開發(fā)中的二三事之網(wǎng)易云信IMSDK DEMO

    摘要:傳統(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...

    weij 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<