小程序開發及其開源生態、應用案例分析

朱悅星，陳 愷，郭友達，顧永豪

（北京師范大學珠海分校 信息技術學院，廣東 珠海 519000）

1 小程序開發

小程序的官方文檔已經提供了不少開發相關的文檔以及工具，比如wxml語法規范、提供的內置API、微信Web開發工具等[1]。

1.1 小程序與原生APP的區別與比較

小程序最大的特點就是不需要下載安裝即可使用，因為是小程序時基于微信的；而移動APP需要進行下載并安裝；這便是兩者最根本的區別。

小程序與移動APP同樣可以進行的操作有：HTTP請求、上傳/下載文件、WebSocket、圖片、錄音、音頻、視頻、實時音視頻（直播）、操作本地文件、數據緩存、調用系統設備、多線程等。

由于小程序是基于微信的，所以微信獲得了多少設備權限，小程序才能通過開放接口調用這些權限。比如小程序無法調整系統音量、無法調用計步器，都是由于微信沒有為小程序開放接口。同樣的，如果微信后臺程序被關閉，小程序推送的信息也將無法接受，例如肯德基訂餐小程序推送取餐號信息時，用戶將無法收到信息。

而開發小程序最大的好處在于可以輕松地調用微信的開放接口，比如獲取微信用戶信息、微信支付、向用戶推送消息等，比如想要調用微信支付接口，只需要一句wx.requestPayment即可彈出支付窗口，十分方便。

在與后臺服務端交互上也有一個區別，小程序為了安全，只允許訪問通過ICP備案的域名，并且必須是HTTPS協議，也就說使用IP和HTTP協議則會被小程序攔截，不允許進行請求[2]。

1.2 小程序與PWA的區別與比較

微信小程序與漸進式WebApp（Progressive Web App，PWA）作為近幾年移動端及前端關注較高的兩項技術，兩者同樣是Web技術的延伸。小程序在開發自己的規范使其與Html5擁有同樣的功能的同時，也配合微信實現了推送信息等功能；PWA是在原來的Html5的基礎上，依靠ServiceWorker實現了推送通知等功能，兩者在功能上十分相似，同樣都可以離線打開、本地緩存、桌面快捷訪問，兩者的目標也同樣是讓WebApp具有與原生APP相近的體驗。

小程序是基于微信的，所以小程序的運行環境就是微信本身，所有安裝了微信的用戶才能使用小程序，在國內，微信的裝機量非常可觀，所以小程序在國內是基本沒有運行環境的阻礙的；而PWA需要瀏覽器支持ServiceWorker，而目前只有部分瀏覽器支持了ServiceWorker，比如Google的Chrome，也就說如果瀏覽器不支持，則用戶將無法享受到推送通知等功能，但是仍然可以作為一個網頁進行使用。

小程序向微信用戶推送的限制很多，首先需要在小程序的后臺管理配置好模板消息，然后用戶通過表單提交后將form_id傳回服務端，最后服務端將消息模板填好再推送給用戶，也就是說用戶必須有過表單提交，服務端才能推送消息，并且消息內容不能超出定義好的模板；PWA沒有這種限制，因為ServiceWorker是一個后臺進程，即使在用戶關閉了網頁后也可以實現推送消息，與原生APP功能相近[3]。

小程序的搜索生態是封閉的，其只能通過掃碼、微信搜索、公眾號關聯、推薦、應用商城這幾種方式進入小程序；而PWA與Html5一樣，只要做好了搜索引擎優化（Search Engine Optimization，SEO），就能被搜索引擎收錄。

表1 小程序與PWA的區別與比較

1.3 小程序開發與Html5開發的區別

小程序使用的是wxml+wxss+js，要注意的是小程序與Html5并不完全等價，其中官方文檔說明了wxml與html的區別。

（1）標簽不一樣：小程序的wxml有與html作用相似的標簽，比如view對應div等，但是wxml有不少獨特的標簽，比如picker滾動選擇器，小程序將一些常用組件使用定義的標簽包裝起來，提高開發人員的開發效率，這種方式也能減少不同小程序之間的設計風格的差別。

（2）多了一些wx:if這樣的屬性以及{{}}這樣的表達式：這些寫法與Vue的寫法比較相似，wx:if是條件渲染，{{}}是數據綁定，都是MVVM的開發思想下的產物，避免了通過js直接操控DOM的行為。

（3）有模板與自定義組件：與React、Vue等使用Virtual dom思想一樣，提供組件化開發的思想進行開發，減少重復代碼的出現，也就是說小程序原生支持組件化開發。

（4）wxml中不包含＜head>標簽，也就是說在wxml中是直接編寫＜body>中的內容，其影響就是不能在wxml中編寫js以及wxss，也使得wxml，wxss和js三者分工十分明確，不能混寫[4]。

官方文檔還說明了wxss與css的區別。

（1）新的尺寸單位rpx：在css開發中，有時會使用尺寸單位px去規定元素的大小，但是手機設備的屏幕會有不同的寬度和設備像素比，所以會需要去做許多自適應的工作，而在wxss中支持rpx這一尺寸單位，小程序底層會自行使用rpx去進行換算，減少了部分自適應的工作。

（2）提供了全局的樣式和局部樣式：Html開發時有兩種作用方式：外聯、內聯，外聯的方式是通過應用.css文件，或者在＜head>中編寫＜style>，內聯則是直接在元素中編寫style屬性；wxss則可以通過@import導入外部樣式，并且同樣可以在元素中編寫style屬性，還有全局樣式—作用到全部頁面，局部樣式—作用到單個頁面，這些樣式不需要引用等操作，按照命名規范創建對應的文件即可。

1.4 小程序開發模式

一個前端工程起手，首先要敲定開發模式，就像Html5一樣，使用JQuery和Vue開發起來，體驗、思想完全不同。目前小程序的主流開發模式有3種：原生，wepy，mpvue。

1.4.1 原生

原生的開發已經在上文指出，使用MVVM的思想，將邏輯與渲染分開，而且wxml，wxss，js三者分工十分明確，是關注點分離的思想體現，將小程序頁面劃分成了3個松散耦合的文件：wxml負責頁面結構，wxss負責頁面樣式，js負責頁面邏輯。

在這種開發標準影響下，原來的Html5開發人員需要重新學習其規范等，并且在開發時需要頻繁地切換3個文件。

1.4.2 wepy

wepy是騰訊開發的類Vue框架，作用于小程序開發，并且支持將框架下開發的代碼轉換為原生小程序可以識別的代碼。wepy借鑒了Vue的語法風格和功能特性，并且借鑒了Vue中單文件組件的思想。

Vue中的單文件組件是以＜template>-＜script>-＜style>這種方式將一個頁面的邏輯、樣式整合在一個.vue文件中，但是在開發過程中，組件中的邏輯、樣式往往是內部耦合的，這種方式會使工程更加內聚且更可維護。在wepy中，.wpy文件有與.vue文件同樣的功能和目的。

1.4.3 mpvue

mpvue是美團開發的vue—小程序開發框架，支持將vue的代碼轉換為原生小程序可以識別的代碼，也就是說可以將html+js+css轉換為wxml+js+wxss。

mpvue無縫繼承了vue的基礎能力，也做了一些對vue的修改，以適應小程序的獨特加載邏輯。并且提供了一套htmlwxml的轉換方案，提高了移動H5端以及小程序端的代碼復用率。

1.4.4 比較

wepy與mpvue都是為了vue開發人員可以盡快上手小程序開發的框架。原生小程序的開發需要全新學習，上手成本較高，所以騰訊與美團才開發了各自的框架以提高開發人員的開發效率。

同樣的，wepy和mpvue都支持npm導入第三方庫，也有各自的腳手架（CLI工具）去更快地構建一個項目。最主要的區別在于wepy是基于原生小程序規范（wxml）進行開發，而mpvue是基于Html規范進行開發，所以mpvue在進行htmlwxml的轉換時可能會出現錯誤，而wepy沒有這個風險[5]。

在進行代碼復用的角度上，由于mpvue本來就是基于Html規范進行開發，所以使用mpvue可以幾乎無損地維護其移動H5端，而使用wepy則需要將wxml轉換為html；但是兩者在開發時都不需要特意去維護其樣式文件，因為兩者都是使用CSS擴展語言—Sass/Less作為樣式規范，所以小程序端與手機H5端可以直接共用一套樣式文件。

2 小程序開源生態

小程序在一年多的時間，已經發展了可觀的開源生態，從開發模式、UI框架、組件框架等都有上千star的項目。

截至2018年5月31號，在Github上以小程序、weapp作為關鍵詞進行搜索，可以搜到24個star>1 000的倉庫，209個star>100的倉庫。其中前5名如表2所示。

表2 前5名倉庫名

可以看出開發框架是最受開源社區關注，騰訊的wepy以及美團的mpvue的star數均超過10K，而有贊的ZanUI則有4.9K的star。由于開發框架作為影響開發模式的最大要素，選定一個框架進行開發則代表項目會在框架的約束下進行開發，那么wepy與mpvue必定是有高于原生小程序開發的效率與體驗，才會使用大多數開發人員選擇這兩個框架[6]。

小程序開源項目類型及數量如圖1所示。

圖1 小程序開源項目類型及數量

而在開發框架之后，騰訊的WeUI與有贊的ZanUI同樣有5K左右的star數，兩者均是在擁有了css版本后再推出的wxss版本。WeUI整體的風格與微信APP風格整體相近，使用WeUI開發可以使小程序具有與微信相近的使用體驗；而ZanUI則是有贊的有贊微商城開源的UI庫，組件風格基本與微信相近，也有一部分專門為商城打造的組件。

star>100的項目基本可以分為：UI庫/組件、開發框架、功能類組件、開發工具、相關demo、項目實例，由于demo、項目實例只能供開發人員進行參考，所以下文不對其進行分析，UI庫/組件、開發框架、功能類組件、開發工具的數量與前3名如表3所示。

表3 UI庫/組件、開發框架、功能類組件、開發工具的數量與前3名

可以看出，開發工具的數量最高，其中大部分工具是小程序前后端的整體解決方案的搭建工具，這也是因為目前國內對小程序的需求日漸增大，快速構建一個小程序成品可以提高企業、團隊、個人的收益，所以有不少快速開發工具被開發并使用。

而UI庫/組件與功能類組件也有很多開源項目，這些松耦合的UI組件基本是即開即用，可以減少開發人員的UI開發成本，使開發人員可以把更多的精力放在業務上。

開發框架數量最少，其原因大致有以下幾點。

（1）目前已有較為成熟的開源框架：不管是騰訊的wepy還是美團于今年開源的mpvue都是十分可靠的解決方案。

（2）開發成本/難度較高：開發框架的開發人員需要確切地了解其開發框架的目的，了解小程序的規范/運作原理，做到整體或局部通用，所以開發框架一般是互聯網企業專門開設一個部門或小組進行研究，優先配合企業的內部需求進行開發，比如美團是為了減少小程序與移動H5端的維護成本而開發出了mpvue。而其他中小企業、非互聯網企業如果不看重小程序對其產品的發展，則會更傾向于直接使用開源的開發框架進行開發。

3 小程序應用案例分析

和普通APP一樣，小程序同樣擁有“應用商城”，所以同樣地可以從應用商城中得知哪些應用、哪些應用類型是熱門的，從91ud應用商城可以找到12 000多的小程序應用，其中熱門榜前5名如表4所示。

可以看到人們更喜歡使用旅游出行類、電商購物類、實用工具類這3類的小程序應用，其中前3名均為互聯網企業開發，其中摩拜單車將小程序作為主要入口，而京東購物、去哪兒則是在普通APP上線幾年后，按照普通APP功能點進行再次開發的小程序。

表4 熱門榜前5名小程序

小程序由于其“掃掃即用”的特性，使其在共享單車的應用場景上有著巨大的潛力，因為共享單車的特點也是掃碼即用，所以小程序可以完全切合共享單車的特點。這也是摩拜單車將微信掃一掃作為小程序入口的原因。

居家生活類、電商購物類、實用工具類的應用占比較多，其中前3名如表5所示。

表5 居家生活類、電商購物類、實用工具類前3名

3個應用分類中，電商購物類熱門榜前3名的應用均為互聯網企業開發，從這點看出互聯網企業更加看重小程序在電商購物方面的市場。

目前小程序在電商領域的發展是最為快速的，除了排名前3的京東、當當、騰訊優品以外，有贊推出其微商城的小程序版本并開源了其UI庫ZanUI，美麗聯合集團旗下的蘑菇街也推出了小程序版本并開源了其UI庫minui，以電商為主的互聯網企業正在搶占小程序的市場。這也表明電商、微商是被目前互聯網行業肯定的小程序應用場景。

小程序應用案例類型及數量如圖2所示。

4 結語

小程序在這一年多時間里數量日漸增加，其開源生態也十分活躍；相應的，許多互聯網企業也將小程序作為其移動端產品的一部分，特別是在電商、共享單車這兩個領域，被互聯網企業逐步認可為小程序的最佳應用場景，所以小程序的未來發展前景是十分可觀的。

圖2 小程序應用案例類型及數量