1、    淺析快應用與微信小程序技術的異同    蘇煜輝 楊明戊 陳正銘 戴經國摘要：隨著我國移動互聯網的發展，應用市場已經面臨著大批流量向熱門應用傾斜的嚴峻問題，其他普通應用推廣受阻。2016年發布的基于微信生態圈下的微信小程序更是給了應用廠商巨大的沖擊，2018年由9家廠商聯合打造的快應用更加推進了無須下載安裝，即點即用特點的新一代應用的發展。通過研究微信小程序及快應用的源程序的框架、文檔結構、常用組件、api等分析其技術特點異同，并以餓了么應用為例分析其標示、功能、應用場景的異同，最后以一款自主設計的詩歌app主界面為例，通過微信小程序和快應用的具體

2、設計實現來分析其設計異同，使得開發人員減少開發成本，提升開發效率。關鍵詞：微信小程序;快應用;前端;模式;框架：tp311      ：a      ：1009-3044（2018）31-0085-05analysis of similarities and differences between quick app and wechat mini program technologysu yu-hui， yang ming-wu， chen zheng-ming， dai jing-guo（school of information

3、 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 blocke

4、d.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，

5、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 analy

6、ze 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 w

7、echat 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隨著國內移動應用的發展，手機應用難以滿足消費者對于便捷的需求，并且傳統手機應用還面臨著占用內存大、啟動速度慢、運行卡頓等諸多問題。而微信小程序的問世又給了應用市場當前一棒，逐漸讓消費者養成一種思維習慣：一碰

8、到未安裝的應用時，第一反應是看看這款軟件有沒有微信小程序，而不再是去應用市場下載該款軟件，這將使應用市場的發展受阻。2018年快應用的成功問世卻給了手機應用廠商另一個發展空間，更何況有競爭才有發展。本文將從宏觀理論上分析兩者的異同，并結合具體實例來進行科學分析，最終達到減少開發成本的目的。1 微信小程序與快應用簡介1.1 微信小程序微信小程序是一種基于微信生態圈下的輕應用1，在2016年9月進入內測，正式進入人們的視野，它具有無須安裝、隨時使用，用完就走的特點，讓用戶“觸手可及”地使用應用2。所以，微信小程序是一種內置在微信app內的輕應用，可以直接在微信內打開使用，功能實現也與原生應用相近。

9、1.2 快應用快應用是一種基于手機系統本身的輕應用，其標準于2018年由九大手機廠商在北京聯合發布，快應用框架是深入結合于手機操作系統當中，可以實現用戶需求同應用服務間的極速銜接，同時提升了用戶的使用感受和應用服務的質量，而且快應用也同樣具有無須下載、隨時使用、用完就走的特點，也支持桌面生成快捷方式。3同時快應用區別于微信小程序很大的一點是快應用無須基于任何軟件基礎，不像微信小程序一樣要依賴微信生態圈來運行;而且快應用還可與手機搜索功能、語音功能使深度結合交互，進一步提高用戶的交互性以及使用的便捷性。2 微信小程序與快應用的技術特點異同2.1 微信小程序的技術特點2.1.1 微信小程序的文檔組

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

11、.1.2 微信小程序的組件微信小程序為開發者提供了一種重要的功能組件，大量的組件相結合搭配有利于縮短開發者開發小程序的時間和難度，為開發者提供了極大的便利。組件的使用極為方便，例如小程序中需要顯示地圖，寫上<map></map>，與前端的標簽類似，由一個開始標簽和結束標簽組成，然后在組件內也可使用css來控制顯示樣式?；A組件分為以下七大類，分別是：視圖容器（view container），基礎內容（basic content），表單（form），導航（navigation），多媒體（media），地圖（map），畫布（canvas）。52.1.3 微信小程序的api由

12、于微信小程序的運行是基于微信生態圈，因此提供了許多帶有微信色彩、甚至直接是微信本身的api供開發者調用，使得開發者開發起來更加得心應手。微信小程序的api不僅可以直接獲取用戶個人微信信息，還可以輕易獲取手機設備的各類系統信息、內存、聯系人、藍牙、nfc、wifi、定位等信息。而且微信小程序的開放接口還提供了微信登陸、微信授權、微信支付、微信運動等。2.2 快應用技術特點2.2.1 快應用的文檔組成與結構快應用的文檔結構主要由manifest.json文件、app.ux文件、ux文件三個部分構成;其中manifest.json文件是對項目的整體信息進行配置; app.ux文件則是用于配置項目的公

13、共腳本資源;ux文件則是對每個頁面或者組件的具體化描述，文檔結構圖如圖2所示。2.2.2 快應用的組件快應用為開發者提供兩大便捷的開發工具list組件和tabs組件。list組件主要用來對列表進行優化、從而達到對快應用的使用性能進行優化、用戶需求可以快速響應。list組件的性能優化分為精簡dom層級、復用list-item、細粒度劃分list-item、關閉scrollpage四個方面。tabs組件主要用于對選項卡、頁面標簽等的布局上，讓開發者可以對組件進行靈活搭配，進一步達到對快應用的使用性能、操作體驗進行優化的目的，tabs中封裝了常見功能和效果：頁簽支持橫向滾動，支持手勢滑動切換內容頁等

14、。在對快應用組件的使用上，開發者還可以自定義各種小的組件來渲染其他頁面標簽內容，從而達到對代碼的合理使用，提高代碼的可讀性，從而便于開發者本身后期的維護以及其他開發者對該工程的修改。2.3 微信小程序與快應用的異同分析2.3.1 框架異同分析微信小程序和快應用都是采用公共樣式、設置統一放在一種文件里面，而其他特殊的樣式再放到另一個文件當中。兩者都是把公共樣式、配置分別存放于不同的文件當中;文件各自選擇的編輯語言不同，微信以js、json為主，快應用以json、ux為主。2.3.2 組件異同分析微信小程序選擇使用的組件帶有微信風格，而快應用則是以list、tabs組件為核心，共同點均是為了使開發

15、者開發的方便快捷、使用組件也能夠減少一定的開發時間，可以進一步優化開發的代碼、邏輯，提升代碼的可維護性。3 微信小程序與快應用的標示、功能、應用場景的異同從應用的桌面圖標看（如圖3所示），微信小程序圖標與原生app的圖標幾乎沒區別，而快應用則在圖標上多出一個<e：知網文件電腦電腦31 32313xs201831imageimage5_3.png>小標記。在使用過程中，三種應用都必須得到獲取當前所處位置的權限;微信小程序可以直接使用微信賬號授權登陸，而原生應用與快應用，只能通過賬號密碼傳統方式登錄;進入三個不同實現的應用之后，布局功能幾乎相同，都可完成用戶最常使用的操作。微信小程序的

16、入口只有微信app本身;快應用的入口較多，分別有應用商店入口、全局搜索入口、瀏覽器入口、場景化入口、短信入口、負一屏入口、內外搜索入口、語音喚起入口6特別是快應用與語音助手的組合十分便捷實用，直接一句話，便可完成喚醒操作。如用戶通過語音告知語音助手：要訂一張從哪里到哪里的火車票時，語音助手在識別完語音后，可以直接喚起購買火車票的快應用（如：攜程快應用），然后就直接調出搜索結果的頁面等待用戶下單支付?？鞈每梢詫崿F對手機的深層次交互，從而給用戶帶來更為方便快捷的用戶體驗。4 一款詩歌軟件主頁的設計實現的分析在本小節，將介紹一款詩歌學習軟件主頁的設計過程與部分源碼對比4.1 主頁的顯示效果該詩歌軟

17、件的主頁分為四個部分，分別為頂部的搜索框;中間的智能推薦模塊，通過輪播圖進行展示;下面就是這個詩歌軟件的功能分區，分為詩社、詩趣、小雜鋪、小秘密四個部分，底部是tabbar快捷操作。4.2 代碼組成文檔結構對比微信小程序主要由.js、.json、.wxml、.wxss為后綴的四類文件構成，其中js文件與前端所涉及的javascript基本一致，用于存放控制程序邏輯功能的相關代碼，即用于控制頁面的行為動作，wxml文件可以理解為html文件，功能與html一致，書寫方式相似，都是各類標簽，不過是小程序所定義的標簽，當然也涵蓋html本身的一些標簽，wxss文件可以理解為css文件，用于控制頁面的

18、樣式，使得頁面的顯示效果更加人性化。app.js、app.json、app.wxss是微信小程序的全局文件。app.js可以存放整個小程序相關聯的js邏輯控制的代碼，app.json原來對小程序的全局進行定義，例如小程序的最頂部window內容以及新建pages下的文件夾，底部tabar等快應用的代碼結構組成較為簡易，其主要代碼存放于ux文件中，該文件內分別由頁面整體框架、頁面樣式控制、頁面邏輯控制三部分組成，即快應用將頁面的js文件、wxml文件、wxss文件合并為一個頁面的ux文件。其編寫方式與前端更為相似。4.3 搜索框設計代碼對比4.3.1 微信小程序搜索框代碼位于pages/inde

19、x/index.wxml中搜索框的代碼如下：<import src="/wxsearch/wxsearch.wxml"/><view class="wxsearch-section"><view class="wxsearch-pancel"><input bindinput="wxsearchinput" bindfocus="wxserchfocus" value="wxsearchdata.value" bindblur=&qu

20、ot;wxsearchblur" class="wxsearch-input" placeholder="搜索" /><button class="wxsearch-button" bindtap="wxsearchfn" size="mini" plain="true">搜索</button></view></view><template is="wxsearch" data=&quo

21、t;wxsearchdata"/>搭配引入文件wxsearch/wxsearch.wxml及wxsearch/wxsearch.js后顯示效果如圖7所示。4.3.2 快應用搜索框代碼位于pages/index/index.ux中搜索框的代碼如下：<import name="import-wxsearch" src="././wxsearch/wxsearch.ux"></import><template><div class="u-w-view u-w-page"><

22、;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="$handl

23、epageevent（'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"

24、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.j