騰訊推出微信小程式也有一段時間了，在各種行業裡面也都掀起一陣陣的熱潮，很多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較好，介面效果如下所示。

這個工具可以在百度搜索獲取對應最新的版本下載即可。

預設來說，這個工具並不能識別小程式自定義的字尾名，因此我們需要開啟對應的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核心介面上的事情，這個方面可以在另外一個主題上進行介紹。