微信小程序開發(fā)研究

武思怡 解佺 張雨 侯秉昀

摘要：文章從開發(fā)者的角度對(duì)小程序開發(fā)過程進(jìn)行了簡單說明，從環(huán)境與框架、組件、API等方面進(jìn)行了比較全面的分析，介紹了小程序開發(fā)中的幾個(gè)關(guān)鍵點(diǎn)，并對(duì)小程序的生存現(xiàn)狀和未來發(fā)展趨勢進(jìn)行了分析。

關(guān)鍵詞：微信小程序；框架；API

微信官方給出的小程序的解釋是：“小程序是不需要下載安裝便可以使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用觸手可及的夢想，用戶掃一掃或搜一下即可打開應(yīng)用，也體現(xiàn)了用完即走的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問題，應(yīng)用將無處不在，隨時(shí)可用，但又無需安裝卸載。” [1]微信小程序自2017年1月9日正式上線以來，就引起廣泛關(guān)注。微信團(tuán)隊(duì)也不停地對(duì)小程序進(jìn)行更新。微信小程序的優(yōu)勢十分明顯，小程序觸及了PC網(wǎng)頁，公眾號(hào)，H5， APP無法觸及的地方，其無需安裝，用完即走的理念能夠滿足用戶需求且節(jié)省手機(jī)內(nèi)存。站在小程序的擁有者的立場，其開發(fā)成本大大減小，同時(shí)可借助微信強(qiáng)大的流量入口，因而也降低了推廣的難度?？偟膩碚f，微信小程序是一種全新的方式，能夠更好地在用戶和服務(wù)中建立連接，并且可以在微信中便捷地獲取和傳播，具有不錯(cuò)的使用體驗(yàn)。

1 小程序開發(fā)前準(zhǔn)備

小程序采用了類似React Native和Weex—樣的解析技術(shù)，開發(fā)者可以編寫一套程序在多種客戶端運(yùn)行，同時(shí)，相比于公眾號(hào)、微商城具有更好的原生體驗(yàn)。全面開放申請(qǐng)以后，作為企業(yè)、政府、媒體、其他組織或者個(gè)人的開發(fā)者，都可以申請(qǐng)并注冊小程序。小程序和微信的訂閱號(hào)、服務(wù)號(hào)以及企業(yè)號(hào)是并行的體系，具有獨(dú)立的注冊以及發(fā)布流程。

1.1 小程序接入流程：

小程序的接入主要有4個(gè)步驟。

（1）小程序注冊：在微信公眾平臺(tái)官網(wǎng)首頁（mp.weixin.qq.com）注冊并提交注冊信息、完善主體信息和管理員信息。

（2）完善小程序信息：完善小程序的基本信息如名稱、頭像及服務(wù)范圍等。開發(fā)前需綁定開發(fā)者并獲取APP ID，以保證程序可以通過手機(jī)進(jìn)行掃碼測試。

（3）開發(fā)小程序：下載安裝微信開發(fā)者工具，微信官方提供了一套完整的開發(fā)框架，開發(fā)者可以根據(jù)微信開發(fā)文檔進(jìn)行小程序的開發(fā)與調(diào)試。

（4）代碼審核及發(fā)布：小程序開發(fā)完成后，不能夠直接發(fā)布，需提交代碼與開發(fā)配置信息提交審核，完成后尚可發(fā)布。

1.2 微信Web開發(fā)者工具

官方公布的微信開發(fā)工具名為微信Web開發(fā)者工具，小程序前端開發(fā)框架是微信官方提供的框架。微信Web開發(fā)工具是一種基于Native System系統(tǒng)層的框架，由于并不是運(yùn)行在瀏覽器中，所以JavaScript在Web中的一些諸如Document，Window等方法均不可使用，以往HTML5在加載的時(shí)候在網(wǎng)絡(luò)環(huán)境會(huì)有所限制，需要逐步加載HTML，CSS，JS，然后返回?cái)?shù)據(jù)，最后渲染頁面展現(xiàn)在瀏覽器中[2]。用戶總是需要等待很久，這樣使得用戶體驗(yàn)感大大降低。相比之下，小程序的兩個(gè)線程：Appservice Thread和ViewThread會(huì)同時(shí)進(jìn)行、并行加載，甚至Appservice Thread會(huì)更早執(zhí)行，當(dāng)視圖線程加載完，通知Appservice，Appservice會(huì)把準(zhǔn)備好的數(shù)據(jù)用setData的方法返回給視圖線程。小程序的這種優(yōu)化策略，可以減少用戶的等待時(shí)間，加快小程序的響應(yīng)速度。

微信Web開發(fā)者工具區(qū)別于H5的開發(fā)工具+瀏覽器Device Mode預(yù)覽的模式，而是基于自己的開發(fā)者工具，可以實(shí)現(xiàn)同步本地文件+開發(fā)調(diào)試+編譯預(yù)覽+ 上傳+發(fā)布等一整套流程。同時(shí)小程序自己開發(fā)了一套WXML標(biāo)簽語言和WXSS樣式語言，并非直接使用標(biāo)準(zhǔn)的HTML5+CSS3。同時(shí)提供了很多原生APP的組件，之前在HTML5中需要模擬才能實(shí)現(xiàn)的功能，在小程序中可以直接調(diào)用組件來實(shí)現(xiàn)。

2 結(jié)構(gòu)及其核心技術(shù)

2.1 框架

2.1.1 小程序的文件結(jié)構(gòu)

使用微信Web開發(fā)工具新建一個(gè)項(xiàng)目，框架會(huì)自動(dòng)生成描述整體程序的APP和多個(gè)描述頁面的page文件。完整的小程序主要組成有：

一個(gè)入口文件：app.js

一個(gè)全局樣式：app.wxss

一個(gè)全局配置：app.json

在頁面pages下將頁面安裝文件夾劃分，每個(gè)頁面存在4個(gè)文件，分別是：

視圖層：wxml文件、wxss文件；

邏輯層：js文件、json文件（頁面配置，不是必須）。

（1）app.js是控制小程序邏輯的腳本文件，app.json是小程序的配置文件，負(fù)責(zé)對(duì)小程序的全局配置。app.wxss是全局樣式表，作用范圍是項(xiàng)目的每一個(gè)頁面。

（2）wxml是一種類似xml格式的語言，具有數(shù)據(jù)綁定、條件渲染、列表渲染、自定義模板、事件回調(diào)和外部引用等功能。page.wxml主要通過使用基礎(chǔ)組件構(gòu)建頁面結(jié)構(gòu)。

wxss和css格式的語言有相同之處，用于描述wxml的組件樣式，page.wxss的優(yōu)先級(jí)比app.json的Window高。同時(shí)，微信為小程序新增了尺寸單位rpx，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，rpx實(shí)際上就是系統(tǒng)級(jí)的rem（把頁面按比例分割750份，lrpx=innerWidth/750）。

pagejson可以對(duì)獨(dú)立定義的頁面進(jìn)行一些屬性的設(shè)置，以滿足實(shí)際需要。config.json可以設(shè)置一些個(gè)性化配置，當(dāng)重新安裝工具或者換一臺(tái)電腦時(shí)，只要導(dǎo)入相同的代碼包，開發(fā)工具就會(huì)自動(dòng)恢復(fù)到開發(fā)這個(gè)項(xiàng)目時(shí)的個(gè)性化設(shè)置。

JS文件主要用于用戶交互、響應(yīng)用戶點(diǎn)擊等。在小程序中，通過JS腳本來響應(yīng)用戶操作。

2.1.2 了解小程序框架

微信小程序的開發(fā)是基于框架的，從軟件設(shè)計(jì)角度來說，框架是一個(gè)可復(fù)用的軟件架構(gòu)解決方案，規(guī)定了應(yīng)用的體系結(jié)構(gòu)，闡明軟件體系結(jié)構(gòu)中各層次間及其層次內(nèi)部各組件間的毅力關(guān)系，責(zé)任分配和控制流程，表現(xiàn)為一組接口、抽象類以及實(shí)例間協(xié)作的方法，是指對(duì)某一指定應(yīng)用領(lǐng)域中的應(yīng)用系統(tǒng)的部分設(shè)計(jì)與實(shí)現(xiàn)子系統(tǒng)的整體結(jié)構(gòu)[3]。

小程序開發(fā)框架的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。分為視圖層（View）和邏輯層（APP Service），小程序開發(fā)工具提供了視圖層描述語言WXML和WXSS，以及基于JavaScript的邏輯層框架，并在視圖層與邏輯層間設(shè)置了數(shù)據(jù)傳輸和事件系統(tǒng)，使得開發(fā)者能夠很簡單地將重心放在數(shù)據(jù)與邏輯上。處理事務(wù)邏輯的地方被稱為邏輯層。在微信小程序中，所有js腳本文件的集合構(gòu)成邏輯層。邏輯層與視圖層相互配合，完成數(shù)據(jù)處理及接收事件反饋?？蚣艿囊晥D層由WXML與WXSS編寫，通過組件進(jìn)行展現(xiàn)。對(duì)于小程序本身，.wxml文件與.wxss文件的集合構(gòu)成了視圖層，邏輯層處理數(shù)據(jù)之后，會(huì)發(fā)送給視圖層用于與用戶的交互，同時(shí)接收用戶對(duì)視圖層的反饋。視圖層以給定的樣式展現(xiàn)數(shù)據(jù)并反饋事件給邏輯層，數(shù)據(jù)展現(xiàn)是通過組件來進(jìn)行的。視圖的基本構(gòu)成是組件。

2.2 相關(guān)組件

微信提供了一系列基本組件，可以通過使用這些基本組件組合形成來進(jìn)行小程序的開發(fā)。這里說明幾個(gè)比較有特點(diǎn)的組件。

（1）類似，是布局中最基本的一個(gè)組件，任何一種復(fù)雜的布局都可以通過嵌套組件來實(shí)現(xiàn)，是一個(gè)塊級(jí)容器組件，默認(rèn)display：block，它是盒模型，在布局過程中一般推薦display：flex 的寫法。

（2）是多行輸入框，與HTML中不同的是，它的值需要賦值給value屬性，而不是被標(biāo)簽包裹，是一個(gè)自閉合標(biāo)簽，css動(dòng)畫對(duì)組件無效。

（3）是頁面鏈接，和HTML中超鏈接標(biāo)簽—樣，主要進(jìn)行頁面跳轉(zhuǎn)控制。鏈接的內(nèi)容可以是一個(gè)字、詞或者一幅圖片，通過點(diǎn)擊內(nèi)容實(shí)現(xiàn)頁面的跳轉(zhuǎn)。

（4）主要用于繪制圖形，其本身是一塊無色透明區(qū)域，并沒有繪制的能力，僅僅是圖形容器，需要調(diào)節(jié)相關(guān)的應(yīng)用程序編程接口（Application Programming Interface，API）來完成實(shí)際的繪圖任務(wù)。

2.3 API及其配置

2.3.1 域名配置

根據(jù)小程序提供的組件，開發(fā)者可以根據(jù)需要設(shè)計(jì)UI界面，然而小程序的一些功能就要依賴框架提供的API來實(shí)現(xiàn)。在使用API時(shí)，首先要對(duì)小程序進(jìn)行服務(wù)器域名的配置，每個(gè)小程序都需要設(shè)定通信的域名，小程序可以跟指定的域名進(jìn)行網(wǎng)絡(luò)通信。目前支持的有HTTPS（request）、上傳文件（uploadFile）、下載文件（downloadFile）和WebSocket 通信。

2.3.2 常用API

（1）wx.request（Object）：實(shí)現(xiàn)小程序與開發(fā)者的服務(wù)器實(shí)現(xiàn)數(shù)據(jù)交互。request方法的作用是發(fā)起HTTPS請(qǐng)求，在小程序中，只能使用HTTPS請(qǐng)求而不能使用HTTP請(qǐng)求，一個(gè)微信小程序同時(shí)只能有5個(gè)網(wǎng)絡(luò)請(qǐng)求連接。

（2）WebSocket：request方法是通過客戶端主動(dòng)向服務(wù)器發(fā)起請(qǐng)求，而服務(wù)器端響應(yīng)返回?cái)?shù)據(jù)來實(shí)現(xiàn)通信的目的。這種方法存在缺點(diǎn)，那就是服務(wù)器不能主動(dòng)向客戶端發(fā)送消息。因此要實(shí)現(xiàn)服務(wù)器和客戶端之間的即時(shí)通信只能采用輪詢的方法，而且request的Header是十分長的，為了傳輸一個(gè)很小的數(shù)據(jù)會(huì)占用很多的寬帶。針對(duì)這種情況，開發(fā)者可以通過小程序提供的WebSocket相關(guān)API創(chuàng)建WebSocket，WebSocket只需要服務(wù)器和瀏覽器通過HTTP協(xié)議進(jìn)行一個(gè)握手的動(dòng)作后單獨(dú)建立一條傳輸控制協(xié)議（TransmissionControl Protocol， TCP）的通信通道就可以進(jìn)行數(shù)據(jù)的傳送，實(shí)現(xiàn)長連接以達(dá)到通信的目的。

3 項(xiàng)目發(fā)布

3.1 發(fā)布流程

項(xiàng)目開發(fā)完成后，管理員需手動(dòng)打包上傳代碼，填寫相關(guān)配置類目并將代碼提交審核，若第一次審核未通過，再次提交審核將開放提供測試的入口，該入口由開發(fā)者提供，用于微信審核人員審核微信小程序時(shí)登錄。審核后手動(dòng)發(fā)布即可。

3.2 上傳原理

管理員手動(dòng)將代碼打包上傳是怎樣實(shí)現(xiàn)的呢？編輯器本身是基于Web技術(shù)體系實(shí)現(xiàn)的。簡單是說就是node+webkit，node提供給我們本地api的能力，而webkit提供給我們Web的能力，兩者結(jié)合之后便可以使用JS+HTML實(shí)現(xiàn)本地應(yīng)用程序。既然有nodejs，那打包選項(xiàng)里的功能就好實(shí)現(xiàn)了。其中ES6轉(zhuǎn)ES5就是引入babel-core的node包，CSS補(bǔ)全是引入postcss和autoprefixer的node包，代碼壓縮則是引入uglifyjs的node包。

4 結(jié)語

微信小程序站在月活躍用戶9億人次的微信的肩膀上，自帶流量趨勢，入口多，功能簡單便捷[4]。小程序功能快速迭代，意味著圍繞小程序的開發(fā)和生態(tài)工具建設(shè)將會(huì)是移動(dòng)互聯(lián)網(wǎng)的一個(gè)巨大機(jī)會(huì)。目前各行業(yè)內(nèi)諸多企業(yè)單位紛紛加入了小程序開發(fā)，開通了小程序功能。雖然前段時(shí)間不少聲音都不看好小程序，但小程序進(jìn)行優(yōu)化后，開放了很多入口，使得開發(fā)者和用戶關(guān)注度不斷提升?？v使一些高頻和復(fù)雜應(yīng)用暫時(shí)無法被小程序取代，但是一些低頻應(yīng)用的主要功能，只要能在小程序上實(shí)現(xiàn)，APP就可以完全卸載了。

總的來說，微信小程序目前發(fā)展空間甚好，至于以后未來的發(fā)展仍舊不能夠準(zhǔn)確預(yù)測。

[參考文獻(xiàn)]

[1]劉紅衛(wèi).微信小程序應(yīng)用探析[J].無線互聯(lián)科技，2016（23）：11-12， 40.

[2]陳琦.基于Webpy+Apache HTTP Server的微信小程序架構(gòu)搭建研究[J].無線互聯(lián)科技，2017（18）：50-51.

[3]百度百科.框架[EB/OL].（2018-03-15） [2018-04-24l.https：//baike.baidu.com/item/%E6%A1%86%E6%9E%B6/1212667？fr=aladdin.

[4]劉玉佳.微信“小程序”開發(fā)的系統(tǒng)實(shí)現(xiàn)及前景分析[J].信息通信，2017（1）：260-261.