開發(fā)移動購物APP

1、ganquanzhong.top/shopForFutureGroupMUI開發(fā)移動APP購物APP目錄TOC o 1-5 h z一、實訓內(nèi)容3 HYPERLINK l bookmark4 概述3淺談HTML5發(fā)展3HTML5開發(fā)手機APP過去的劣勢與當前的優(yōu)勢3認識Hbuilder開發(fā)工具及MUI框架4 HYPERLINK l bookmark6 系統(tǒng)功能介紹5基于Web的網(wǎng)絡商城項目開發(fā)移動APP5系統(tǒng)功能說明5 HYPERLINK l bookmark10 系統(tǒng)架構和文件作用介紹6項目架構及說明6頁面布局設計8系統(tǒng)功能的實現(xiàn)9移動APP后端實現(xiàn)9移動APP頁面實現(xiàn)10調(diào)試發(fā)行打包14 H

2、YPERLINK l bookmark33 二、程序運行結果及結果分析152.0打包安裝到Android系統(tǒng)上15系統(tǒng)首頁15系統(tǒng)注冊和登錄頁面16系統(tǒng)商品詳情頁17 HYPERLINK l bookmark39 商品分類18購物車18訂單及收貨信息19分享19 HYPERLINK l bookmark45 個人信息及其他20一、實訓內(nèi)容1.1概述淺談HTML5發(fā)展未來App的市場呈現(xiàn)一片光明景象，而對于移動開發(fā)商來說，不同平臺的應用則需要開發(fā)不同的App來支持，無論在更新及維護上都需要一定的成本。于是HTML5的WebApp,iOS、Android以及WindowsPhone的瀏覽器都對于h

3、tml5大部分特性的支持也更加突顯HTML5在未來移動設備端的地位。Html5的特性在于對于開發(fā)者，可以更多地跨設備、跨平臺使用。強大的跨平臺性也為企業(yè)大大降低了開發(fā)成本、的技術門檻。豐富的標簽體系，也大大降低了應用開發(fā)HTML5開發(fā)手機APP過去的HTML5，HTML5技術無法對硬件底層的功能進行調(diào)用。眾多問題逼迫開發(fā)者只能用原生技術解決。原來的HTML52與流暢Android_1_具省類高級圮事本Xcode,Eclips巳ADT等專業(yè)IDEa具有7w個語法和API40W+AP1優(yōu)勢：.離線緩存；.音頻視頻自由嵌入，多媒體形式更為靈活；ganquanzhong.top/shopganquan

4、zhong.top/shop了與原生App了與原生App、Canvas繪圖，提升移動平臺的繪圖能力；4、專為移動平臺定制的表單元素。1.1.3認識Hbuilder開發(fā)工具及MUI框架性能：提升HTML5性能的手機端引擎，讓側(cè)滑菜單、下拉刷新等動態(tài)交互卡頓的問題得以解決;工具：HTML5開發(fā)IDE產(chǎn)品HBuilder,超快的編程利器;封裝成跨平臺的HTML5plus,。包括二維碼、搖一搖、API,可以方便簡單的編寫，并且可跨平臺。c)能力：把40萬原生API封裝成JavaScript,HTML5能力不足問題的Native.js技術;Native.js技術即在js中編寫原生代碼技術，突破瀏覽器的限

5、制。d)最接近原生體驗的高性能框架：MUI,K,HTML5plusRuntime,簡稱5+Runtime，web引擎，除了支持標準HTML5外，還支持更多擴展的jsapi，使得js的能力不輸于原生。5+Runtime內(nèi)置于HBuilder,在真機運行、打包時自動掛載。如果說node.js把js的戰(zhàn)火燒到了服務器端,那么Native.js把js戰(zhàn)火燒到了原生應用戰(zhàn)場。但我jsAPI,語法是js語法，APIHTML5App的性能低下,有webview自身的性能問題,也有前端框架的性能問題。HTML5!=傳統(tǒng)瀏覽器，雖然編程語言還是HTML、Javascript、CSS,但發(fā)行方式絕不是傳統(tǒng)網(wǎng)站那么

6、簡單。HTML5應用的入口,反而很少是啟動瀏覽器輸入URL,AppC微信朋友圈)、以及搜索引擎、應用市場、廣告聯(lián)盟,到處都是它的入口。它的入口,比原生App更多。通過HBuilder、5+RuntimeMUI,能很好的解決了HTML5,ganquanzhong.top/shopganquanzhong.top/shop1.2系統(tǒng)功能介紹基于WebAPP移動電子商務目前還處于強勁增長趨勢，傳統(tǒng)互聯(lián)網(wǎng)企業(yè)大部分已經(jīng)向移動端轉(zhuǎn)移。根據(jù)需求，該APP主要是實現(xiàn)的功能是將客戶網(wǎng)站之前做過的網(wǎng)絡商城網(wǎng)站的相應功能進行技術上的轉(zhuǎn)移，將傳統(tǒng)網(wǎng)頁上的功能轉(zhuǎn)移到相應的移動客戶端。所有的相關需求通過需求文檔的方式進

7、行確定。一個APP要具備的功能不僅僅是實現(xiàn)了它的功能，如果沒有一個良好的用戶接口，將對該APP的使用率大打折扣。用戶體驗主要體現(xiàn)在兩個方面，一是用戶感受到的軟件的性能，比如操作的反應速度，另一方面是軟件的界面，良好的界面能夠感知良好的。由于之前開發(fā)過基于JavaEE開發(fā)的網(wǎng)絡商城的項目，當時開發(fā)的使用SSM,HBuilder提供的MUI框架和js等框架，后端就是用基于JavaEE的SSM框架開發(fā)。因此可以使用同一后臺，使用HBuilder的MUI框架+Vueshop移動APP。系統(tǒng)功能說明在線瀏覽商品。用戶注冊,用戶可進,用戶登陸,續(xù)操作。,完成用戶商品搜索,點擊搜索，系統(tǒng)商品詳情查看,進入詳

8、,商品加入購物車,訂單支付,可以選擇,1.3系統(tǒng)架構和文件作用介紹項目架構及說明前后端職責依舊糾纏不清。Velocity模板還是蠻強大的，變量、邏輯、宏等特性，依舊可以通過拿到的上下文變量來實現(xiàn)各種業(yè)務邏輯。這樣，只要前端弱勢一點，往往就會被后端要求在模板層寫出不少業(yè)務代碼。還有一個很大的灰色地帶是Controller,頁面路由等功能本應該是前端最關注的，但卻是由后端來實現(xiàn)。Controller本身與Model往往也會糾纏不清，看了讓人咬牙的代碼經(jīng)常會出現(xiàn)在Controller層。歷史滾滾往前，2004年Gmail像風一樣的女子來到人間，很快2005年Ajax正式提出，加上CDN開始大量用于靜

9、態(tài)資源存儲，于是出現(xiàn)了JavaScript王者歸來的SPA（SinglePageApplication單頁面應用）時代。ClientSidsBrowserSer/erSide工非常清看看的話HTMLCSSSeMceAppServer晰，前田田山關鍵AjaxJSP服務端的JSPJavaScript,類似接口。SpringMVC,這個時代開始出現(xiàn)瀏覽器端口移動端口的分層架構：使用HBuilder開發(fā)工具，和部分原生的JS構建頁面，新建APP項目shop；MUI框架如圖1.3.1-1所示。后臺使用基于JavaEE的SSM框架開發(fā)后臺，商城的管理后臺沒有做移動端還是PC端，如圖1.3.1-2所示。sh

10、lkdldllkdldlJIEEEEEEE3NKKrNrKPNKNKkpKrc&fontsiconfontimagesimgunpackageuploadsaddres-hinfiilassess.htmlasscnrt.htirn!lbalance.htmilbuy.htmJdaiturohtiml扃CD-dcness.hlrr扃CD-sssesis.htniilolCDfcLy.htffnldCD-DfderhlmloluiyuHml扃incMnlmlinc?:efc=knlirlintegrsHml|olisthlmIcgin.hlrr也rr=nfesfcjson扃rrccerthtni

11、l0neniKiancshtnil0noie.hlnrlolcrc?r.htnl二口司L3.1-1shop項目移動端構建圖-K，:郭主要傲駟小螞1田com.gqw.shopEcmtirDlleT:團AdninussrControIIeir.ja/ajjCategonpCcrtrolerjava:團FironlCcrtrolerjavs:團InMertoryContulleT,j自：-JjPageConltrcIler.java:團ProdjrlCcrtrolerjavs:團UserCsntinol|=r?jafva：-JjVerFCodeServletjave田com.gqz.sho-p.Ti

12、Epper田com.gqz.shop.pojo田com.gqz.sho-p.iervice田com.gqz.shop.service.impl田com.gqz.&hop.jtil二appliceticnCcntextxniI目perties目pertes圖131-2shop：項皿國SqlMapConfig.xTlJRESysienLibrarycom.sun.javacIk.wn；：1.3.2頁面布局設計:國J2EE14Libraries：或ReferencedLibrsressign.html注冊頁面，用戶首次使用時注冊一個屬于自己的賬號；login.html可以使用PC端注冊過的賬號登錄，

13、也可以使用在APP上注冊的賬號登錄；index.html首頁，主要包括輪播圖，最新商品、熱門商品；assort.html商品分類頁面，通過商品的分類顯示不同的上平；shopcar.html購物車頁面，顯示用戶選購的商品及結算的功能；detail.html商品詳情頁面，輪播顯示商品的圖片、商品的詳情細節(jié)及評論等內(nèi)容；self.html用戶個人中心，包括用戶的訂單、個人信息等；buy.html商品付款頁面，將選中的頁面結算付款，及填寫用戶收貨地址等內(nèi)容；1.4系統(tǒng)功能的實現(xiàn)web1.4.1移動APP后端實現(xiàn) HYPERLINK http:/ganquanzhong.top/shop/getCate

14、gories http:/ganquanzhong.top/shop/getCategories HYPERLINK http:/ganquanzhong.top/shop/getProductPic http:/ganquanzhong.top/shop/getProductPic HYPERLINK http:/ganquanzhong.top/shop/getNewProduct http:/ganquanzhong.top/shop/getNewProduct HYPERLINK http:/ganquanzhong.top/shop/getHotProduct http:/ganqu

15、anzhong.top/shop/getHotProduct下面是部分的服務器的API接口，更多的API接口可以查看之前做的項目中的后端。首頁主要顯示商品的分類導航、搜索欄、輪播大圖、熱門商品、最新商品等。獲蝙品分類藐鬼商髭院作為髓欄SuppressHarningrs(riuocheckedri)WxRequsstMapping|getCategoriesN)Re&ponseEody()publicListgetCategoriesHttpSessionsession)/將商品分類保存在的ssionListKCategiorycategporyList=(list)session,gietAt

16、tribute(，rcategoryList，r);Ja-,上,_L二,&Requestliappir.g(ir弊tFroductPic1)、&耍寅贏法.希5&ResponseBody()publicFagieInfogetEroductPicO!returnproductBervicegetFroductFic()&Requestltapping(irgietNewPrcduct)噩理聾好酉圓(iRespcnseBodyOpublicFagieInfogetNewProductO!returnproductBervicegetNewFroduct()0RequestMappinrCgetFr

17、cductsByNaineIrResponseEodyOpublicPageInfogetCateProductStringname,intpageTintpagesize)Stringcontent=W；,content=URLDecoder,decodeInanefr，utf01):翡科的瞄)catch(UnsuppcrtedELCoditigEiceptione)e.printstackltaceU:)returnprcductSemce.getFroductByajue(contenpage,pagesize);F蛹嶺呼號皿PT疝冽搬靛修拄褪麻esponseEodyOputlicFag

18、ieInfogetCate?:oduct(iDtcidfintpage,intpageSize):ductService.getPrcductByCid(cidfpage,pagesize);e(IuestNappir.g(getProductsByNana-)才睡垓塞展輪衣室藪蓑宴直慧!妻esponseEody0putlicFagieInfogetCate?:oduct(Strinqname,intpage,intpagesize)：Stringcontent=r，;其他頁面的APIcontent=URLDecoderJtde(naneFutf-8);/翩靦趣1.4.2:移動A即怵實現(xiàn)蛀口而

19、匕抨磔匕，”；:e.printStckTraceO:對html5的各個標簽元素熟悉，孕tF1泌或期如開發(fā)所使用的框架基本結構，那匕鴻)：對于html5+的API,javascript前臺與后臺的通信。HTML5,html5+的相關API,Hbuilderapp,效的完成一款APP。由于整個項目的頁面很多，報告內(nèi)容篇幅的限制等；下面只給出頁面的核心代碼，詳細的代碼及說明請見項目文件夾。Index.html頁面，移動購物APP的首頁；主要包括輪播圖（自動輪播從服務器獲取的四張商品圖片）、最新商品、熱門商品；點擊商品圖片可以跳轉(zhuǎn)到商品的詳情頁面。(divid=imleontaiiierdivid=m

20、ainclass-rui-clearfix)加1旭歸喧橘(inputclass：sch-inpitmui-input-deartype=textname：id=placacla&s=,nui-btnnui-btn-primarysch-sibuithref=searchirapfl5點搬leic-start-(她itkllidgrcl居色向iwlider0id=productPic3href=f(proilu(ahref=fstart(divchs$=hoie-iteMg(ndsui-box1)(ingclass-hofie-irtitsrc-irg/hometitljpgalt=/Cdivd

21、ass-list-typelpli&t-puzzle小蒯一個墟T(divdass=sui-flex-vtflex-justify-sbaclass-boxhref=tap=gstDetail(NedProdict1pid)nX$rc=NewProdict1iragealt=|aclass-boxhref=Jtap=getDetail(NedProdict2pid)Xii$rc=NejProdut2iragealt=aclass：boxhref=Jtap=getDetail(NedProdict3.pid)Xii:src=NProduct3.iiiagealt=(i唱lass=hoiie-ift

22、itsrcing/hcmEtitiJpgalt=小新解鐮tt楠翻門a麴一tifigclass：hofie-iiititsrc=ii/hofietit3Jpgalt=/tahref：Xingdassdbmargin-b-i5rc=iploads/UJpgnwidth：Malt=/M協(xié)divclass：fastion-plist(civchss=ii-CGl-xs-4v-for-lhotlteindexinHotProdudv-if=indene齦i族也2。(iiig一外(rtltetIm職alt=class：figurewidth：3?heigtit=126px阿邛tfet血側(cè)工tetpid毗l

23、Epn洞)/軻)di心(civchss=ii-CGl-xs-4v-for-lhotlteindexinHotProdudv-if=inde)(=3齦i波也5。(iiig一外(rtltetIm職alt=class：figurewidth：3?heigtit=126px阿邛tfet血側(cè)工tetpid(hotltemnpnane；挪di心(civchss=ii-CGl-xs-4v-for-lhotlteindexinHotProdudv-if=indene齦in皿(iiig一外(rtltetIm職alt=class：figurewidth：3?heigtit=126px阿邛tfet血側(cè)工tetpid

24、(spancld$5=titstyle-cdorn輔1喇可時比仙網(wǎng)前迎卜場心(scripttype=text/j卻招MiwiaritpreloadPaesididetaiLhtnl；urkdetail.Iitml,stylest叩:耶jbottoi：Apx1createdunction()nd,ilusHeady(tation()iigetKDN(http;/Mm聊qu加加口top他叩魅tProdittPid1function(data)|ue4productPkidnajindetf晤pradudPiE由ist;for(/ar1=1(index恥,po加tPit小噤h;M+)indexVdu

25、ctPici*inage=http:/Am嵋如quanzhontopri+inde:/consoleJ硼聞NMringify也也她E,HotPrMuct0)jupdated:fundion0varsliMiiObj=mii(ifslider);sliderMuiObjnslider(interval:W)；littp:/iMf犀nq啪址嘴.top/sliop/getHatProducfj7Tm典funetion(data)(irdexVue*HotProduct：datalistjfor(vari=(iiMe毗喧IfcrtProduct1愀|：i+)indeWue.Hotfrodneti.揄/

26、http:岫iiganquanzhong.top1tindexVue.瞅Producti.inagejLi.vardetailPage=null;variM則脾aVbe(el:4indeMContdinerj岫:jproduttPk:口N醐od毗:口HotPralurt:self.html個人信息，簡單的顯示一些個人信息；/ HYPERLINK http:/ganquanzhorg http:/ganquanzhorg.top/shop/userinfo獲取個人信息ilusReady(function()mui.getJSON(1 HYPERLINK http:/ganquanzhong.top/shop/userlnfa1t http:/ganquanzhong.top/shop/userlnfa1tfunctLon(data)userVueuserInfa=data;/console.log(JSONistringify(userVUe.userinfo)j）其他的頁面和紹幾個）；H5plusindex.html,HTML5Plus移動App,簡稱5+App,是一種基于HTML、JS