咱們的微信小程序開發

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

騰訊推出微信小程序也有一段時間了，在各類行業裏面也都掀起一陣陣的熱潮，不少APP應用被簡化爲小程序的功能迅速推出，同時也根據小程序的特性推出各類獨具匠心的應用，相對傳統的APP來講，微信小程序確實可以大大下降開發成本和難度，但也意味着須要掌握整個微信小程序的各類接口功能、應用場景等相關技術點，本篇隨筆先從大的方面來介紹微信小程序開發的一些知識，如架構設計、技術路線 、工具準備等方面作一些淺薄的介紹，但願你們也有所收益，有所借鑑，則善莫大焉。

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

在咱們開發各類應用的時候，老是但願可以先從大的方向上探索整個業務場景，儘量的不用形成後期的返工或者推倒重來，這種代價是很是高昂的，所以前期花些時間來作一下總體的規劃，而後在具體化各個業務模塊的開發纔是比較合理的作法。

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

無論數據是部署在阿里雲、騰訊雲等雲產品上，仍是部署在自家的服務器上，都是數據集中化的表現之一，圍繞着數據集中化，那麼各類應用就有一個統一的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的分層，咱們能夠經過下圖來了解具體的分層結構，從而爲咱們實際的開發作一些鋪墊。

 

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

 微信小程序的開發準備，咱們首先須要在官網上註冊帳號，而後綁定本身的認證的帳號便可，這些我能夠參考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

命令	對應組件或命令
wapp	註冊小程序
wblockif	block wx:if
wbutton	button
wcheckbox	checkbox
wcheckboxgroup	checkbox-group
wactionsheet	action-sheet
wcanvas	canvas
wimage	image
wtext	text
wview	view
wviewbind	view 事件
wmap	map
wmodal	modal
wnavigator	navigator
wexport	模塊化
wfor	for
wform	form
wradio	radio
wradiogroup	radio-group
wslider	slider
wicon	icon
winput	input
wtextarea	textarea
winfutautofocus	input
wtoast	toast
wvideo	video
winputfocus	input
wlabel	label
wloading	loading
wpage	Page()
wprogress	progress
wscrollview	scroll-view
wswitch	switch
wtemplate	template
wswiper	swiper
wviewelif	view
wviewelse	view
wviewif	view

小程序API snippet

命令	對應組件或命令
apirequest	網絡請求
apiuploadfile	上傳文件
apidownloadfile	下載文件
apiconnskt	建立 WebSocket 連接
apionsktopen	監聽WebSocket鏈接打開
apionskterr	監聽WebSocket錯誤
apisendsktmsg	使用 WebSocket發送數據
apionsktmsg	接受消息推送
apicloseskt	關閉WebSocket鏈接
apionsktclose	監聽WebSocket關閉
apichooseimg	選額圖片
apipreviewimg	預覽圖片
apigetimginfo	獲取圖片信息
apistartrecord	開始錄音
apistoprecord	結束錄音
apiplayvoice	播放語音
apipausevoice	暫停播放語音
apistopvoice	結束播放語音
apigetbgaudioplayerstate	獲取音樂播放狀態
apiplaybgaudio	播放音樂
apipausebgaudio	播放暫停音樂
apiseekbgaudio	控制音樂播放進度
apistopbgaudio	中止播放音樂
apionbgaudioplay	監聽音樂播放
apionbgaudiopause	監聽音樂暫停
apionbgaudiostop	監聽音樂中止
apisavefile	保存文件
apigetsavedfilelist	查看保存文件列表
apigetsavedfileinfo	查看保存文件信息
apirmfile	刪除緩存文件
apiopendoc	新開頁面打開文檔
apichoosevideo	視頻
apisetstorage	覆蓋本地內容
apisetstoragesync	同步覆蓋本地內容
apigetstorage	獲取指定 key 對應的內容
apigetstoragesync	同步獲取指定 key 對應的內容
apiclearstorage	清理本地數據
apiclearstoragesync	同步清理本地數據
apirmstorage	刪除本地數據
apirmstoragesync	同步刪除本地數據
apigetstorageinfo	獲取本地數據信息
apigetstorageinfosync	同步獲取本地數據信息
apigetlocation	獲取位置
apiopenlocation	查看位置
apichooselocation	打開地圖選擇位置
apigetnetworktype	網絡狀態
apigetsysinfo	系統消息
apiaccelerometerchange	重力感應
apicompasschange	羅盤
apisetnavbartitle	動態設置導航條文字
apishownavbarloading	顯示導航條加載動畫
apihidenavbarloading	隱藏導航條加載動畫
apihidekeyboard	收起鍵盤
apinavigateto	保留當前頁面並跳轉
apiredirectto	關閉當前頁面並跳轉
apinavigateback	返回上一個頁面
apilogin	登陸
apichecksession	檢測session
apigetuserinfo	用戶信息
apipayment	微信支付
apishowtoast	交互反饋
apihidetoast	交互反饋
apishowmodal	交互反饋
apihidemodal	交互反饋
apishowactionsheet	交互反饋
getSystemInfoSync	同步獲取系統信息
apiphonecall	撥打電話

 

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

咱們知道小程序爲了提升安全性，作了不少方面的限制，其中有一條就是要求使用HTTPS這種安全性協議來獲取數據，以下所示。

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

以阿里云爲例，使用阿里雲帳號登錄後，在【控制檯】【安全雲盾】【證書服務】裏面進行申請。

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

購買後，會在訂單列表裏面有一個待審覈的訂單，以下所示，等待審覈經過便可使用。

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

 剩下的事情就是關注咱們Web API核心接口上的事情，這個方面能夠在另一個主題上進行介紹。

主要研究技術：代碼生成工具、會員管理系統、客戶關係管理軟件、病人資料管理軟件、Visio二次開發、酒店管理系統、倉庫管理系統等共享軟件開發
專一於Winform開發框架/混合式開發框架、Web開發框架、Bootstrap開發框架、微信門戶開發框架的研究及應用。
  轉載請註明出處：
撰寫人：伍華聰  http://www.iqidi.com 
    

 

 

標籤:  微信小程序