摘要：最近從1月25日到2月8日的兩周之內(nèi)抽空編寫(xiě)了“小打卡”微信小程序，該產(chǎn)品主要是針對(duì)每日早起、健身、閱讀等習(xí)慣進(jìn)行打卡記錄和分享，幫助用戶養(yǎng)成好習(xí)慣！目前支持私密打卡、打卡推送提醒、分享邀請(qǐng)群友打卡、數(shù)據(jù)統(tǒng)計(jì)、打卡記錄、打卡排行、拍照/定位發(fā)布打卡公開(kāi)/私密日記、點(diǎn)贊好友打卡日記等功能。特別在此記錄分享一下開(kāi)發(fā)過(guò)程中所用到的工具和開(kāi)發(fā)心得。

一個(gè)微信小程序需要經(jīng)過(guò)產(chǎn)品功能構(gòu)思、模塊劃分、原型設(shè)計(jì)、UI設(shè)計(jì)、前端開(kāi)發(fā)、后端開(kāi)發(fā)、接口聯(lián)調(diào)、測(cè)試上線等開(kāi)發(fā)階段，最終推向市場(chǎng)，進(jìn)入用戶的視野。在開(kāi)發(fā)之前，你需要有對(duì)整個(gè)開(kāi)發(fā)階段的全局認(rèn)識(shí)，清楚在各階段的工作重點(diǎn)。此外，你還需要借助現(xiàn)成的一些優(yōu)質(zhì)工具或代碼等資源，高效快速開(kāi)發(fā)出小程序，實(shí)現(xiàn)你的創(chuàng)意。本文不會(huì)手把手教你編寫(xiě)代碼，主要講述在整個(gè)產(chǎn)品開(kāi)發(fā)階段中，前后端開(kāi)發(fā)的一些要點(diǎn)。旨在提供一些能讓你事半功倍、快速開(kāi)發(fā)小程序的相關(guān)資源和開(kāi)發(fā)心得！

準(zhǔn)備工作

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

前端開(kāi)發(fā)

1.根據(jù)所構(gòu)思的產(chǎn)品的相關(guān)功能，采用「百度腦圖」來(lái)規(guī)范化產(chǎn)品的功能模塊。

去粗取精，將與產(chǎn)品功能相關(guān)的想法進(jìn)行梳理。

產(chǎn)生一個(gè)產(chǎn)品idea后，我一般做法是盡快記錄到備忘錄。隨后圍繞這個(gè)產(chǎn)品的功能、市場(chǎng)、特色、使用流程等其它想法，不斷補(bǔ)充到備忘錄上。這樣隨著記錄越多，產(chǎn)品也會(huì)變得越復(fù)雜。這時(shí)，可以采用腦圖工具，借鑒一般App的設(shè)計(jì)，對(duì)備忘錄上關(guān)于功能和流程的記錄做重新梳理，確定整個(gè)產(chǎn)品的模塊劃分及各個(gè)模塊下的小功能，剝離出相同的功能。如下圖，這是早期小打卡的功能模塊劃分。只保留了我認(rèn)為比不可少的功能，產(chǎn)品的第一屏我準(zhǔn)備放置四個(gè)平級(jí)的主頁(yè)面，每個(gè)主頁(yè)面又包含相應(yīng)的次級(jí)頁(yè)面和功能。

圖：小打卡的功能模塊劃分

2.根據(jù)完成的“功能模塊設(shè)計(jì)”，采用“墨刀”在線設(shè)計(jì)完成產(chǎn)品的原型圖。

借助簡(jiǎn)單的原型設(shè)計(jì)工具，在編碼之前，以較低的成本將創(chuàng)意可視化。

這一步，其實(shí)需要你簡(jiǎn)單了解一下現(xiàn)在小程序開(kāi)發(fā)中可用到的UI組件，在小程序官方文檔的組件這部分內(nèi)容中，詳細(xì)介紹了小程序提供的視圖容器、表單、媒體、導(dǎo)航等組件，在開(kāi)發(fā)之前，你至少要弄明白這些組件長(zhǎng)啥樣子，初期保證功能優(yōu)先，在設(shè)計(jì)你的小程序時(shí)，先別瞎折騰華麗的界面，應(yīng)該盡量參考官方已有的組件來(lái)設(shè)計(jì)你的產(chǎn)品，這樣可以先跳過(guò)UI設(shè)計(jì)這個(gè)階段，并且在編寫(xiě)前端代碼的階段，你可以復(fù)用官方提供的組件和代碼，至多只需對(duì)官方組件進(jìn)行稍微改動(dòng)。從而可以事半功倍地進(jìn)行開(kāi)發(fā)。此外這些所謂的UI組件應(yīng)用很廣泛，在各類App上基本都能見(jiàn)到。在墨刀這個(gè)在線原型設(shè)計(jì)網(wǎng)站上，你可以拖拽式地設(shè)計(jì)你的小程序界面。

圖：墨刀——在線原型設(shè)計(jì)網(wǎng)站

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

使用兩個(gè)工具搭配，更高效地開(kāi)發(fā)。

工欲善其事，必先利其器，小程序前端部分的開(kāi)發(fā)，可以采用官方IDE+白鷺Egret Wing搭配，前者可是讓你很方便的預(yù)覽產(chǎn)品、手機(jī)掃碼聯(lián)調(diào)、上傳你的小程序代碼到線上部署。后者則彌補(bǔ)了官方IDE在編輯代碼方面的不足，提供了很便捷的代碼Page模板創(chuàng)建、代碼補(bǔ)全以及實(shí)時(shí)編輯預(yù)覽功能。

圖：白鷺Egret Wing代碼編輯

4.仔細(xì)查閱“官方接口組件文檔”弄懂小程序提供的相關(guān)組件和API。

對(duì)比小程序的能力，仔細(xì)分析你的產(chǎn)品，思考怎么組織小程序的組件和API去實(shí)現(xiàn)你的功能和頁(yè)面。

熟讀官方提供的接口及組件文檔，這個(gè)階段雖說(shuō)只是編寫(xiě)界面展示的代碼，但是你得先搞清楚小程序的基本骨架、配置、邏輯、視圖及樣式之間的聯(lián)系。簡(jiǎn)單說(shuō)，小程序包含一個(gè)描述整體程序的 App 和多個(gè)描述各自頁(yè)面的 page。這里的 App 是指放在根目錄的app.js/app.json/app.wxss這三個(gè)文件，他們主要負(fù)責(zé)全局性的邏輯、配置及樣式。page則是你即將編寫(xiě)的多個(gè)頁(yè)面，對(duì)應(yīng)到你的原型設(shè)計(jì)中的每一頁(yè)，多個(gè)page之間可以通過(guò)官方提供的導(dǎo)航功能進(jìn)行跳轉(zhuǎn)。每個(gè)page頁(yè)面由page.js/page.json/page.wxml/page.wxss四個(gè)文件組成，其中wxml頁(yè)面類似于html文件，主要負(fù)責(zé)頁(yè)面的結(jié)構(gòu)，不過(guò)比起html來(lái)，它更加簡(jiǎn)化了，你的布局基本上是在使用和標(biāo)簽以及其它官方文檔上說(shuō)明的其他標(biāo)簽，這里注意查看官方文檔中的組件這部分的內(nèi)容。

5.結(jié)合“weui-wxss”和“官方Demo”的相關(guān)代碼，來(lái)編寫(xiě)產(chǎn)品的前端界面的代碼

這一步主要是對(duì)照你的原型設(shè)計(jì)，使用微信小程序的WXML語(yǔ)法，借助小程序的樣式組件來(lái)把你的產(chǎn)品界面寫(xiě)出來(lái)。

搭建產(chǎn)品界面不得不提weui-wxss這個(gè)官方開(kāi)源的樣式庫(kù)，他封裝了很多實(shí)用的組件，比如圖片上傳、消息提示、日期選擇、Tab選項(xiàng)卡等組件，你只需要復(fù)制相應(yīng)的WXML和WXSS代碼到你的項(xiàng)目中對(duì)應(yīng)的文件里面即可。這也是一開(kāi)始讓你盡量參考微信已有組件來(lái)設(shè)計(jì)原型圖的原因。這樣做還有個(gè)好處，就是能讓界面風(fēng)格和微信盡量統(tǒng)一，保持一致。另外，官方Deom代碼包含了官方組件和API的在小程序的中具體使用的代碼，值得開(kāi)發(fā)者借鑒使用。

總結(jié)：上面部分主要是小程序前端界面的開(kāi)發(fā)流程，對(duì)于沒(méi)有后端開(kāi)發(fā)基礎(chǔ)和經(jīng)驗(yàn)的用戶，想寫(xiě)一個(gè)沒(méi)有和服務(wù)器進(jìn)行數(shù)據(jù)交互的產(chǎn)品，基本上是可以實(shí)踐了。別忘了頁(yè)面邏輯寫(xiě)好，測(cè)試修復(fù)好bug再上線。對(duì)于有后端開(kāi)發(fā)經(jīng)驗(yàn)的朋友可以繼續(xù)往下看，下面會(huì)聊聊關(guān)于怎么快速后端開(kāi)發(fā)的內(nèi)容，當(dāng)然也是盡可能的結(jié)合已有的資源或代碼。

2.后端開(kāi)發(fā)

1.根據(jù)“已完成的前端界面和邏輯”，采用“ShowDoc”在線完成API接口文檔。

小程序通過(guò)邏輯page.js中設(shè)置數(shù)據(jù)的改變，帶來(lái)界面相應(yīng)的變化，需要和服務(wù)器端程序約定好數(shù)據(jù)交互的格式。

完成前端的界面以后，你可能寫(xiě)了一堆假界面，或者說(shuō)是靜態(tài)的界面。在微信小程序中，我們改變邏輯層的page.js文件中定義data對(duì)象下某個(gè)屬性的值，則引起視圖page.wxml文件中的該屬性值自動(dòng)變?yōu)楦淖兒蟮闹?。?jiǎn)而言之，如果需要改變界面上的內(nèi)容，比如不同的用戶顯示不同的昵稱，我們只需要在page.js這樣定義data對(duì)象數(shù)據(jù)：

data: {nickName: '某某'}

在page.xml中使用這個(gè)數(shù)據(jù)：

{{nickName}}

在通過(guò)網(wǎng)絡(luò)請(qǐng)求后可以通過(guò)setData()函數(shù)來(lái)改變數(shù)據(jù)：

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

執(zhí)行這個(gè)函數(shù)操作后，你所看到的界面內(nèi)容也隨之改變。

因此，在寫(xiě)后端代碼之前，我們可以先捋一捋各個(gè)頁(yè)面或者功能需要發(fā)生變化的數(shù)據(jù)，并且該數(shù)據(jù)需要從服務(wù)器獲取，我們通過(guò)撰寫(xiě)接口文檔，讓前后端遵循這個(gè)規(guī)定進(jìn)行數(shù)據(jù)交互。下圖是我的小打卡小程序的接口示例：

圖：接口文檔示例

使用小打卡的用戶都知道，在創(chuàng)建打卡的時(shí)候，可以在推薦列表中直接選擇某個(gè)習(xí)慣，我之后會(huì)根據(jù)大家的習(xí)慣使用頻次，來(lái)更新這個(gè)推薦的習(xí)慣，所以先通過(guò)文檔約定這個(gè)數(shù)據(jù)的請(qǐng)求方式、請(qǐng)求鏈接、請(qǐng)求時(shí)所帶的參數(shù)以及返回的數(shù)據(jù)格式。首先在page的data對(duì)象中定義這個(gè)屬性habitList，在小程序中向服務(wù)器發(fā)送網(wǎng)絡(luò)請(qǐng)求并獲取返回的數(shù)據(jù)后，通過(guò)setData()更新data對(duì)象下定義的habitList的值。后，推薦列表的內(nèi)容將自動(dòng)呈現(xiàn)在界面上。代碼如下：

//page.js
Page({
  data:{
    habitList: [],
  },
  onLoad:function(){//頁(yè)面初始化時(shí)，發(fā)送網(wǎng)絡(luò)請(qǐng)求
    this.habitFind();
  },
  habitFind: function(){
    var that = this;
    wx.request({
      url: 'https://www.x.com/habit/find', 
      method: 'GET',
      data: {
        openId: userInfo.openId
      },
      success: function(res) {//成功獲取返回的數(shù)據(jù)
        if(res.data.code == '2000'){
         let habitList = res.data.data.habitList;
         if(habitList.length){
           that.setData({//更新data數(shù)據(jù)中的habitList
            habitList: habitList
          });
         }
        }
      }
    });
  }
})

//page.wxml 可以參考官方文檔中的列表渲染部分的內(nèi)容
<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>

圖：渲染后的列表頁(yè)面

通過(guò)API文檔規(guī)范約定小程序中某一個(gè)頁(yè)面或操作所需發(fā)送的數(shù)據(jù)以及從服務(wù)端返回的數(shù)據(jù)格式，這對(duì)于獨(dú)立開(kāi)發(fā)或團(tuán)隊(duì)協(xié)作開(kāi)發(fā)都大有裨益。這樣的文檔編寫(xiě)工具可以采用在線的網(wǎng)站，也可以自行編寫(xiě)Word，目的都是約定好前后端數(shù)據(jù)輸入輸出，當(dāng)然也有比我提到的ShowDoc更強(qiáng)大好用的工具。在開(kāi)發(fā)過(guò)程中，還需根據(jù)你的實(shí)際情況，補(bǔ)充完善API接口文檔，因?yàn)橛行┎⒉皇撬袛?shù)據(jù)都會(huì)在視圖層顯示，還有與你的邏輯相關(guān)的數(shù)據(jù)，也需要在接口文檔中去考慮定義好，這個(gè)階段的工作直接回影響到你下個(gè)階段數(shù)據(jù)表的設(shè)計(jì)相關(guān)高總。所以在設(shè)計(jì)數(shù)據(jù)表之前，盡量把你的小程序的各種操作的邏輯代碼寫(xiě)好，整理出你需要服務(wù)器端提供的各項(xiàng)數(shù)據(jù)。

2.根據(jù)“API接口文檔”和“前端小程序代碼”，設(shè)計(jì)所需的數(shù)據(jù)表。

數(shù)據(jù)庫(kù)設(shè)計(jì)請(qǐng)參考相應(yīng)的設(shè)計(jì)規(guī)范，一言難盡啊……

3.根據(jù)“API接口文檔”和“數(shù)據(jù)表”，閱讀“wafer自行部署方案”，采用“小程序后端套件wafer”中的會(huì)話服務(wù)和CI框架，確定后端的控制器、數(shù)據(jù)模型劃分，編寫(xiě)后端代碼。

wafer是騰訊云開(kāi)源小程序后端PHP套件，部署后可以輕松使用會(huì)話服務(wù)和信道服務(wù) 授權(quán)登陸、獲取用戶身份信息這些功能雖然官方文檔有提及，但是沒(méi)有給出具體的后端實(shí)現(xiàn)代碼，所以騰訊云的wafer套件剛好滿足了需求，后端可以直接部署使用，但是部署還是有點(diǎn)兒麻煩，更簡(jiǎn)單點(diǎn)你可以購(gòu)買配套這個(gè)服務(wù)的騰訊云服務(wù)器。若自行部署可以參考我的部署心得，部署后，其他具體的接口代碼你需要結(jié)合設(shè)計(jì)好的數(shù)據(jù)表進(jìn)行編寫(xiě)、調(diào)試。

圖：騰訊云提供的小程序解決方案

后端代碼編寫(xiě)后可以聯(lián)調(diào)數(shù)據(jù)，記得完成前端小程序的Http請(qǐng)求、數(shù)據(jù)渲染及其他邏輯。對(duì)產(chǎn)品的相關(guān)功能和邏輯的進(jìn)行測(cè)試，修復(fù)相關(guān)Bug后再上線產(chǎn)品。

開(kāi)發(fā)小程序的過(guò)程中難免踩坑，多研究小程序官方文檔，多研究小程序官方文檔，多研究小程序官方文檔，多搜索相關(guān)的開(kāi)發(fā)知識(shí)，多閱讀優(yōu)質(zhì)的小程序源代碼，多寫(xiě)多練熟能生巧?？隙ㄟ€有很多優(yōu)質(zhì)的開(kāi)源代碼、工具等資源沒(méi)有提及，歡迎補(bǔ)充！