騰訊推出微信小程序也有一段時間了，在各種行業裏面也都掀起一陣陣的熱潮，很多APP應用被簡化為小程序的功能迅速推出，同時也根據小程序的特性推出各種獨具匠心的應用，相對傳統的APP來說，微信小程序確實能夠大大降低開發成本和難度，但也意味著需要掌握整個微信小程序的各種接口功能、應用場景等相關技術點，本篇隨筆先從大的方面來介紹微信小程序開發的一些知識，如架構設計、技術路線 、工具準備等方面做一些淺薄的介紹，希望大家也有所收益，有所借鑒，則善莫大焉。

1、小程序的統一架構設計

在我們開發各種應用的時候，總是希望能夠先從大的方向上探索整個業務場景，盡可能的不用造成後期的返工或者推倒重來，這種代價是非常高昂的，因此前期花些時間來做一下整體的規劃，然後在具體化各個業務模塊的開發才是比較合理的做法。

業務數據的集中化，是很多企業的在數據化浪潮中賴以生存的核心，各行各業都有自己的業務數據，有些企業掌握著重要的行業數據，一旦數據成了規模，就可以對外提供接口，實現數據業務的營收，也是一項非常不錯的收入，同時也是企業的核心競爭力。

不管數據是部署在阿裏雲、騰訊雲等雲產品上，還是部署在自家的服務器上，都是數據集中化的表現之一，圍繞著數據集中化，那麽各種應用就有一個統一的API接口的需求，這種統一API可以稱為統一平臺，也可以稱為統一接口，都有不同的稱呼。

隨著基於JSON格式的Web API的廣泛應用，越來越多的企業采用Web API接口服務層，作為統一接口的核心所在，也成為Web API核心層。基於JSON格式的接口，可以廣泛地、跨平臺的應用於IOS、安卓等移動端，也可以應用在常規的Web業務系統，Winform業務系統、微信應用、微信小程序等方方面面，因此企業內部形成自己是的一套Web API標準和詳細的文檔非常重要，一旦完善了，就可以供各個業務場景使用，這些業務可以外包給其他軟件公司或者團隊，各自分離開發，而自己內部則只需要花費精力來統一維護Web API核心層和提高整個核心層的功能接口穩定、緩存處理等方面事情即可。其他業務團隊開發的系統只需要遵循整個大接口平臺的統一規劃，完成各自的功能需求即可，不會造成數據庫的不一致，更不會讓某家公司掌握核心的技術資源，尾大不掉的尷尬情形。

基於上面的分析，我們企業最終圍繞著Web API核心層做了不同的業務應用，如下圖所示。

基於Web API核心層的性能考慮，我們一般它們分開處理，一般後端有一個數據庫應用服務器，一個Web API服務器，甚至可能還有一個專門處理FTP文件的文件服務器（可選），如果還需要建立Web後臺應用，可能還需要一個或者多個Web 應用服務器，從而分散服務器的IO壓力和計算壓力，如果還需要考慮更加周全一些，還需要一個MQ服務器處理重要訂單數據、緩存服務器存儲緩存數據、負載均衡服務器等等。

最簡化的要求，至少有一個雲端數據庫服務器和一個Web API服務器，這些服務器群構成一個Web API一體化應用的場景，如下所示。

考慮到Web API的分層，我們可以通過下圖來了解具體的分層結構，從而為我們實際的開發做一些鋪墊。

2、小程序的開發環境準備

微信小程序的開發準備，我們首先需要在官網上註冊賬號，然後綁定自己的認證的賬號即可，這些我可以參考https://mp.weixin.qq.com/debug/wxadoc/dev/ 進行了解即可 ，不在贅述。

同時裏面的文檔包括了小程序開發的UI規範、架構說明、組件及API的接口說明等內容，建議詳細閱讀。

我們開發小程序，很多情況下需要利用微信開發者工具（開發者工具 ），工具集成了開發調試、代碼編輯及程序發布等功能。啟動工具時，開發者需要使用已在後臺綁定成功的微信號掃描二維碼登錄，後續所有的操作都會基於這個微信帳號。

不過，為了更好提高開發工具，我們建議代碼編輯還是利用比較專業化的前端開發工具較好，結合上面微信開發者工具進行編譯出來即可，推薦的前端開發工具還是老牌的Sublime Text較好，界面效果如下所示。

這個工具可以在我的網盤下載：http://pan.baidu.com/s/1slflTt7，或者也可以百度獲取對應最新的版本下載即可。

默認來說，這個工具並不能識別小程序自定義的後綴名，因此我們需要打開對應的wxml，wxss這些文件，我們關聯下即可，畢竟這兩個文件分別是HTML、CSS3格式的文件。

具體設置操作如下，先打開wxml，wxss這些文件，然後從右下角單擊PlainText位置，從彈出列表裏面選擇正確的格式。

從彈出列表裏面首先選擇Open all with current extensioin as ***這個菜單，然後選擇對應的HTML，或者CSS3格式即可完成後綴名的設置，下次打開會自動關聯正確格式的後綴名了。

上面的操作只是設置了文件的格式，對於微信小程序自定義的標簽，以及一些特有的JS操作，還是需要費一些工作，好在已經有好心人為我們專門做了小程序的Sublime Text插件。

微信小程序的snippets（sublime通過 “Sublime-snippet” 實現快速補全代碼），插件下載的鏈接：https://github.com/Abbotton/weapp-snippet-for-sublime-text-2-3

下載上方鏈接提供的snippet

將紅色文件夾直接放入sublime的安裝目錄 PackagesUser 下，重啟sublime即可。

同時，JS的模塊也是一樣的處理，可以快速錄入代碼段。

輸入apirequest即可獲得快速錄入的代碼段，如下所示。

整個snippet的列表包含下面幾個部分，分別使用w開始或者api開始，避免沖突。

snippet 列表

為了防止和其他 snippet 沖突,本 snippet 中的所有WXML 標簽觸發命令都以‘w‘開頭,所有 API相關命令都以‘api‘開頭.

WXML snippet

小程序API snippet

3、小程序的Https協議的SSL證書

我們知道小程序為了提高安全性，做了很多方面的限制，其中有一條就是要求使用HTTPS這種安全性協議來獲取數據，如下所示。

因此要求我們的Web API接口必須統一使用HTTPS（其實這也是常規的做法），這就要求我們必須在網站提供443端口服務，需要加入HTTPS證書，這種證書可以從雲服務商上購買，如騰訊雲、阿裏雲上的雲服務器後臺都提供了購買證書服務的通道，當然HTTPS證書年費可不算便宜，但我們也可以使用簡單的免費證書先用著。

以阿裏雲為例，使用阿裏雲賬號登陸後，在【控制臺】【安全雲盾】【證書服務】裏面進行申請。

然後選擇購買證書，在購買證書界面上，選擇免費的證書，錄入相關的資料後提交即可。

購買後，會在訂單列表裏面有一個待審核的訂單，如下所示，等待審核通過即可使用。

有了這些準備，我們就可以在服務器上綁定對應的端口，提供HTTPS協議的接口訪問了。

剩下的事情就是關註我們Web API核心接口上的事情，這個方面可以在另外一個主題上進行介紹。

基於微信小程序的系統開發準備工作