開發(fā)移動購物APP

MUI開發(fā)移動APP購物APP目錄TOC\o"1-5"\h\z、實訓(xùn)內(nèi)容3\o"CurrentDocument"1.1概述3\o"CurrentDocument"1.1.1淺談HTML5發(fā)展3\o"CurrentDocument"HTML5開發(fā)手機APP過去的劣勢與當(dāng)前的優(yōu)勢3\o"CurrentDocument"1.1.3認識Hbuilder開發(fā)工具及MUI框架4\o"CurrentDocument"1.2系統(tǒng)功能介紹5\o"CurrentDocument"1.2.1基于Web的網(wǎng)絡(luò)商城項目開發(fā)移動APP5\o"CurrentDocument"1.2.2系統(tǒng)功能說明5\o"CurrentDocument"1.3系統(tǒng)架構(gòu)和文件作用介紹6\o"CurrentDocument"1.3.1項目架構(gòu)及說明6\o"CurrentDocument"頁面布局設(shè)計8\o"CurrentDocument"1.4系統(tǒng)功能的實現(xiàn)9移動APP后端實現(xiàn)9\o"CurrentDocument"移動APP頁面實現(xiàn)10\o"CurrentDocument"1.4.3調(diào)試發(fā)行打包14\o"CurrentDocument"、程序運行結(jié)果及結(jié)果分析152.0打包安裝到Android系統(tǒng)上152.1系統(tǒng)首頁152.2系統(tǒng)注冊和登錄頁面16\o"CurrentDocument"2.3系統(tǒng)商品詳情頁17\o"CurrentDocument"2.4商品分類18\o"CurrentDocument"2.5購物車18\o"CurrentDocument"2.6訂單及收貨信息19\o"CurrentDocument"2.7分享19\o"CurrentDocument"2.8個人信息及其他20一、實訓(xùn)內(nèi)容1.1概述1.1.1淺談HTML5發(fā)展未來App的市場呈現(xiàn)一片光明景象，而對于移動開發(fā)商來說，不同平臺的應(yīng)用則需要開發(fā)不同的App來支持，無論在更新及維護上都需要一定的成本。于是更多人想到了基于HTML5的WebApp，目前主流操作系統(tǒng)iOS、Android以及WindowsPhone的瀏覽器都對于html5大部分特性的支持也更加突顯HTML5在未來移動設(shè)備端的地位。Html5的特性在于對于開發(fā)者，可以更多地跨設(shè)備、跨平臺使用。強大的跨平臺性也為企業(yè)大大降低了開發(fā)成本、豐富的標(biāo)簽體系，也大大降低了應(yīng)用開發(fā)的技術(shù)門檻。1.1.2HTML5開發(fā)手機APP過去的劣勢與當(dāng)前的優(yōu)勢過去的HTML5切頁白屏、轉(zhuǎn)場卡頓、下拉刷新不流暢、側(cè)滑菜單不流暢，HTML5技術(shù)無法對硬件底層的功能進行調(diào)用。眾多問題逼迫開發(fā)者只能用原生技術(shù)解決。原來的HTML5iOS流暢Android圈機很卡高鍛XcodehEclipseADT^^r^lkIDE只有7w個語法和API40W+AP1優(yōu)勢：離線緩存；音頻視頻自由嵌入，多媒體形式更為靈活;3、Canvas繪圖，提升移動平臺的繪圖能力;4、專為移動平臺定制的表單元素。1.1.3認識Hbuilder開發(fā)工具及MUI框架a）性能：提升HTML5性能的手機端引擎，讓側(cè)滑菜單、下拉刷新等動態(tài)交互卡頓的問題得以解決；b）工具：HTML5開發(fā)IDE產(chǎn)品HBuilder,超快的編程利器;封裝成跨平臺的HTML5plus規(guī)范，并將規(guī)范公開于。包括二維碼、搖一搖、語音輸入、地圖、支付、分享、文件系統(tǒng)、通訊錄等常用API，可以方便簡單的編寫，并且可跨平臺。c）能力：把40萬原生API封裝成JavaScript對象，以解決HTML5能力不足問題的Native.js技術(shù);Native.js技術(shù)即在js中編寫原生代碼技術(shù)，突破瀏覽器的限制。d）最接近原生體驗的高性能框架：MUI框架，體積只有幾十K，加載、運行遠快于一般框架。HTML5plusRuntime，簡稱5+Runtime，是運行于手機端的強化web引擎，除了支持標(biāo)準(zhǔn)HTML5外，還支持更多擴展的jsapi，使得js的能力不輸于原生。5+Runtime內(nèi)置于HBuilder，在真機運行、打包時自動掛載。如果說node.js把js的戰(zhàn)火燒到了服務(wù)器端，那么Native.js把js戰(zhàn)火燒到了原生應(yīng)用戰(zhàn)場。但我們可以使用js直接調(diào)原生API，語法是js語法，API命名是原生命名。HTML5App的性能低下，有webview自身的性能問題，也有前端框架的性能問題。HTML5!=傳統(tǒng)瀏覽器，雖然編程語言還是HTML、Javascript、CSS，但發(fā)行方式絕不是傳統(tǒng)網(wǎng)站那么簡單。HTML5應(yīng)用的入口，反而很少是啟動瀏覽器輸入URL，它可以是存在于手機桌面的圖標(biāo)、也可以來自超級App（如微信朋友圈）、以及搜索引擎、應(yīng)用市場、廣告聯(lián)盟，到處都是它的入口。它的入口，比原生App更多。通過HBuilder、5+Runtime>MUI，能很好的解決了HTML5的障礙，做到了與原生App一致的功能和體驗。1.2系統(tǒng)功能介紹1.2.1基于Web的網(wǎng)絡(luò)商城項目開發(fā)移動APP移動電子商務(wù)目前還處于強勁增長趨勢，傳統(tǒng)互聯(lián)網(wǎng)企業(yè)大部分已經(jīng)向移動端轉(zhuǎn)移。根據(jù)需求，該APP主要是實現(xiàn)的功能是將客戶網(wǎng)站［之前做過的網(wǎng)絡(luò)商城網(wǎng)站］的相應(yīng)功能進行技術(shù)上的轉(zhuǎn)移，將傳統(tǒng)網(wǎng)頁上的功能轉(zhuǎn)移到相應(yīng)的移動客戶端。所有的相關(guān)需求通過需求文檔的方式進行確定。一個APP要具備的功能不僅僅是實現(xiàn)了它的功能，如果沒有一個良好的用戶接口，將對該APP的使用率大打折扣。用戶體驗主要體現(xiàn)在兩個方面，一是用戶感受到的軟件的性能，比如操作的反應(yīng)速度，另一方面是軟件的界面，良好的界面能夠感知良好的。由于之前開發(fā)過基于JavaEE開發(fā)的網(wǎng)絡(luò)商城的項目，當(dāng)時開發(fā)的使用SSM框架開發(fā)，做到了前后端分離。前端就是用HBuilder提供的MUI框架和js等框架，后端就是用基于JavaEE的SSM框架開發(fā)。因此可以使用同一后臺，使用HBuilder的MUI框架+Vue漸進式框架實現(xiàn)一款shop移動APP。1.2.2系統(tǒng)功能說明在線瀏覽用戶可在系統(tǒng)前臺首頁進行商品瀏覽，在多種多樣的商品中選擇自己中意的商品。用戶注冊對于未注冊的用戶，系統(tǒng)可以提供免費注冊的功能。注冊完成后，用戶可進入系統(tǒng)的登陸界面，進行登陸操作。用戶登陸對于商品購買以及商品加入購物車等功能，用戶必須進行登陸后方可進行后續(xù)操作。用戶可點擊系統(tǒng)的登陸按鈕，點擊進入系統(tǒng)相應(yīng)的登陸界面，完成用戶的登陸操作。商品搜索琳瑯滿目的商品，讓人眼花繚亂。找不到中意的商品，怎么辦。商品搜索功能為你解決這個頭痛的問題。用戶可在商品搜索欄輸入關(guān)鍵字，點擊搜索，系統(tǒng)即可為其呈現(xiàn)想要的商品。商品詳情查看在商品列表中找到了自己所想要的寶貝之后，用戶可點擊商品圖標(biāo)，進入詳情頁，查看商品更詳盡的各項信息。商品加入購物車對于中意的寶貝，系統(tǒng)提供了購物車功能。即用戶可以將自己比較糾結(jié)或者暫時不想購買的商品加入購物車，日后在做定奪，方便下次購買。訂單支付系統(tǒng)為用戶提供了支付功能，用戶再找到自己所鐘意的商品之后，可以選擇支付，購買商品，完成本次操作。1.3系統(tǒng)架構(gòu)和文件作用介紹1.3.1項目架構(gòu)及說明前后端職責(zé)依舊糾纏不清。Velocity模板還是蠻強大的，變量、邏輯、宏等特性，依舊可以通過拿到的上下文變量來實現(xiàn)各種業(yè)務(wù)邏輯。這樣，只要前端弱勢一點，往往就會被后端要求在模板層寫出不少業(yè)務(wù)代碼。還有一個很大的灰色地帶是Controller，頁面路由等功能本應(yīng)該是前端最關(guān)注的，但卻是由后端來實現(xiàn)。Controller本身與Model往往也會糾纏不清，看了讓人咬牙的代碼經(jīng)常會出現(xiàn)在Controller層。

歷史滾滾往前，2004年Gmail像風(fēng)一樣的女子來到人間，很快2005年Ajax正式提出，加上CDN開始大量用于靜態(tài)資源存儲，于是出現(xiàn)了JavaScript這種模式下，前后端的分工非常清晰，前后端的關(guān)鍵協(xié)作點是Ajax接口。看起來是如此美妙，但回過頭來看看的話，這與JSP時代區(qū)別不大。復(fù)雜度從服務(wù)端的JSP里移到了瀏覽器的JavaScript，瀏覽器端變得很復(fù)雜。類似SpringMVC，這個時代開始出現(xiàn)瀏覽器端（移動端）的分層架構(gòu)：本項目前后端職責(zé)很清晰。前端工作在移動APP端，后端工作在服務(wù)端。清晰的分工，可以讓開發(fā)并行，測試數(shù)據(jù)的模擬不難，前端可以本地開發(fā)。后端則可以專注于業(yè)務(wù)邏輯的處理，輸出RESTful等接口使用HBuilder開發(fā)工具，新建APP項目shop；在項目中前端使用MUI框架和部分原生的JS構(gòu)建頁面，如圖1.3.1-1所示。后臺使用基于JavaEE的SSM框架開發(fā)后臺，商城的管理后臺沒有做移動端還是PC端，如圖1.3.1-2所示。

CSSiconfontimagesImgunpacksgeuploadsaddres.htimilassess,himCSSiconfontimagesImgunpacksgeuploadsaddres.htimilassess,himIasEcurt.htnnlbialiance.htmlbuy.htmildatum!.htnfildetaiI..hitml同go-addre5s.h%jnl應(yīng)go-^￡￡?cc.htFYilQgobuy.html應(yīng)gO-Or'dOr'.h'bYil同huiyuan-htmlRindciM.hlml四index-bakhlmlQintogral.htm\QlistihtnniQlogin.htmIqim-anHesLjion應(yīng)mycallKt.htryil同ramechange.htmlnnona.htnilQcrder.html應(yīng)ordMtvuo-.h'bYil同Lelf.htmlQ&ho|pCiar.ht^nl四^hcpcarlihtmlQtign.hbnl國tiKianihtmlC3wuliu.FTEml.::Kiuq^i.html,號北X德用典垣昶點|V田EEugqz■苫hop,Entgllu「.：■■叵|AdminuserContirolIer.java[j]CaEegoryControlleif.java固FrontConitrolIer.java[JjInventrnryControlIer.java■-國ControIIc^rjava[JjProduct匚口（1怕口11&福時日：■■|/|UssrControIIerjava|jQVewifyCodeSeru1!etjavacam.^qz.shop,mappe-rcom,gqz-shop,ppjdcom,gqz.shop,■scrvicecoin?gi平shop,servite.implcom：gqzishop,utilaglicationC"口門Iff|pc-iriies目IpertiusAspiringmvc.xml1X1SqIMapCanfig.xmIl-|曲JRESystemLibrary[com.￡un.java.jdlcwin:：?奩七J2EE1.4Libraries>U"f^pferencedLibraries圖1.3.1-2shop項目后臺服務(wù)器模塊構(gòu)建圖1.3.2頁面布局設(shè)計sign.html注冊頁面，用戶首次使用時注冊一個屬于自己的賬號；login.html可以使用PC端注冊過的賬號登錄，也可以使用在APP上注冊的賬號登錄；index.html首頁，主要包括輪播圖，最新商品、熱門商品；assort.html商品分類頁面，通過商品的分類顯示不同的上平；shopcar.html購物車頁面，顯示用戶選購的商品及結(jié)算的功能；detail.html商品詳情頁面，輪播顯示商品的圖片、商品的詳情細節(jié)及評論等內(nèi)容；self.html用戶個人中心，包括用戶的訂單、個人信息等；buy.html商品付款頁面，將選中的頁面結(jié)算付款，及填寫用戶收貨地址等內(nèi)容；1.4系統(tǒng)功能的實現(xiàn)1.4.1移動入?？后端實現(xiàn)下面是部分的服務(wù)器的API接口，更多的API接口可以查看之前做的web項目中的后端。獲取商品分類獲取輪播商品圖片獲取最新商品獲取熱門商品首頁主要顯示商品的分類導(dǎo)航、搜索欄、輪播大圖、熱門商品、最新商品等。電fieque4tMippiuy["tPXO"1歇堰商品輪插叫ijRespe-nseErody{,皆鋰或◎工口壬。<曹基g'ft'trxQdiUCtFl^(){(?E.cquestMappJisngt"gatNewTroductr,)炎取錄始主】部G'R*tpon{bpmalicF4^infe<Ftoiau€t><){it&tiiizeB.pr&dustService-getKewPr*diLiet{J;CdequestMAp^ih?f"g*tKct^roaue熒耳L熱門商品ijResponseBody(》publicpageId±o<Frod.uct>getHotProduct(J{E*tuxnprodiuGt^Fvic*=^?tHctlToduct：{I;("gtteateFrcduct")框捉有用分類、我很的品列表@RespoDseBody(]puib-licFag?lTi^o<Froduct>g—td手Fe*e!uc七〔土n七Qidrin*tpagorInt4produatserviee.^etPt^due：t&ycxd.(eiarp電專K才eEiqufrJtM呷網(wǎng)叫(■井tEr*auetsByWame9祁據(jù)按虞欄妹入字用、茨取商品列.星@RespanseBody()publicffaqi??ZiifQ<PFodUiQt>g^tCnteFraducttelngnwwrintpng*intpagvBizt)(ecutent■,N，;txy(content=W.t.D?CQd*rrciecocfe(niuw.,"utf-S");//Sfi野的問牌}eateh(UttsupportedZ.He-odifci^fExee^tlon.白)[e..przntstackTracet);izetuxnpreKluat&arvi.ee.^trroductBS'^1^(eont?ntpage,page￡X￡e}?其他頁面的API詳細查看項目即可。1.4.2移動APP頁面實現(xiàn)對html5的各個標(biāo)簽元素熟悉，熟悉開發(fā)所使用的框架基本結(jié)構(gòu)，對于html5+的API熟悉，扎實的后臺語言基礎(chǔ)，能實現(xiàn)調(diào)用相關(guān)語言包在javascript中實現(xiàn)前臺與后臺的通信。這樣通過調(diào)用框架及HTML5實現(xiàn)前臺頁面的優(yōu)化，調(diào)用html5+的相關(guān)API實現(xiàn)與后臺的通訊，Hbuilder開發(fā)工具實現(xiàn)跨平臺及app的打包及發(fā)行，最終高效的完成一款A(yù)PP。由于整個項目的頁面很多，報告內(nèi)容篇幅的限制等；下面只給出頁面的核心代碼，詳細的代碼及說明請見項目文件夾。①Index.html頁面，移動購物APP的首頁；主要包括輪播圖（自動輪播從服務(wù)器獲取的四張商品圖片）、最新商品、熱門商品；點擊商品圖片可以跳轉(zhuǎn)到商品的詳情頁面。<divid="IndtMCont*1ntrh><llvM=FMn”clas3=*rnul-clearflx"><1!--點擊H發(fā)start-->■Cdiuclass^'pap-schwrap">|<divcIns&■r,ui-scr<allvdw'1>■cdLvNuL-hair-riiivelorw"><acl?is=：i>btnibtn-back*href="jwascript:<dlvelass="top-h-bax-F1*x-m1"><di*wclaes="ceraterfles"><inputcIei&??!,h-inputmui-input-clicir"1typ<?"te?rt"nanm"nrFId""1"plac<aclaas=llMLiil-btnmui-htn-primaryseh-s-ubnilt,1hre-F=■search.html"/b><dlvclasa■''scroll-wrap*>[]<1--i#?e<ncl-->

<t--feASud<■!.-.1■ri?L^_」<div>clB5-5="Hul-sllder-grouipiiui-slider-Jloap!,1><1：--緒汁好■的一十常點福i-+后?如KM)^dlvel***='>u1-tllder-ltt?mui-tlld^r-it?v-if=-pr>?MluetPit..|4d<*hr#TF="*">■c.ImgldH~plcIiiagp:sreH^prodluictPlcfB]bIn^igroncileks"ig*tD*±ii41([pra!dlu^-t;[P,iC：[-^]>.pld)B></a><pcla5s="mui-slider-ti±Le">{{product^ic[3J?pnane}}</p></dlw>■cl--v--feriijif-->■CdlvcLass■'''iiu1-filldUiiF-i±?H11v-forB*i±*ninprcduc+P±c!,>■C3href?fc#!,>■Cim翌id="p±cIriAfe"i5rc="item.inage"^tdp="setCetall(±"ten.pLd}r!</*><Pcl***="mul-slider-tit</dlv><r—播件蜩質(zhì)的一個馨點(憧尸除握I眼后一個常蠢是罩-舐樓酷}-->■Cdlvd.ass=IBnuL-slider-Itemmui-slider-lt?i-duplicate"v-if="pr<?ductP,lc>length>&"><pcla￡&■"muii-sLider*title,■">(￡pr<HluctPic[?]apnane}}</p></div>tnror'>!?ui■"></div>■Cdivcla&sb'^hui.-lndlEator*>^/dlw><dlvcL-a±s=，,，hu1-indlcator">^/diw>sort--><divclaaa=!ihofie-neNfoodliul-bas*>cdiilgsrc=Mintfi/Iwflietitl.jpf"/><divtlwsB^list-typ*!plist-puzzl*n>3<ing:src=8iNeifiiPrciduet[0].alt=""gt-ap=-getDet&Ll(NewPrciduet[0],pld}*/>:f■大臼--，就卻僉可用振據(jù)蚩露好境.?耆需求<divui-fltx-wtfl<x-juEtif^-sb"><acliss-,,i?x"hir*?F”$t?p?l(MwPraduct[1),pid}'"s<in#:srx■咔「。如?lt?r,5clss5.-,,iwx!,hnf?-#,!p>l(MwPraduct[2],pidr^<i"S:*rc?,!W?i^roduct[21sime?■alt?,,r,<bclas^=iiilM(xiihref="?"^Uf^^getDetail^lleriFiraduct[3]np￡d}"Xiitg:src=iiNeHPraduct[3],Inage"占1W^/div></d￡v><imfclMSB^Inom-irngtifsre"^imf/lwMutita-jpf,!@lt?"/><divclws?-list"typ*iui-fl?Kfl?x-justify■sb">3時h「/F?"v-f4ir■"(rwwltfliipind*x)偵MWroduM”&&Md.邱7”>dugelBrM="fijsureliB:SH="iiMwIteu.alt^"^Bp=ll^eWetali(MeWPnMiiict[index].p￡d)*/>CftpAhAi=".pH，儺}}■<J坤島曲</*></div><div€l??SB'"li?t-typ?2;ui-fl?xfl<x-justify-sb"><>cla^sB^box'1h「?舟”v-for■"(nwltan.ind^jc)Ln機#ircMiii3”v-if?'ind*ic>T￡￡ind?NldL”>cirvgelaii=,,-F￡^ure*:are=!i.iriaf-e11p=h|：*tDetaii[Index].p￡d)*/>cspjnelfias=".pnarae})<y坤</a>idivclatsafashionui-lwxui-bard<r-t!,>Vclflii■"Iwi■inftit"sr-ca'ing/hOTttita-jpg'*lt?nn/>4n皿mirgin-b-t"時弓??叩1。*北川4卜加礦iditfthiiHwltB""/></?>^div￥■"f-plistnrwi-rgw!i></div></div>4fM風(fēng)蜻白m-nd..、<diwt■"imi-CU1-XE.-4"v-fQr?,!(bctlti"jinckx)偵HotPr?lLiG.tn曹?if?FrMkx>?G&&in蚯由■￡"，<aclasss^iten''^cinig:sre：11totlten.inagfr11■M=*eiass="i:￡^ure*訕4櫥=”30羅hei|：]it=li120pN*Ail{h6tlt?n.pidc&panelass=^tit"stylc="?iildir：darksrang*.pnane})</s.p&n>5*<dlvtl<s5="fliJi-esl-xs--4"w-foi!^"(tetltes3infex)￡nHatPr&duet"v-if=*irtafex>=3&Alntexc=5">5elnsis^itftn8^"嚇:src?"M-tltiii-witfttin!,3Wh?ij；：htB!!120px"gtipn，!j：<tDttijl(l*c!itIt<n.piciSrtylflBn?lQir:dftppinkj.">{(hotlttm.pn??t}}</?p?>n></#></div><divt■""iji-c#1-xe--4"v-fur""(IxjtltiRjin(idivclatsafashionui-lwxui-bard<r-t!,>Vclflii■"Iwi■inftit"sr-ca'ing/hOTttita-jpg'*lt?nn/>4n皿mirgin-b-t"時弓??叩1。*北川4卜加礦iditfthiiHwltB""/></?>^div￥■"f-plistnrwi-rgw!i><I--告門商品Sd-->

<sxrlpttypts^ttxt/jlitvtscrlpt41>t4p：jbaltAtfli'Spx'functiongetDetail[post_idl){if(!detailP'agt}(d?t?ilPngt=plusF^t-bviwif?tW?bvi-?wById(1d*t?i1htra14)jKWaui-4rire(det-ailPajejt4p：jbaltAtfli'Spx'functiongetDetail[post_idl){if(!detailP'agt}(d?t?ilPngt=plusF^t-bviwif?tW?bvi-?wById(1d*t?i1htra14)jKWaui-4rire(det-ailPajej1(*tPrtsduet1,■(pid:pest_id})■j,nu±.openkindewf(id['dEtail,hitml1});)}v*rftiUii.,pdiumn色(中LirietliShl)』})〕virind<xVui"ii<wVw?[(<1：^ttlnd^scCantiiinfl-r'=5，和produttPicj[]*Neta^roductr[].HctPr^uctt[]erftat-ed:-Funeti.ah(){miii-plu^Rtfdidy(-Funeti&n(){mu<￡-(eit75W("'http://www卜gifenquanz-honf?■t&p/shcsp/getPToductPic'jfwnctiflntebtflXindixViM-pr^ductPicdntvilictjf^r[v?ri■臼]i<lnd<x^u*.procIlLictPic-Itngthj,M+J(imdexM^uie?productPic[L]?image-"ht±p:/ganquianzh^njg?"top"^-Lndex^ue?produic±P±c[i].Lnage-j//candle.l?g(JSON.?trin<gi-Fy(indtexVKluctPLt));）；nivl?H，vl33CHC"'http://wwws.gibnquiinzhonj?■t&p/shop/gettifw^rcMiuicfjfunctiQnCdvit?>{jlidtKVirt-MfWpriMluctzdfltiiilist]；fi>r[v?ri■i<lnd<xVu*.N?w^radwet-l<ngth|i+^}(』nde犬Pu#?Ne^Prodiuct[1]?Jjnagt="htt.p:.^anqLMinzh<?ng?t.<jp"^LridexVue?NewProluct[1]|Lnd^e;//cflH3*le.l*g(3SON-itri(indtexVue.iMeriPradurt[0])H"http://M4?ganquanzbong.t&p/shcp/g&thtotPrcduct"*functionedata)(萩單熱門有品inMxVu4i.HotP廣。加匚■For〔UBiir￡=flj￡<ind?-x.HotPr^dmeit.length￡++)(irxhixVufl*HotProduct[i]+inag4?!!hittp;//wwsganquEinzh^ng-tflp"iirnlvxVut■HQtP「odm#t[i]+17/console.lag(}S(M.5trin￡ify(iradeKVue.HatPrD<luct[d])J;}，updat<d;function()'■-心[ywtllderMuiobj-g1<7wsJj?i-E；sllekrNu￡Obj.sl￡dfrr((int*rw?l：觀酣H；次由于％.楠堂爭同期b諛置肖就搶播富要我在叩新應(yīng)中②self.html個人信息，簡單的顯示一些個人信息;//http://http://ganquanzhong^top/shop/userinfo我職個人倍總mul^plusReady(function(){mui*get3S0N(1hBttp://ganquanzhong*1：Qp/shop/Liserlnfo1fiction(data){userVue<userlnfo=//console^log(3SON?tringify(userVue?oserlniFa))"I③其他的頁面和index.html頁面的構(gòu)建方法類似就不過于重復(fù)，下面重點介紹幾個H5plus的手機服務(wù)功能調(diào)用。HTML5Plus移動App，簡稱5+App，是一種基于HTML、JS、CSS編寫的運行于手機端的App，這種App可以通過擴展的JSAPI任意調(diào)用手機的原生能力，實現(xiàn)與原生App同樣強大的功能和性能。在移動購物APP中使用了較多的H5plus的功能，比如：第三方授權(quán)登錄、分享商品給好友、修改個人信息中的圖像（從手機中選擇圖片和調(diào)用手機攝像頭拍照）、打電話（點擊商家的電話號碼，調(diào)用手機的撥號功能、生成訂單時填寫收貨信息（可以顯示用戶的當(dāng)前位置）；不能不說H5plus的功能很強大，基本可以實現(xiàn)對手機各項從軟件到硬件的操作。下面就其中的幾個應(yīng)用做詳細的介紹：獲取位置服務(wù)調(diào)用手蛔隹電臥W耍毒凰尹墨黃的位崖宿彪<dlvflas^K^cohtahirktrfix皂daEtsrTt"ld?"lJd^C*rttainir"jejectionclass="to-buy"><header><divcl?E="wwa><span><liagsrc=1,l?ag4￡/tiap'lton.png"^tap="^hn/lap()"/></&pan>1Ctli:」I<dd>{(mapAddres5})-</dcl>~叩出也</dl?</div>varbuyVu-esnewVii€({eli調(diào)用手蛔隹電臥W耍毒凰尹墨黃的位崖宿彪<dlvflas^K^cohtahirktrfix皂daEtsrTt"ld?"lJd^C*rttainir"jejectionclass="to-buy"><header><divcl?E="wwa><span><liagsrc=1,l?ag4￡/tiap'lton.png"^tap="^hn/lap()"/></&pan>1Ctli:」I<dd>{(mapAddres5})-</dcl>~叩出也</dl?</div>varbuyVu-esnewVii€({eli■*dtbuyCantainerndata：{plus,B：eelacatian?Retturrentpo￡itian(f(pH//console.log(]SOH.strinjify(p));sddr?t*-p,Hddpro-vlnce+p卜>ddr?-city+p+4<ddre*g//cchniSQle?iQf(^ddrest};buiyVme■mapAddress^-address5mmui>plusReady(■function(){slhi?MMap()j；function北Ml叫G{蕤臀手規(guī)-備臥姓蚤服畚>7寂職用戶的偏置憎意一“Ge。L。］at讓n明只蕓界設(shè)吾仲茂侶燈.用1汨B!,史就乓，住度專//螃三方授極暨聚ittidi?AnitO3v^rdLitha=riLill^//Hfi5l?iJj6：var各口maLg//提戒禁SR眼務(wù)的K靠muil?plusHrady(fundtiorii()￡//藏職服擔(dān)藐取授叔職務(wù)}"http://避承方法MurielIonIsgln1(type)■￡//e&ns&1*.1*6("*?St3￡1?ifi,+type);for(viir1■0j1<Muths+l?n￡thji*+){//+"KSBKKH=B,+s+#w-thR?￥MIt)jif(Is+?urthR??uil±)(1.4.3if(Is+?urthR??uil±)(除了真機運行，我們還可以利用chrome和safari的開發(fā)者控制臺來調(diào)試5+App?？梢允褂谜鏅C插上數(shù)據(jù)線，也可以使用模擬器。所有人叫包括plus的各種api，甚至包括plus.ios和plus.android的原生對