摘要(yao)：最(zui)近從1月(yue)25日到2月(yue)8日的(de)兩周之(zhi)內抽空(kong)編(bian)寫了(le)“小(xiao)打(da)卡(ka)(ka)”微信小(xiao)程(cheng)序，該(gai)產品主要(yao)是(shi)針對(dui)每(mei)日早(zao)起(qi)、健身、閱讀(du)等(deng)習(xi)慣進(jin)行(xing)打(da)卡(ka)(ka)記錄(lu)和分(fen)(fen)享，幫助用(yong)戶養成好習(xi)慣！目(mu)前支(zhi)持私密(mi)打(da)卡(ka)(ka)、打(da)卡(ka)(ka)推送提醒(xing)、分(fen)(fen)享邀請群友打(da)卡(ka)(ka)、數(shu)據(ju)統計、打(da)卡(ka)(ka)記錄(lu)、打(da)卡(ka)(ka)排(pai)行(xing)、拍(pai)照/定位發(fa)布打(da)卡(ka)(ka)公開(kai)/私密(mi)日記、點(dian)贊(zan)好友打(da)卡(ka)(ka)日記等(deng)功能。特別在(zai)此記錄(lu)分(fen)(fen)享一下開(kai)發(fa)過程(cheng)中所用(yong)到的(de)工(gong)具和開(kai)發(fa)心得。

一(yi)個(ge)微信(xin)小(xiao)程(cheng)(cheng)序需(xu)要(yao)經過產(chan)品(pin)功能(neng)構思(si)、模塊劃分(fen)、原型(xing)設計、UI設計、前(qian)(qian)端開(kai)發(fa)(fa)(fa)、后(hou)端開(kai)發(fa)(fa)(fa)、接口聯調、測試上線等開(kai)發(fa)(fa)(fa)階段(duan)，最終(zhong)推(tui)向市場，進入用戶的(de)(de)視野。在(zai)開(kai)發(fa)(fa)(fa)之前(qian)(qian)，你(ni)(ni)(ni)需(xu)要(yao)有對整個(ge)開(kai)發(fa)(fa)(fa)階段(duan)的(de)(de)全局認識，清楚在(zai)各(ge)階段(duan)的(de)(de)工作重(zhong)點。此外，你(ni)(ni)(ni)還需(xu)要(yao)借助(zhu)現成的(de)(de)一(yi)些(xie)優質工具或(huo)代碼等資源，高效快速(su)開(kai)發(fa)(fa)(fa)出小(xiao)程(cheng)(cheng)序，實現你(ni)(ni)(ni)的(de)(de)創意。本文不(bu)會手把(ba)手教你(ni)(ni)(ni)編寫(xie)代碼，主要(yao)講述在(zai)整個(ge)產(chan)品(pin)開(kai)發(fa)(fa)(fa)階段(duan)中(zhong)，前(qian)(qian)后(hou)端開(kai)發(fa)(fa)(fa)的(de)(de)一(yi)些(xie)要(yao)點。旨(zhi)在(zai)提供(gong)一(yi)些(xie)能(neng)讓你(ni)(ni)(ni)事半功倍、快速(su)開(kai)發(fa)(fa)(fa)小(xiao)程(cheng)(cheng)序的(de)(de)相(xiang)關資源和開(kai)發(fa)(fa)(fa)心得！

準備工作

1. 在線思維導圖工具：百度腦圖
2. 在線原型設計工具：墨刀
3. 在線API文檔編寫工具：ShowDoc
4. 官方接口組件文檔
5. 可視化編輯器白鷺Egret Wing
6. 微信官方IDE
7. 小程序界面樣式庫weui-wxss
8. 官方Demo代碼
9. 接口聯調插件Postman
10. 騰訊云小程序后端開發套件wafer
11. 騰訊云wafer自行部署方案
12. 小打卡微信小程序

前端開發

1.根據所構思的產(chan)品(pin)的相關功(gong)能(neng)(neng)，采用(yong)「百度(du)腦圖」來(lai)規(gui)范化產(chan)品(pin)的功(gong)能(neng)(neng)模塊。

去粗取精，將與(yu)產品功能相關的(de)想(xiang)法進(jin)行梳理。

產(chan)生一個(ge)(ge)(ge)產(chan)品idea后，我(wo)一般(ban)做(zuo)法是盡快(kuai)記錄到備(bei)(bei)忘錄。隨后圍繞這個(ge)(ge)(ge)產(chan)品的(de)(de)(de)功(gong)(gong)能(neng)、市(shi)場、特色、使用流程等其它(ta)想法，不(bu)斷(duan)補充(chong)到備(bei)(bei)忘錄上(shang)(shang)。這樣隨著記錄越多(duo)，產(chan)品也會變得越復雜(za)。這時，可(ke)以采用腦(nao)圖工具(ju)，借鑒一般(ban)App的(de)(de)(de)設計，對備(bei)(bei)忘錄上(shang)(shang)關于功(gong)(gong)能(neng)和(he)流程的(de)(de)(de)記錄做(zuo)重新梳(shu)理，確定整個(ge)(ge)(ge)產(chan)品的(de)(de)(de)模(mo)塊劃(hua)分(fen)及(ji)各個(ge)(ge)(ge)模(mo)塊下的(de)(de)(de)小(xiao)功(gong)(gong)能(neng)，剝(bo)離(li)出相同的(de)(de)(de)功(gong)(gong)能(neng)。如下圖，這是早期小(xiao)打卡的(de)(de)(de)功(gong)(gong)能(neng)模(mo)塊劃(hua)分(fen)。只(zhi)保留了我(wo)認為比不(bu)可(ke)少的(de)(de)(de)功(gong)(gong)能(neng)，產(chan)品的(de)(de)(de)第(di)一屏我(wo)準(zhun)備(bei)(bei)放(fang)置四個(ge)(ge)(ge)平(ping)級的(de)(de)(de)主頁面(mian)，每個(ge)(ge)(ge)主頁面(mian)又包含相應的(de)(de)(de)次級頁面(mian)和(he)功(gong)(gong)能(neng)。

圖：小打卡的功能模(mo)塊劃分(fen)

2.根(gen)據完(wan)成的(de)“功能模塊設計”，采用(yong)“墨刀”在線設計完(wan)成產品的(de)原型圖。

借助簡(jian)單的原型設計工具，在(zai)編碼之前，以較低(di)的成本將創意可(ke)視(shi)化。

這(zhe)(zhe)一(yi)步，其實需要你(ni)(ni)簡(jian)單(dan)了解一(yi)下現在(zai)小(xiao)(xiao)程序(xu)(xu)開發中可(ke)(ke)用(yong)到的(de)(de)UI組(zu)(zu)(zu)件(jian)(jian)(jian)，在(zai)小(xiao)(xiao)程序(xu)(xu)官方文檔的(de)(de)組(zu)(zu)(zu)件(jian)(jian)(jian)這(zhe)(zhe)部分內容中，詳細介紹(shao)了小(xiao)(xiao)程序(xu)(xu)提(ti)供的(de)(de)視圖容器、表單(dan)、媒體、導航等(deng)組(zu)(zu)(zu)件(jian)(jian)(jian)，在(zai)開發之前，你(ni)(ni)至少要弄明白這(zhe)(zhe)些組(zu)(zu)(zu)件(jian)(jian)(jian)長(chang)啥樣(yang)子，初期保證功能(neng)優先，在(zai)設(she)(she)計(ji)(ji)你(ni)(ni)的(de)(de)小(xiao)(xiao)程序(xu)(xu)時，先別瞎折(zhe)騰(teng)華(hua)麗的(de)(de)界面，應(ying)該盡量(liang)參考官方已(yi)有的(de)(de)組(zu)(zu)(zu)件(jian)(jian)(jian)來設(she)(she)計(ji)(ji)你(ni)(ni)的(de)(de)產品，這(zhe)(zhe)樣(yang)可(ke)(ke)以(yi)先跳過UI設(she)(she)計(ji)(ji)這(zhe)(zhe)個階段，并且(qie)在(zai)編寫(xie)前端代(dai)碼(ma)的(de)(de)階段，你(ni)(ni)可(ke)(ke)以(yi)復用(yong)官方提(ti)供的(de)(de)組(zu)(zu)(zu)件(jian)(jian)(jian)和代(dai)碼(ma)，至多只需對官方組(zu)(zu)(zu)件(jian)(jian)(jian)進行(xing)稍微改動。從而可(ke)(ke)以(yi)事(shi)半(ban)功倍地進行(xing)開發。此外(wai)這(zhe)(zhe)些所謂的(de)(de)UI組(zu)(zu)(zu)件(jian)(jian)(jian)應(ying)用(yong)很廣泛，在(zai)各類App上基本都(dou)能(neng)見(jian)到。在(zai)墨刀這(zhe)(zhe)個在(zai)線原型設(she)(she)計(ji)(ji)網(wang)站(zhan)上，你(ni)(ni)可(ke)(ke)以(yi)拖拽式地設(she)(she)計(ji)(ji)你(ni)(ni)的(de)(de)小(xiao)(xiao)程序(xu)(xu)界面。

圖：墨刀——在線原型設計網站

3.使用(yong)“白鷺Egret Wing”和“微信官方IDE”編(bian)寫前端代(dai)碼

使用兩(liang)個工具搭配，更(geng)高效地開發。

工欲善其事，必先利其器，小程序前端部分的開發，可以采用官方IDE+白鷺Egret Wing搭配，前者可是讓你很方便的預覽產品、手機掃碼聯調、上傳你的小程序代碼到線上部署。后者則彌補了官方IDE在編輯代碼方面的不足，提供了很便捷的代碼Page模板創建、代碼補全以及實時編輯預覽功能。

圖：白鷺Egret Wing代(dai)碼編輯

4.仔細(xi)查閱“官方接口組件文檔”弄懂小程序(xu)提供的相(xiang)關(guan)組件和API。

對比小程序的能力(li)，仔細分析你的產品，思考怎么(me)組(zu)織小程序的組(zu)件(jian)和API去實現(xian)你的功能和頁面。

熟讀官(guan)(guan)方提(ti)供(gong)的(de)(de)(de)接口及組(zu)件(jian)文(wen)(wen)檔(dang)，這(zhe)個(ge)(ge)(ge)階段雖說(shuo)只(zhi)是編寫界面(mian)展示的(de)(de)(de)代(dai)碼，但是你得(de)先搞(gao)清(qing)楚小程序的(de)(de)(de)基本(ben)骨架、配置、邏(luo)輯、視圖及樣(yang)式之(zhi)(zhi)間的(de)(de)(de)聯系。簡(jian)單說(shuo)，小程序包(bao)含(han)一個(ge)(ge)(ge)描述整體程序的(de)(de)(de) App 和多個(ge)(ge)(ge)描述各(ge)自頁(ye)(ye)面(mian)的(de)(de)(de) page。這(zhe)里的(de)(de)(de) App 是指放在(zai)根目(mu)錄(lu)的(de)(de)(de)app.js/app.json/app.wxss這(zhe)三個(ge)(ge)(ge)文(wen)(wen)件(jian)，他(ta)們(men)主(zhu)要負(fu)責全局(ju)性的(de)(de)(de)邏(luo)輯、配置及樣(yang)式。page則是你即(ji)將編寫的(de)(de)(de)多個(ge)(ge)(ge)頁(ye)(ye)面(mian)，對(dui)應(ying)到你的(de)(de)(de)原型設計中(zhong)(zhong)的(de)(de)(de)每一頁(ye)(ye)，多個(ge)(ge)(ge)page之(zhi)(zhi)間可以(yi)通過官(guan)(guan)方提(ti)供(gong)的(de)(de)(de)導航(hang)功(gong)能(neng)進行跳轉。每個(ge)(ge)(ge)page頁(ye)(ye)面(mian)由page.js/page.json/page.wxml/page.wxss四個(ge)(ge)(ge)文(wen)(wen)件(jian)組(zu)成，其中(zhong)(zhong)wxml頁(ye)(ye)面(mian)類似于(yu)html文(wen)(wen)件(jian)，主(zhu)要負(fu)責頁(ye)(ye)面(mian)的(de)(de)(de)結構，不過比起html來，它(ta)更加簡(jian)化了，你的(de)(de)(de)布局(ju)基本(ben)上(shang)是在(zai)使用和標(biao)簽以(yi)及其它(ta)官(guan)(guan)方文(wen)(wen)檔(dang)上(shang)說(shuo)明的(de)(de)(de)其他(ta)標(biao)簽，這(zhe)里注意查看官(guan)(guan)方文(wen)(wen)檔(dang)中(zhong)(zhong)的(de)(de)(de)組(zu)件(jian)這(zhe)部(bu)分的(de)(de)(de)內容。

5.結合“weui-wxss”和“官(guan)方Demo”的(de)相(xiang)關代碼(ma)，來編寫產品的(de)前端界面(mian)的(de)代碼(ma)

這一步主要是對照你的(de)原型設(she)計，使用微信小程(cheng)序的(de)WXML語法，借助小程(cheng)序的(de)樣式組件來把你的(de)產品界(jie)面寫出來。

搭建產品界面不(bu)(bu)得(de)不(bu)(bu)提(ti)weui-wxss這(zhe)個(ge)官方開源的(de)(de)(de)樣(yang)式(shi)庫，他封裝了(le)很多實用的(de)(de)(de)組件，比(bi)如圖片(pian)上(shang)傳、消(xiao)息提(ti)示(shi)、日期選擇(ze)、Tab選項卡等(deng)組件，你(ni)只(zhi)需要復(fu)制相應的(de)(de)(de)WXML和(he)WXSS代(dai)碼到你(ni)的(de)(de)(de)項目中對(dui)應的(de)(de)(de)文件里面即可。這(zhe)也是(shi)一開始讓你(ni)盡(jin)量(liang)(liang)參考微(wei)信已有(you)組件來設計原型圖的(de)(de)(de)原因。這(zhe)樣(yang)做還有(you)個(ge)好處，就是(shi)能讓界面風格和(he)微(wei)信盡(jin)量(liang)(liang)統一，保持一致。另外(wai)，官方Deom代(dai)碼包含(han)了(le)官方組件和(he)API的(de)(de)(de)在小程序(xu)的(de)(de)(de)中具(ju)體使用的(de)(de)(de)代(dai)碼，值得(de)開發者借鑒使用。

總結(jie)：上(shang)面(mian)(mian)部分主(zhu)要是小程(cheng)序前端(duan)界面(mian)(mian)的開發(fa)流程(cheng)，對(dui)于沒有后端(duan)開發(fa)基(ji)(ji)礎和(he)經驗(yan)的用戶，想寫一個沒有和(he)服務器進行數據交互的產品，基(ji)(ji)本上(shang)是可(ke)以實踐了。別忘(wang)了頁面(mian)(mian)邏輯(ji)寫好，測試修復好bug再(zai)上(shang)線。對(dui)于有后端(duan)開發(fa)經驗(yan)的朋(peng)友可(ke)以繼續(xu)往下看，下面(mian)(mian)會聊聊關于怎么(me)快速后端(duan)開發(fa)的內容(rong)，當(dang)然也是盡可(ke)能的結(jie)合已(yi)有的資源或(huo)代碼。

2.后端開發

1.根(gen)據“已完(wan)成(cheng)(cheng)的前端(duan)界面和邏輯”，采用(yong)“ShowDoc”在(zai)線(xian)完(wan)成(cheng)(cheng)API接(jie)口文檔。

小(xiao)程序通(tong)過邏(luo)輯page.js中設置數據的(de)(de)改(gai)變，帶來界面相(xiang)應的(de)(de)變化，需(xu)要和服務器端程序約定好(hao)數據交互的(de)(de)格式。

完成前端的(de)(de)(de)界面以(yi)后(hou)，你可能寫了一堆假(jia)界面，或者說是靜態的(de)(de)(de)界面。在微(wei)信小程序(xu)中，我(wo)們(men)改(gai)變(bian)邏輯層的(de)(de)(de)page.js文件中定義data對(dui)象下某個屬性的(de)(de)(de)值(zhi)，則引起視圖page.wxml文件中的(de)(de)(de)該屬性值(zhi)自(zi)動變(bian)為改(gai)變(bian)后(hou)的(de)(de)(de)值(zhi)。簡(jian)而言(yan)之，如(ru)果需要(yao)改(gai)變(bian)界面上(shang)的(de)(de)(de)內容(rong)，比如(ru)不(bu)同的(de)(de)(de)用戶顯示不(bu)同的(de)(de)(de)昵稱，我(wo)們(men)只需要(yao)在page.js這樣定義data對(dui)象數據(ju)：

data: {nickName: '某某'}

在page.xml中使(shi)用這個數(shu)據：

{{nickName}}

在通過網絡請(qing)求(qiu)后可以通過setData()函數(shu)來改變數(shu)據：

this.setData({nickName: '小打卡'})

執行這個(ge)函數操(cao)作(zuo)后(hou)，你所(suo)看(kan)到的界(jie)面內容(rong)也隨之改變(bian)。

因(yin)此(ci)，在(zai)寫后端代碼之前，我(wo)們可以先捋一捋各個頁(ye)面或者功(gong)能需要發生變(bian)化(hua)的(de)(de)數(shu)(shu)(shu)據(ju)(ju)，并(bing)且該數(shu)(shu)(shu)據(ju)(ju)需要從服務器獲取，我(wo)們通過撰(zhuan)寫接(jie)口(kou)文檔，讓前后端遵(zun)循這個規定進行(xing)數(shu)(shu)(shu)據(ju)(ju)交互(hu)。下圖(tu)是(shi)我(wo)的(de)(de)小(xiao)打卡小(xiao)程序的(de)(de)接(jie)口(kou)示例：

圖：接口(kou)文檔(dang)示例

使(shi)用(yong)(yong)小打卡的(de)(de)用(yong)(yong)戶都知道，在(zai)創(chuang)建打卡的(de)(de)時候，可以(yi)在(zai)推薦(jian)(jian)列表(biao)中(zhong)直接選(xuan)擇某個(ge)習慣，我之后(hou)(hou)會根據(ju)大家(jia)的(de)(de)習慣使(shi)用(yong)(yong)頻次，來更新這個(ge)推薦(jian)(jian)的(de)(de)習慣，所以(yi)先(xian)(xian)通過文檔約定這個(ge)數據(ju)的(de)(de)請(qing)求方式、請(qing)求鏈接、請(qing)求時所帶(dai)的(de)(de)參數以(yi)及返(fan)(fan)回(hui)的(de)(de)數據(ju)格式。首先(xian)(xian)在(zai)page的(de)(de)data對象中(zhong)定義這個(ge)屬(shu)性(xing)habitList，在(zai)小程序中(zhong)向服(fu)務(wu)器發送網絡請(qing)求并獲取返(fan)(fan)回(hui)的(de)(de)數據(ju)后(hou)(hou)，通過setData()更新data對象下定義的(de)(de)habitList的(de)(de)值。后(hou)(hou)，推薦(jian)(jian)列表(biao)的(de)(de)內容將自動呈(cheng)現(xian)在(zai)界面上。代碼如下：

//page.js
Page({
  data:{
    habitList: [],
  },
  onLoad:function(){//頁面初始化時，發(fa)送網絡(luo)請求
    this.habitFind();
  },
  habitFind: function(){
    var that = this;
    wx.request({
      url: '//www.x.com/habit/find', 
      method: 'GET',
      data: {
        openId: userInfo.openId
      },
      success: function(res) {//成(cheng)功獲(huo)取(qu)返回的(de)數據
        if(res.data.code == '2000'){
         let habitList = res.data.data.habitList;
         if(habitList.length){
           that.setData({//更新data數據中(zhong)的habitList
            habitList: habitList
          });
         }
        }
      }
    });
  }
})

//page.wxml 可以參考官方文檔中的列表渲染部分的內容
<view class="weui-cells weui-cells_after-title"  wx:for="{{habitList}}" wx:key="unique">
    <view class="weui-cell" bindtap="habit_create" data-mode="find" data-habit-data="{{item}}">
        <view wx:if="{{item.habitLogo}}" class="weui-cell__hd">
            <image src="{{item.habitLogo}}" style="margin-bottom:2px;margin-right: 5px;vertical-align: middle;width:16px; height: 16px;"; />
        view>
        <view class="weui-cell__bd">{{item.habitName}}view>
        <view class="weui-cell__ft weui-cell__ft_in-access">view>
    view>
view>

圖：渲染后的列表頁面

通過API文(wen)檔規范約定小程(cheng)序中某一(yi)個頁面(mian)或操(cao)作(zuo)所(suo)需發送的(de)(de)(de)(de)數(shu)據(ju)以(yi)(yi)及從服務(wu)端(duan)返回的(de)(de)(de)(de)數(shu)據(ju)格式(shi)，這(zhe)對于獨立開發或團隊協作(zuo)開發都大有裨益。這(zhe)樣的(de)(de)(de)(de)文(wen)檔編(bian)寫工具可(ke)(ke)以(yi)(yi)采用(yong)在(zai)線的(de)(de)(de)(de)網站，也可(ke)(ke)以(yi)(yi)自行(xing)編(bian)寫Word，目的(de)(de)(de)(de)都是(shi)約定好(hao)(hao)前后端(duan)數(shu)據(ju)輸入輸出，當(dang)然(ran)也有比我提到(dao)的(de)(de)(de)(de)ShowDoc更強(qiang)大好(hao)(hao)用(yong)的(de)(de)(de)(de)工具。在(zai)開發過程(cheng)中，還需根據(ju)你的(de)(de)(de)(de)實(shi)際情況，補(bu)充完善API接口文(wen)檔，因為有些并不是(shi)所(suo)有數(shu)據(ju)都會在(zai)視(shi)圖層顯(xian)示(shi)，還有與你的(de)(de)(de)(de)邏(luo)(luo)輯相關(guan)的(de)(de)(de)(de)數(shu)據(ju)，也需要在(zai)接口文(wen)檔中去考慮定義好(hao)(hao)，這(zhe)個階段的(de)(de)(de)(de)工作(zuo)直(zhi)接回影響到(dao)你下個階段數(shu)據(ju)表(biao)的(de)(de)(de)(de)設(she)計相關(guan)高總。所(suo)以(yi)(yi)在(zai)設(she)計數(shu)據(ju)表(biao)之前，盡量把(ba)你的(de)(de)(de)(de)小程(cheng)序的(de)(de)(de)(de)各種操(cao)作(zuo)的(de)(de)(de)(de)邏(luo)(luo)輯代碼寫好(hao)(hao)，整(zheng)理出你需要服務(wu)器(qi)端(duan)提供的(de)(de)(de)(de)各項數(shu)據(ju)。

2.根據“API接口文檔”和“前端小程序代碼”，設(she)計(ji)所需的數據表(biao)。

數據(ju)庫設計(ji)請(qing)參考相應的(de)設計(ji)規范，一言難盡啊……

3.根據(ju)“API接口文檔”和“數據(ju)表”，閱讀“wafer自行部署方案”，采用“小程序后端套件wafer”中的(de)會話服務和CI框架(jia)，確定后端的(de)控(kong)制(zhi)器、數據(ju)模型劃分(fen)，編寫后端代(dai)碼。

wafer是騰(teng)訊云(yun)(yun)開源小程序后(hou)端(duan)PHP套件(jian)，部署(shu)(shu)后(hou)可以(yi)輕松使(shi)用(yong)會話(hua)服務(wu)和信(xin)道(dao)服務(wu) 授權登(deng)陸、獲取用(yong)戶身份信(xin)息這(zhe)些(xie)功能雖(sui)然官方文檔有提及，但是沒有給出(chu)具體(ti)的(de)后(hou)端(duan)實(shi)現(xian)代碼(ma)，所(suo)以(yi)騰(teng)訊云(yun)(yun)的(de)wafer套件(jian)剛好(hao)(hao)滿足了需(xu)求(qiu)，后(hou)端(duan)可以(yi)直接部署(shu)(shu)使(shi)用(yong)，但是部署(shu)(shu)還是有點兒麻煩，更簡(jian)單(dan)點你可以(yi)購買(mai)配套這(zhe)個服務(wu)的(de)騰(teng)訊云(yun)(yun)服務(wu)器。若自行部署(shu)(shu)可以(yi)參考我(wo)的(de)部署(shu)(shu)心得，部署(shu)(shu)后(hou)，其他具體(ti)的(de)接口代碼(ma)你需(xu)要(yao)結合設計好(hao)(hao)的(de)數(shu)據表進(jin)行編寫(xie)、調試。

圖：騰訊(xun)云提供的小(xiao)程序解決方案

后(hou)(hou)端(duan)代(dai)碼編(bian)寫后(hou)(hou)可(ke)以聯調數據，記得完成(cheng)前端(duan)小程(cheng)序的(de)(de)Http請(qing)求、數據渲(xuan)染及其他邏輯(ji)。對產品(pin)的(de)(de)相關功能和邏輯(ji)的(de)(de)進行測試，修(xiu)復相關Bug后(hou)(hou)再上線產品(pin)。

開發(fa)小程(cheng)(cheng)序(xu)(xu)的過程(cheng)(cheng)中(zhong)難免踩(cai)坑，多(duo)研究(jiu)小程(cheng)(cheng)序(xu)(xu)官方文(wen)檔，多(duo)研究(jiu)小程(cheng)(cheng)序(xu)(xu)官方文(wen)檔，多(duo)研究(jiu)小程(cheng)(cheng)序(xu)(xu)官方文(wen)檔，多(duo)搜索相關的開發(fa)知識(shi)，多(duo)閱讀優質的小程(cheng)(cheng)序(xu)(xu)源代(dai)(dai)碼(ma)，多(duo)寫多(duo)練(lian)熟能生巧。肯定還有(you)很多(duo)優質的開源代(dai)(dai)碼(ma)、工具等資源沒有(you)提及，歡迎補(bu)充！