淺析快應(yīng)用與微信小程序技術(shù)的異同

蘇煜輝 楊明戊 陳正銘 戴經(jīng)國

摘要：隨著我國移動互聯(lián)網(wǎng)的發(fā)展，應(yīng)用市場已經(jīng)面臨著大批流量向熱門應(yīng)用傾斜的嚴(yán)峻問題，其他普通應(yīng)用推廣受阻。2016年發(fā)布的基于微信生態(tài)圈下的微信小程序更是給了應(yīng)用廠商巨大的沖擊，2018年由9家廠商聯(lián)合打造的快應(yīng)用更加推進(jìn)了無須下載安裝，即點(diǎn)即用特點(diǎn)的新一代應(yīng)用的發(fā)展。通過研究微信小程序及快應(yīng)用的源程序的框架、文檔結(jié)構(gòu)、常用組件、API等分析其技術(shù)特點(diǎn)異同，并以餓了么應(yīng)用為例分析其標(biāo)示、功能、應(yīng)用場景的異同，最后以一款自主設(shè)計的詩歌App主界面為例，通過微信小程序和快應(yīng)用的具體設(shè)計實(shí)現(xiàn)來分析其設(shè)計異同，使得開發(fā)人員減少開發(fā)成本，提升開發(fā)效率。

關(guān)鍵詞：微信小程序;快應(yīng)用;前端;模式;框架

中圖分類號：TP311? ? ? 文獻(xiàn)標(biāo)識碼：A? ? ? 文章編號：1009-3044（2018）31-0085-05

Analysis of Similarities and Differences between Quick App and WeChat Mini Program Technology

SU Yu-hui， YANG Ming-wu， CHEN Zheng-ming， DAI Jing-guo

（School of Information Science and Engineering， Shaoguan University， Shaoguan 521000， China）

Abstract： With the development of China's mobile Internet， the application market has been faced with a large number of traffic to popular applications tilt the serious problem， and other common application promotion is blocked.The WeChat Mini Program released in 2016 based on the ecosystem of WeChat gives the application manufacturers a huge impact. In 2018， the fast app jointly built by 9 manufacturers promotes the development of a new generation of apps without download and installation， namely point-to-use features， which can promote the healthy development of the application market. By studying the framework， document structure， common components and API of WeChat Mini Program and Quick App， this paper analyzes the differences and similarities in its technical features. And use eleme app as an example to analyze the similarities and differences of its labeling， functions and application scenarios were analyzed.Finally， taking the main interface of a poetry application independently designed as an example， the design differences and similarities are analyzed through the specific design implementation of WeChat Mini Program and Quick App，which makes the developers reduce the development cost and improve the development efficiency.

Key words： WeChat Mini Programs; Quick App; front end; mode; framework

隨著國內(nèi)移動應(yīng)用的發(fā)展，手機(jī)應(yīng)用難以滿足消費(fèi)者對于便捷的需求，并且傳統(tǒng)手機(jī)應(yīng)用還面臨著占用內(nèi)存大、啟動速度慢、運(yùn)行卡頓等諸多問題。而微信小程序的問世又給了應(yīng)用市場當(dāng)前一棒，逐漸讓消費(fèi)者養(yǎng)成一種思維習(xí)慣：一碰到未安裝的應(yīng)用時，第一反應(yīng)是看看這款軟件有沒有微信小程序，而不再是去應(yīng)用市場下載該款軟件，這將使應(yīng)用市場的發(fā)展受阻。2018年快應(yīng)用的成功問世卻給了手機(jī)應(yīng)用廠商另一個發(fā)展空間，更何況有競爭才有發(fā)展。本文將從宏觀理論上分析兩者的異同，并結(jié)合具體實(shí)例來進(jìn)行科學(xué)分析，最終達(dá)到減少開發(fā)成本的目的。

1 微信小程序與快應(yīng)用簡介

1.1 微信小程序

微信小程序是一種基于微信生態(tài)圈下的輕應(yīng)用[1]，在2016年9月進(jìn)入內(nèi)測，正式進(jìn)入人們的視野，它具有無須安裝、隨時使用，用完就走的特點(diǎn)，讓用戶“觸手可及”地使用應(yīng)用[2]。所以，微信小程序是一種內(nèi)置在微信APP內(nèi)的輕應(yīng)用，可以直接在微信內(nèi)打開使用，功能實(shí)現(xiàn)也與原生應(yīng)用相近。

1.2 快應(yīng)用

快應(yīng)用是一種基于手機(jī)系統(tǒng)本身的輕應(yīng)用，其標(biāo)準(zhǔn)于2018年由九大手機(jī)廠商在北京聯(lián)合發(fā)布，快應(yīng)用框架是深入結(jié)合于手機(jī)操作系統(tǒng)當(dāng)中，可以實(shí)現(xiàn)用戶需求同應(yīng)用服務(wù)間的極速銜接，同時提升了用戶的使用感受和應(yīng)用服務(wù)的質(zhì)量，而且快應(yīng)用也同樣具有無須下載、隨時使用、用完就走的特點(diǎn)，也支持桌面生成快捷方式。[3]同時快應(yīng)用區(qū)別于微信小程序很大的一點(diǎn)是快應(yīng)用無須基于任何軟件基礎(chǔ)，不像微信小程序一樣要依賴微信生態(tài)圈來運(yùn)行;而且快應(yīng)用還可與手機(jī)搜索功能、語音功能使深度結(jié)合交互，進(jìn)一步提高用戶的交互性以及使用的便捷性。

2 微信小程序與快應(yīng)用的技術(shù)特點(diǎn)異同

2.1 微信小程序的技術(shù)特點(diǎn)

2.1.1 微信小程序的文檔組成與結(jié)構(gòu)

微信小程序主要由整體與局部相結(jié)合，包括總體描述的app和局部各分頁面描述的page。其主體部分由app.js、app.wxss、app.json三個文件所構(gòu)成，其中app.js作為小程序的入口文件，用于存放交互邏輯控制文件，如控制用戶點(diǎn)擊效果，獲取地理位置等交互邏輯功能;app.wxss控制小程序的樣式顯示效果，與前端的CSS極為相似，包含了層疊樣式表的大部分屬性，但同時又有其他新的樣式元素加入;app.json作為小程序的全局配置，用于配置小程序的頁面路徑、頁面的顯示顏色效果、頂部和底部的顯示效果等。[4]每個app頁面下都會由若干page文件構(gòu)成，用于局部調(diào)整。文檔結(jié)構(gòu)圖如圖1所示。

2.1.2 微信小程序的組件

微信小程序為開發(fā)者提供了一種重要的功能—組件，大量的組件相結(jié)合搭配有利于縮短開發(fā)者開發(fā)小程序的時間和難度，為開發(fā)者提供了極大的便利。組件的使用極為方便，例如小程序中需要顯示地圖，寫上<map></map>，與前端的標(biāo)簽類似，由一個開始標(biāo)簽和結(jié)束標(biāo)簽組成，然后在組件內(nèi)也可使用css來控制顯示樣式。

基礎(chǔ)組件分為以下七大類，分別是：視圖容器（View Container），基礎(chǔ)內(nèi)容（Basic Content），表單（Form），導(dǎo)航（Navigation），多媒體（Media），地圖（Map），畫布（Canvas）。[5]

2.1.3 微信小程序的API

由于微信小程序的運(yùn)行是基于微信生態(tài)圈，因此提供了許多帶有微信色彩、甚至直接是微信本身的API供開發(fā)者調(diào)用，使得開發(fā)者開發(fā)起來更加得心應(yīng)手。微信小程序的API不僅可以直接獲取用戶個人微信信息，還可以輕易獲取手機(jī)設(shè)備的各類系統(tǒng)信息、內(nèi)存、聯(lián)系人、藍(lán)牙、NFC、WIFI、定位等信息。而且微信小程序的開放接口還提供了微信登陸、微信授權(quán)、微信支付、微信運(yùn)動等。

2.2 快應(yīng)用技術(shù)特點(diǎn)

2.2.1 快應(yīng)用的文檔組成與結(jié)構(gòu)

快應(yīng)用的文檔結(jié)構(gòu)主要由manifest.json文件、app.ux文件、ux文件三個部分構(gòu)成;其中manifest.json文件是對項目的整體信息進(jìn)行配置; app.ux文件則是用于配置項目的公共腳本資源;ux文件則是對每個頁面或者組件的具體化描述，文檔結(jié)構(gòu)圖如圖2所示。

2.2.2 快應(yīng)用的組件

快應(yīng)用為開發(fā)者提供兩大便捷的開發(fā)工具——list組件和tabs組件。

list組件主要用來對列表進(jìn)行優(yōu)化、從而達(dá)到對快應(yīng)用的使用性能進(jìn)行優(yōu)化、用戶需求可以快速響應(yīng)。list組件的性能優(yōu)化分為精簡DOM層級、復(fù)用list-item、細(xì)粒度劃分list-item、關(guān)閉scrollpage四個方面。

tabs組件主要用于對選項卡、頁面標(biāo)簽等的布局上，讓開發(fā)者可以對組件進(jìn)行靈活搭配，進(jìn)一步達(dá)到對快應(yīng)用的使用性能、操作體驗進(jìn)行優(yōu)化的目的，tabs中封裝了常見功能和效果：頁簽支持橫向滾動，支持手勢滑動切換內(nèi)容頁等。

在對快應(yīng)用組件的使用上，開發(fā)者還可以自定義各種小的組件來渲染其他頁面標(biāo)簽內(nèi)容，從而達(dá)到對代碼的合理使用，提高代碼的可讀性，從而便于開發(fā)者本身后期的維護(hù)以及其他開發(fā)者對該工程的修改。

2.3 微信小程序與快應(yīng)用的異同分析

2.3.1 框架異同分析

微信小程序和快應(yīng)用都是采用公共樣式、設(shè)置統(tǒng)一放在一種文件里面，而其他特殊的樣式再放到另一個文件當(dāng)中。兩者都是把公共樣式、配置分別存放于不同的文件當(dāng)中;文件各自選擇的編輯語言不同，微信以js、json為主，快應(yīng)用以json、ux為主。

2.3.2 組件異同分析

微信小程序選擇使用的組件帶有微信風(fēng)格，而快應(yīng)用則是以list、tabs組件為核心，共同點(diǎn)均是為了使開發(fā)者開發(fā)的方便快捷、使用組件也能夠減少一定的開發(fā)時間，可以進(jìn)一步優(yōu)化開發(fā)的代碼、邏輯，提升代碼的可維護(hù)性。

3 微信小程序與快應(yīng)用的標(biāo)示、功能、應(yīng)用場景的異同

從應(yīng)用的桌面圖標(biāo)看（如圖3所示），微信小程序圖標(biāo)與原生APP的圖標(biāo)幾乎沒區(qū)別，而快應(yīng)用則在圖標(biāo)上多出一個<E：＼知網(wǎng)文件＼電腦＼電腦31 32＼31＼3xs201831＼Image＼image5_3.png>小標(biāo)記。在使用過程中，三種應(yīng)用都必須得到獲取當(dāng)前所處位置的權(quán)限;微信小程序可以直接使用微信賬號授權(quán)登陸，而原生應(yīng)用與快應(yīng)用，只能通過賬號密碼傳統(tǒng)方式登錄;進(jìn)入三個不同實(shí)現(xiàn)的應(yīng)用之后，布局功能幾乎相同，都可完成用戶最常使用的操作。微信小程序的入口只有微信APP本身;快應(yīng)用的入口較多，分別有應(yīng)用商店入口、全局搜索入口、瀏覽器入口、場景化入口、短信入口、負(fù)一屏入口、內(nèi)外搜索入口、語音喚起入口…[6]特別是快應(yīng)用與語音助手的組合十分便捷實(shí)用，直接一句話，便可完成喚醒操作。如用戶通過語音告知語音助手：要訂一張從哪里到哪里的火車票時，語音助手在識別完語音后，可以直接喚起購買火車票的快應(yīng)用（如：攜程快應(yīng)用），然后就直接調(diào)出搜索結(jié)果的頁面等待用戶下單支付。快應(yīng)用可以實(shí)現(xiàn)對手機(jī)的深層次交互，從而給用戶帶來更為方便快捷的用戶體驗。

4 一款詩歌軟件主頁的設(shè)計實(shí)現(xiàn)的分析

在本小節(jié)，將介紹一款詩歌學(xué)習(xí)軟件主頁的設(shè)計過程與部分源碼對比

4.1 主頁的顯示效果

該詩歌軟件的主頁分為四個部分，分別為頂部的搜索框;中間的智能推薦模塊，通過輪播圖進(jìn)行展示;下面就是這個詩歌軟件的功能分區(qū)，分為詩社、詩趣、小雜鋪、小秘密四個部分，底部是tabBar快捷操作。

4.2 代碼組成文檔結(jié)構(gòu)對比

微信小程序主要由.js、.json、.wxml、.wxss為后綴的四類文件構(gòu)成，其中js文件與前端所涉及的JavaScript基本一致，用于存放控制程序邏輯功能的相關(guān)代碼，即用于控制頁面的行為動作，wxml文件可以理解為html文件，功能與html一致，書寫方式相似，都是各類標(biāo)簽，不過是小程序所定義的標(biāo)簽，當(dāng)然也涵蓋html本身的一些標(biāo)簽，wxss文件可以理解為css文件，用于控制頁面的樣式，使得頁面的顯示效果更加人性化。

app.js、app.json、app.wxss是微信小程序的全局文件。app.js可以存放整個小程序相關(guān)聯(lián)的js邏輯控制的代碼，app.json原來對小程序的全局進(jìn)行定義，例如小程序的最頂部window內(nèi)容以及新建pages下的文件夾，底部taBar等

快應(yīng)用的代碼結(jié)構(gòu)組成較為簡易，其主要代碼存放于ux文件中，該文件內(nèi)分別由頁面整體框架、頁面樣式控制、頁面邏輯控制三部分組成，即快應(yīng)用將頁面的js文件、wxml文件、wxss文件合并為一個頁面的ux文件。其編寫方式與前端更為相似。

4.3 搜索框設(shè)計代碼對比

4.3.1 微信小程序搜索框代碼

位于pages/index/index.wxml中搜索框的代碼如下：

<import src="/wxSearch/wxSearch.wxml"/>

<view class="wxSearch-section">

<view class="wxSearch-pancel">

<input bindinput="wxSearchInput" bindfocus="wxSerchFocus" value="{{wxSearchData.value}}" bindblur="wxSearchBlur" class="wxSearch-input" placeholder="搜索" />

<button class="wxSearch-button" bindtap="wxSearchFn" size="mini" plain="true">搜索</button>

</view>

</view>

<template is="wxSearch" data="{{wxSearchData}}"/>

搭配引入文件wxSearch/wxSearch.wxml及wxSearch/wxSearch.js后顯示效果如圖7所示。

4.3.2 快應(yīng)用搜索框代碼

位于pages/index/index.ux中搜索框的代碼如下：

<import name="import-wxsearch" src="../../wxSearch/wxSearch.ux"></import>

<template>

<div class="u-w-view u-w-page">

<div class="u-w-view u-w-tabs">

<div class="u-w-view wxSearch-section">

<div class="u-w-view wxSearch-pancel">

<input class="u-w-input wxSearch-input"

onchange="$handlePageEvent（'wxSearchInput'，false，false）" onfocus="$handlePageEvent（'wxSerchFocus'，false，false）" value="{{wxSearchData.value}}" onblur="$handlePageEvent（'wxSearchBlur'，false，false）"

placeholder="搜索">

</input>

<input class="u-w-button u-w-button-mini u-w-button-default-plain wxSearch-button"

onclick="$handlePageEvent（'wxSearchFn'，false，false）"

type="button" value="搜索">

</input>

</div>

</div>

<import-wxsearch is="wxSearch"

data="{{wxSearchData：wxSearchData}}"></import-wxsearch>

搭配引入文件wxSearch/wxSearch.ux及wxSearch/wxSearch.js后顯示效果如圖8所示。

通過兩者代碼的對比，我們可以看出兩者代碼的結(jié)構(gòu)與內(nèi)容十分類似，但快應(yīng)用的編寫格式更加貼近html，微信小程序除了部分標(biāo)簽與html相同外，還需要另外遵循wxml的相關(guān)標(biāo)簽規(guī)定?？鞈?yīng)用則是與html類似，除了小部分的改用外均與html標(biāo)簽一致。其次通過圖7圖8效果圖的直觀對比可以發(fā)現(xiàn)兩者實(shí)現(xiàn)后的顯示效果基本一致。

5 小結(jié)

通過本文的研究，可以發(fā)現(xiàn)微信小程序和快應(yīng)用均采用前端技術(shù)棧作為主要開發(fā)框架，但具體實(shí)現(xiàn)的技術(shù)、方式雖不相同但亦有相似之處，可謂是各有千秋，不分伯仲。當(dāng)今的應(yīng)用市場格局，應(yīng)用流量難以獲取，并且大部分流量流向大型應(yīng)用。百度、騰訊作為應(yīng)用流量前茅，而華為、小米等作為手機(jī)大型廠商，擁有著大批流量基礎(chǔ)，這些足以吸引開發(fā)者們投入研究。

無論是最初百度的輕應(yīng)用，還是基于輕應(yīng)用理念開發(fā)出來的微信小程序和快應(yīng)用，都是值得推廣發(fā)展的，因為其憑借著開發(fā)的成本、周期、難度低，開發(fā)上手速度快，用戶實(shí)際操作體驗佳，很多場景下的使用效果優(yōu)于原生App，開始逐步占據(jù)市場的流量份額。通過本文研究，期望應(yīng)用開發(fā)人員能盡快了解和熟悉開發(fā)框架與技術(shù)，提升開發(fā)效率，占據(jù)市場高處。

參考文獻(xiàn)：

[1]唐文捷，劉士成，張伍菲，朱鵬輝.輕應(yīng)用（Lapp）——App未來發(fā)展趨勢[J].三峽大學(xué)學(xué)報：人文社會科學(xué)版，2014，36（S2）：27-29.

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

[3]康嘉林. 九大手機(jī)廠商聯(lián)手推快應(yīng)用對壘小程序[N]. 通信產(chǎn)業(yè)報，2018-03-26（023）.

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

[5]微信小程序基礎(chǔ)組件之視圖容器[EB/OL].[2018-08-24]. https：//blog.csdn.net/hedong_77/article/details/54669912.

[6]周成成.手機(jī)廠商和開發(fā)者看好快應(yīng)用新生態(tài)[J].計算機(jī)與網(wǎng)絡(luò)，2018，44（8）：11.