一個微信小程序需要經過產品功能構思、模塊劃分、原型設計、UI設計、前端開發、后端開發、接口聯調、測試上線等開發階段，最終推向市場，進入用戶的視野。在開發之前，你需要有對整個開發階段的全局認識，清楚在各階段的工作重點。此外，你還需要借助現成的一些優質工具或代碼等資源，高效快速開發出小程序，實現你的創意。本文不會手把手教你編寫代碼，主要講述在整個產品開發階段中，前后端開發的一些要點。旨在提供一些能讓你事半功倍、快速開發小程序的相關資源和開發心得！

0.準備工作：

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

1.前端開發

1.根據你構思的產品的相關功能，采用「百度腦圖」來規范化產品的功能模塊

去粗取精，將與產品功能相關的想法進行梳理

產生一個產品idea后，我的一般做法是盡快記錄到備忘錄，隨后圍繞這個產品的功能、市場、特色、使用流程等其它想法也不斷補充到備忘錄上，這樣隨著記錄越多，產品也變得越來越復雜，這個時候，采用腦圖工具，借鑒一般app的設計，對備忘錄上的功能和流程方面的記錄重新梳理，確定整個產品的模塊劃分及各個模塊下的小功能，剝離出相同的功能。如下圖，這是早期小打卡的功能模塊劃分。只保留了我認為比不可少的功能，產品的第一屏我準備放置四個平級的主頁面，每個主頁面又包含相應的次級頁面和功能。

2.根據完成的【功能模塊設計】，采用「墨刀」在線設計完成產品的原型圖

借助簡單的原型設計工具，在編碼之前，以較低的成本將創意可視化

這一步的工作，其實需要你簡單了解一下現在小程序開發中可用到的ui組件，在小程序官方文檔的組件這部分內容中，詳細介紹了小程序提供的視圖容器、表單、媒體、導航等組件，在開發之前，你至少要弄明白這些組件長啥樣子，初期保證功能優先，在設計你的小程序時，先別瞎折騰華麗的界面，應該盡量參考官方已有的組件來設計你的產品，這樣可以先跳過UI設計這個階段，并且在編寫前端代碼的階段，你可以復用官方提供的組件和代碼，至多只需對官方組件進行稍微改動。從而可以事半功倍地進行開發。此外這些所謂的ui組件應用很廣泛，在各類app上基本都能見到。在墨刀這個在線原型設計網站上，你可以拖拽式地設計你的小程序界面。

3.使用「白鷺Egret Wing」和「微信官方IDE」編寫前端代碼

使用兩個工具搭配，更高效地開發

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

4. 仔細查閱「官方接口組件文檔」弄懂小程序的提供相關組件和API

對比小程序的能力，仔細的分析你的產品，思考怎么組織小程序的組件和API去實現你的功能和頁面

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

5.結合「weui-wxss」和「官方Demo」的相關代碼，來編寫產品的前端界面的代碼

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

搭建產品界面不得不提weui-wxss這個官方開源的樣式庫，他封裝了很多實用的組件，比如圖片上傳、消息提示、日期選擇、tab選項卡等組件，你只需要復制相應的wxml和wxss代碼到你的項目中對應的文件里面即可。這也是一開始讓你盡量參考微信已有組件來設計原型圖的原因。這樣做還有個好處，就是能讓界面風格和微信盡量統一，保持一致。另外，官方Deom代碼包含了官方組件和API的在小程序的中具體使用的代碼，值得開發者借鑒使用。

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

2.后端開發

1.根據【已完成的前端界面和邏輯】，采用「ShowDoc」在線完成api接口文檔

小程序通過邏輯page.js中設置數據的改變，帶來界面相應的變化，需要和服務器端程序約定好數據交互的格式

完成前端的界面以后，你可能寫了一堆假界面，或者說是靜態的界面。在微信小程序中，我們改變邏輯層的page.js文件中定義data對象下某個屬性的值，則引起視圖page.wxml文件中的該屬性值自動變為改變后的值。簡而言之，如果需要改變界面上的內容，比如不同的用戶顯示不同的昵稱，我們只需要在page.js這樣定義data對象數據：
data: {nickName: '某某'}
在page.xml中使用這個數據：
<view> {{nickName}}</view>
在通過網絡請求后可以通過setData()函數來改變數據：
this.setData({nickName: '小打卡'})
執行這個函數操作后，你所看到的界面內容也隨之改變。
因此，在寫后端代碼之前，我們可以先捋一捋各個頁面或者功能需要發生變化的數據，并且該數據需要從服務器獲取，我們通過撰寫接口文檔，讓前后端遵循這個規定進行數據交互。下圖是我的小打卡小程序的接口示例：

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

//page.js
Page({
  data:{
    habitList: [],
  },
  onLoad:function(){//頁面初始化時，發送網絡請求
    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) {//成功獲取返回的數據
        if(res.data.code == '2000'){
         let habitList = res.data.data.habitList;
         if(habitList.length){
           that.setData({//更新data數據中的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文檔規范約定小程序中某一個頁面或操作所需發送的數據以及從服務端返回的數據格式，這對于獨立開發或團隊協作開發都大有裨益。這樣的文檔編寫工具可以采用在線的網站，也可以自行編寫word，目的都是約定好前后端數據輸入輸出，當然也有比我提到的ShowDoc更強大好用的工具。在開發過程中，還需根據你的實際情況，補充完善API接口文檔，因為有些并不是所有數據都會在視圖層顯示，還有與你的邏輯相關的數據，也需要在接口文檔中去考慮定義好，這個階段的工作直接回影響到你下個階段數據表的設計相關高總。所以在設計數據表之前，盡量把你的小程序的各種操作的邏輯代碼寫好，整理出你需要服務器端提供的各項數據。

2.根據【API接口文檔】和【前端小程序代碼】，設計所需的數據表

數據庫設計請參考相應的設計規范，一言難盡啊~~~~

3.根據【API接口文檔】和【數據表】，閱讀「wafer自行部署方案」，采用「小程序后端套件wafer」中的會話服務和CI框架，確定后端的控制器、數據模型劃分，編寫后端代碼

wafer是騰訊云開源小程序后端PHP套件，部署后可以輕松使用會話服務和信道服務

授權登陸、獲取用戶身份信息這些功能雖然官方文檔有提及，但是沒有給出具體的后端實現代碼，所以騰訊云的wafer套件剛好滿足了需求，后端可以直接部署使用，但是部署還是有點兒麻煩，更簡單點你可以購買配套這個服務的騰訊云服務器。若自行部署可以參考我的部署心得，部署后，其他具體的接口代碼你需要結合設計好的數據表進行編寫、調試。

后端代碼編寫后可以聯調數據，記得完成前端小程序的http請求、數據渲染及其他邏輯。對產品的相關功能和邏輯的進行測試，修復相關BUG后再上線產品。

開發小程序的過程中難免踩坑，多研究小程序官方文檔，多研究小程序官方文檔，多研究小程序官方文檔，多搜索相關的開發知識，多閱讀優質的小程序源代碼，多寫多練熟能生巧。肯定還有很多優質的開源代碼、工具等資源沒有提及，歡迎補充！