微店買家版APP設(shè)計(jì)與開發(fā)

顧惠敏　劉婭

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

關(guān)鍵詞：移動(dòng)購(gòu)物；App；WeX5

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）33-0133-02

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

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

1 APP開發(fā)模式

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

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

2 APP開發(fā)工具

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

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

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

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

3.2 制作頁(yè)面框架

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

3.3 制作動(dòng)態(tài)頁(yè)

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

3.4 其它頁(yè)面制作

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

4 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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