顧惠敏　劉婭

摘要：文章研究如何在移動設(shè)備上設(shè)計和開發(fā)購物類APP。分析了移動端APP三種開發(fā)模式的特點，選擇了混合應(yīng)用模式，使用WeX5設(shè)計和開發(fā)了一款智能移動設(shè)備APP。

關(guān)鍵詞：移動購物；App；WeX5

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2017）33-0133-02

隨著智能手機等移動端設(shè)備的普及，移動購物的靈活與便捷優(yōu)勢越來越突出。在主流電商平臺的大力推動下，用戶移動購物習(xí)慣已經(jīng)養(yǎng)成。 2016年4月1日，全球領(lǐng)先的移動互聯(lián)網(wǎng)第三方數(shù)據(jù)挖掘和整合營銷機構(gòu)艾媒咨詢發(fā)布了《2015-2016中國移動電商市場年度報告》，該報告顯示“在中國，移動電商成交額已經(jīng)超越PC端，移動端將成為電子商務(wù)主要的交易渠道，預(yù)計到2018年中國移動電商用戶規(guī)模將接近5億。”目前，國內(nèi)傳統(tǒng)的電子商務(wù)已經(jīng)發(fā)展至頂峰，微店開啟了移動電商新模式。為了搶占移動電商市場的先機，各個電商大咖紛紛進軍微店市場，如淘寶推出了淘寶微店，京東推出了拍拍微店。微店購物這一新興的購物市場有著巨大的發(fā)展?jié)摿Α?/p>

微店買家版APP是專門為買家開發(fā)的一款移動端購物類應(yīng)用，用戶通過安裝在移動設(shè)備上的微店買家版APP，可以隨時隨地購買自己想要的物品，為用戶提供諸多便捷服務(wù)。為了滿足移動互聯(lián)網(wǎng)應(yīng)用“富內(nèi)容、富交互、富體驗、跨平臺”的要求，文中設(shè)計與開發(fā)的微店買家版APP采用基于HTML5的混合應(yīng)用模式。

1 APP開發(fā)模式

移動端APP有三種開發(fā)模式：原生應(yīng)用、網(wǎng)頁應(yīng)用和混合應(yīng)用。原生應(yīng)用又稱為本地化應(yīng)用，采用這種模式開發(fā)的APP，APP運行時所需的界面、數(shù)據(jù)、邏輯框架均安裝在移動終端上。網(wǎng)頁應(yīng)用就是把手機當做一個瀏覽器，APP運行時所需的資源均在服務(wù)器端。原生應(yīng)用開發(fā)成本高，跨平臺性差是這種開發(fā)模式的重要缺點。網(wǎng)頁應(yīng)用模式開發(fā)成本低，跨平臺開發(fā)工具選擇多，但APP使用移動硬件設(shè)備的能力有限?；旌蠎?yīng)用是原生應(yīng)用和網(wǎng)頁應(yīng)用的結(jié)合體，開發(fā)時二者的應(yīng)用比例可自由組合，它的使用方式和原生應(yīng)用一致，但又繼承了網(wǎng)頁應(yīng)用開發(fā)成本低等優(yōu)點。

目前，混合應(yīng)用采用HTML5標準。HTML5是萬維網(wǎng)的核心語言、標準通用標記語言下的一個應(yīng)用超文本標記語言（HTML）的第五次重大修改。[1]它具有HTML5跨平臺性，開發(fā)一次APP，即可部署不同的移動設(shè)備。混合應(yīng)用模式能很好的應(yīng)用于電子商務(wù)，在線教育，娛樂等行業(yè)，已經(jīng)成為移動開發(fā)者的首選開發(fā)模式。一些國內(nèi)外主流的APP應(yīng)用其實就是架構(gòu)在混合應(yīng)用開發(fā)平臺上，比如臉譜，百度搜索等。[2]

2 APP開發(fā)工具

微店買家版APP使用WeX5設(shè)計開發(fā)。 WeX5是北京起步公司推出的開源并且免費使用的APP開發(fā)工具，它是在Eclipse平臺下二次開發(fā)所得，采用H5+CSS3+JS標準技術(shù)。WeX5的混合應(yīng)用開發(fā)模式能輕松調(diào)用手機設(shè)備，如相機、地圖、通訊錄等，讓開發(fā)者輕松應(yīng)對各類復(fù)雜數(shù)據(jù)應(yīng)用，代碼量減少80%。同時開發(fā)出的應(yīng)用能夠媲美原生的運行體驗。[3]

3 APP設(shè)計開發(fā)

3.1 功能結(jié)構(gòu)

文中設(shè)計制作了一個用于購買母嬰用品的微店買家版APP。用戶通過微店買家版APP可以隨意的購買自己想要的母嬰用品。該APP提供了四個欄目：1）動態(tài)：為用戶精選打折促銷的商品及新品；2）今日推薦：為用戶推薦一些母嬰用品方面的小知識；3）分類：提供了媽咪專區(qū)、寶寶服飾、童車座椅等14個類別的商品；4）個人中心：提供購物車功能及顯示收藏的店鋪信息。APP的首頁效果如圖1所示。

3.2 制作頁面框架

制作頁面框架的步驟如下：1）使用“新建W向?qū)А?，新建“dynamic.w”文件；2）頁面中panel組件有top、content、bottom三個區(qū)域，形成了上、中、下的布局，刪除top區(qū)域?qū)ⅰ皠討B(tài)”頁制作成中下格局。3）在panel組件的content部分，添加contents組件， contents組件中默認有一個content，再添加三個content形成四個內(nèi)容頁，每一個內(nèi)容頁對應(yīng)一個欄目。4）在buttom區(qū)域，添加button Group組件，并將其class設(shè)置為“風(fēng)格：x-card；排列方式：btn-group-justified”。5）在button Group組件中添加4個button，設(shè)置每個button的icon、 label和target屬性為對應(yīng)欄目的圖標、文字和頁面。6）設(shè)置button Group組件的select屬性為第一個按鈕。頁面框架結(jié)構(gòu)如圖2所示。

3.3 制作動態(tài)頁

該APP選用“動態(tài)”欄目頁面為初始頁面。其制作步驟如下：1）在動態(tài)頁對應(yīng)的content2中，添加panel組件，刪除bottom區(qū)域，形成上中格局；2）在panel組件的top部分，添加titleBar組件，設(shè)置其title屬性為“母嬰動態(tài)”； background-color為“blue”。 3） 在model組件中添加data組件，并設(shè)置其xid屬性為dyngoodsData；4）新建json文件 “dyngoodsData.json”，文件內(nèi)容為存儲商品的編號、商品標題、商品圖片信息；5） 打開“data列編輯”對話框，為dyngoodsData組件新建“id、title、image”三列，分別對應(yīng)“dyngoodsData.json”文件中的三部分信息；6）添加list組件，設(shè)置list組件的data屬性為dyngoodsData；7） 在list組件中的li下放入image組件，設(shè)置其bind-attr-src屬性為val（“image”）

3.4 其它頁面制作

“今日推薦”、 “分類”、 “個人中心”欄目頁面的制作與“動態(tài)”頁制作類似，可歸納為：1）形成頁面布局；2） 新建json文件； 3）添加并編輯data組件； 4）關(guān)聯(lián)data組件與各種顯示組件。所有欄目的頁面制作好后，將頁面框架中四個按鈕對應(yīng)的content組件中放入windowContainer組件，設(shè)置其src屬性為對應(yīng)的欄目頁面即可。每個欄目下二級子頁面的制作也和上述的過程類似。

4 結(jié)束語

本文基于混合應(yīng)用模式設(shè)計和開發(fā)了一款購物類APP，該APP開發(fā)一次即可部署到不同的移動設(shè)備上。它提供了豐富的母嬰商品資源，能滿足用戶的購買需求。

參考文獻：

[1] 百度百科.移動學(xué)習(xí)[EB/OL]. [2016-08-27]. https：//baike.baidu.com/item/html5.

[2] 顧春來. APP應(yīng)用程序開發(fā)模式探究[J]. 硅谷， 2014（5）：35-36.

[3] 馬科. HTML5 App商業(yè)開發(fā)實戰(zhàn)教程——基于WeX5可視化開發(fā)平臺[M]. 北京： 高等教育出版社， 2016： 3-10.