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

（北京師范大學(xué)珠海分校 信息技術(shù)學(xué)院，廣東 珠海 519000）

1 小程序開發(fā)

小程序的官方文檔已經(jīng)提供了不少開發(fā)相關(guān)的文檔以及工具，比如wxml語法規(guī)范、提供的內(nèi)置API、微信Web開發(fā)工具等[1]。

1.1 小程序與原生APP的區(qū)別與比較

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

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

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

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

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

1.2 小程序與PWA的區(qū)別與比較

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

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

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

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

表1 小程序與PWA的區(qū)別與比較

1.3 小程序開發(fā)與Html5開發(fā)的區(qū)別

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

（1）標簽不一樣：小程序的wxml有與html作用相似的標簽，比如view對應(yīng)div等，但是wxml有不少獨特的標簽，比如picker滾動選擇器，小程序?qū)⒁恍┏Ｓ媒M件使用定義的標簽包裝起來，提高開發(fā)人員的開發(fā)效率，這種方式也能減少不同小程序之間的設(shè)計風(fēng)格的差別。

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

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

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

官方文檔還說明了wxss與css的區(qū)別。

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

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

1.4 小程序開發(fā)模式

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

1.4.1 原生

原生的開發(fā)已經(jīng)在上文指出，使用MVVM的思想，將邏輯與渲染分開，而且wxml，wxss，js三者分工十分明確，是關(guān)注點分離的思想體現(xiàn)，將小程序頁面劃分成了3個松散耦合的文件：wxml負責(zé)頁面結(jié)構(gòu)，wxss負責(zé)頁面樣式，js負責(zé)頁面邏輯。

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

1.4.2 wepy

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

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

1.4.3 mpvue

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

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

1.4.4 比較

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

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

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

2 小程序開源生態(tài)

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

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

表2 前5名倉庫名

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

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

圖1 小程序開源項目類型及數(shù)量

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

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

表3 UI庫/組件、開發(fā)框架、功能類組件、開發(fā)工具的數(shù)量與前3名

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

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

開發(fā)框架數(shù)量最少，其原因大致有以下幾點。

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

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

3 小程序應(yīng)用案例分析

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

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

表4 熱門榜前5名小程序

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

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

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

3個應(yīng)用分類中，電商購物類熱門榜前3名的應(yīng)用均為互聯(lián)網(wǎng)企業(yè)開發(fā)，從這點看出互聯(lián)網(wǎng)企業(yè)更加看重小程序在電商購物方面的市場。

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

小程序應(yīng)用案例類型及數(shù)量如圖2所示。

4 結(jié)語

小程序在這一年多時間里數(shù)量日漸增加，其開源生態(tài)也十分活躍；相應(yīng)的，許多互聯(lián)網(wǎng)企業(yè)也將小程序作為其移動端產(chǎn)品的一部分，特別是在電商、共享單車這兩個領(lǐng)域，被互聯(lián)網(wǎng)企業(yè)逐步認可為小程序的最佳應(yīng)用場景，所以小程序的未來發(fā)展前景是十分可觀的。

圖2 小程序應(yīng)用案例類型及數(shù)量