使用HBuilderX打包移動端應(yīng)用

一、什么是HBuilderX概述HBuilder是DCIou（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE,而HBuilderX是新版的Hbuilder，簡稱HXHX的優(yōu)勢HX性能更強(qiáng)，啟動速度、大文檔打開速度、代碼提示速度均極為流暢。HX的VUE語法提示、ES6語法提示支持更強(qiáng)大，應(yīng)該是最強(qiáng)悍的vue提示工具。HX有內(nèi)置終端，對于現(xiàn)代編譯型語言的開發(fā)提供更強(qiáng)的支持。HX支持uni-app、小程序開發(fā)、快應(yīng)用開發(fā)HX的markdown、json方面秒殺其他開發(fā)工具。HX新增了智能雙擊、更完善的多光標(biāo)處理，可為極客提供更高效的操作。HX的缺點(diǎn)如果開發(fā)者使用jquery+php等技術(shù)棧，目前還是建議使用HBuilder。HBuilderX對這2塊技術(shù)的支持不如HBuilder。二、下載安裝HBuilderX

http://www.dcloud.io/hbuilderx.html他提供了各種版本下載，如下安裝直接解壓即可，然會找到其中可執(zhí)行文件雙擊打開就能使用，也可以將其作為快捷方式發(fā)送到桌面上。binSD119/3/11515:34iconengines^019/S/1i515：25im-sge+ormals20119/3/1515:15platformsM3115/3/1515:34plugins201I9/S/1515^5readme3019/3/1515:25H0uilderX.HH201W1412:367,131K0SHSuilderX.E-Jce2019/3/1412:362.812KB囤Iih=^a2.dll20119/3/1412:361.236IK口Li：：ENSE-MD2^19/3/1412；364KB_qtconf20119/3/1412:36CONFI<41KB@Qt5CDFE.dllSD119/3/1412:36應(yīng)^曲r雇4.533KQL3DfiGui.dll^019/3^1412^64,899KB'Qt5N^twDirk.dll2019/3/1412:36應(yīng)眾■?穴332KB@CMSvg.dll2019/3/1412:3&胡胡注250KB_Qt5WefcSockets.dll2019/2/2216:3210BK日■'Qt5V/idge-ts.dll2Dlig/a/U12:36鮭曲I1■晨4.J30KB|鮎OfiXml.dll^019/3/1412-36血14PK0Fielea&eNote.md20119/3/1412:3&md烹tt102KB■reset.bat￡0119/3/1412:36Windows知2理…3KBHE血即琵，劇12^19/3/1412^626BKB可uac.e-xe2019/3/1412:3&ZBKB1|(1|-|工"1?「fidK■口 v注冊

打開后可以簡單的注冊下,如果以前在使用Hbuilder時注冊過，那么可以直接使用此用戶名和密碼。入門注冊后根據(jù)入門提示進(jìn)行適合你的基礎(chǔ)設(shè)置...三、新建移動端項(xiàng)目①文件--》新建--》項(xiàng)目---》5+app項(xiàng)目新建頃目HIML5+標(biāo)準(zhǔn)的詩平臺App*［了鋰圭瘩］O晉迢頂目凹OunLappttllOWap2ApptE)?5+App曲O4雀洋迪O快應(yīng)用◎項(xiàng)目名稱C:/Users/admin/Documents/HBuilderProjectsmui頃弓mui頃弓已包窖mui旳，、匚鎧宇住刪的頃目模痕原生違項(xiàng)卡示例.含t北口部凸擔(dān)半?yún)^(qū)1示蟲rtellnH5-rtellnH5-HTMLSPlus^范皓展示.芻僉國8；遙各掃底層乾力范羽弔QlHifc,*!ind-ix.htard-HBuidirX加IE）嶄證J逅盹函自U6?血運(yùn)&HJ疝山J ZRtU晤即乂vlescindQK>itmimjFillBStJSiJFicssirt^gJfi、SP就kd護(hù)QlHifc,*!ind-ix.htard-HBuidirX加IE）嶄證J逅盹函自U6?血運(yùn)&HJ疝山J ZRtU晤即乂vlescindQK>itmimjFillBStJSiJFicssirt^gJfi、SP就kd護(hù)iJW0talA￡￡ZirtdeithmlmorikiflanzBChtral>曰<hi=ad><n?tachars?t?"Lrf-F--E"><netiifl3ffle=nvi&Mpor1'!content="dnitia1~5cile=1.rnaximun-scale=l,04user-5<iil#ble=^"/>S <titIt></tLtle>j?曰 <ecpipt七ypo-"七sort/jay：隘匚「1|3七?〉dc?■匚4ffw^t**ddEventLi.5tener（ep2u3-rc-ady1、/■waEtiwOf//cansolt-logC^fi-plus叩i熬應(yīng)常:征I覽拿件菽主石誡用｝）;SSB^tiEOpLusisundafinad.i? </s￡ri[pt>15</he-Bcl>L6曰uh口dy>IB</body>-</htnl>將你的網(wǎng)站代碼放入5+app項(xiàng)目中iiii也已lEi-Dna.rnnirnix.-trTi-■1.1-?-—rTuri^flal.riAn■：.1Mdy?</hitnl></script>c/haAd>-jddEy?ntListiMwrfplii￡.r&^dy'--fu^ctidruj.!f在此更三i□<hl：ril>imetscrflrsetxutf-B>^iTritdHi卻?！雒皝A<script -taxt/jatf^Ecript>設(shè)置應(yīng)用入口頁面地址/首頁④設(shè)置app的一些其他信息這里各個部分都簡單配置處理下，需要特別關(guān)注的如下：(1)應(yīng)用標(biāo)識(APPID)不同的app的應(yīng)用標(biāo)識不能相同，否則會被app認(rèn)為是同一個app,然后安裝時可能會覆蓋安裝。

(2)圖標(biāo)配置這里配置的圖標(biāo)就是我們在手機(jī)桌面中看到的圖標(biāo).有iphone,ipad,android三種類型及各種尺寸的圖標(biāo)可以讓你設(shè)置，當(dāng)然，如果你嫌麻煩可以直接點(diǎn)擊【自動生成所有圖標(biāo)并替換】就生成了各個設(shè)備上的圖標(biāo)了。點(diǎn)擊【瀏覽生成圖標(biāo)所在目錄還可以看到具體生成的文件】(3)啟動圖標(biāo)當(dāng)我們的app在手機(jī)上啟動后顯示的圖標(biāo)，也有iphone,ipad,android三種類型及各種尺寸的圖標(biāo)可以讓你設(shè)置，還要注意一個啟動時的基本選項(xiàng)。四、開始打包鼠標(biāo)右鍵項(xiàng)目名--》發(fā)行---》云打包，打包原生安裝包--》選擇打包方式(ios/android)a?^phti.h^nl<o*S.Wi? 3電1J誨曹iTihliliHJ.,Vdi8a?^phti.h^nl<o*S.Wi? 3電1J誨曹iTihliliHJ.,Vdi8htt^-eculg^r?etanzncJRfi10日 typG^'l11fuifrctlan-hi12cj——IS?11nkhr*T-,,e-it1*■clinkhref—*cas1J<llnkrel-"4tr1IE點(diǎn)inkntl-1st/>I?TihkIB<!—-gallerv=IS2D<!?葉膽LLrry；Z1?!—fmt-H^M■cilnhhn(iT-"csiS3?linkhref^'htt阿1??||>宅/10125彗27<!?bann^F&r—]3DcflivM3Z<dltfCld33=訂vill>1?-o'riRMwI[]nuifuL|Kn■n7i■刃FkthVhiriljiSnAfam|HEh-ridtar'i22XK.-：HLiE3xiliai'HSfl?W4ra]41fertJt元討€甸BH陽下!EB;W:畑曲血用rm屮、2強(qiáng)氐5】"MUli-UH 陽旻聲An^dd口亡虺皿童呻Tftjk^JMJMaVWn.kjtifeb**q怕DXH^wQHtttiQfflJSg認(rèn)湘GHI盤崗口HJ：：］；■耐!曲他亙IdmlF< 如；1rfaLtdSlj查看APP打包狀態(tài)，打包完成后就能得到apk文件進(jìn)行安裝[HBuxldcr]16:02-31.965-目[HBuxldcr]16:02-31.965-目test[H5FC<01F56]EgJJ^KS[HBmilder]直;肋仙咖打創(chuàng)垢會官頑匪TFS詫矗，[HBmLldAr*]]fi!01W. 7-[HBid：]d.r] 璇壬世li號咚閨?打它楓尿調(diào)洞"？魚[MDulldcr]1C;B1旳，43如臬三方了三的DK聞近丙伺電旨建盤宜王f5?且迫行-手機(jī)如VU-易崔呂丘翌巴GE)TSSflJJQ.提示如果你要打包ios應(yīng)用，但是有沒有證書的話，只能打包越獄版本的app五、解決在手機(jī)上點(diǎn)擊回退按鈕問題在Hbuilder打包的app中，默認(rèn)不管任何頁面，只要點(diǎn)擊了一次手機(jī)返回鍵，app就會直接退出，返回不了上一頁。解決：在首頁點(diǎn)擊返回按鈕不直接退出，而是詢問用戶1.在首頁處加上代碼，做一個判斷<5crip±<5crip±type=11text/javascript">document.addEuentListener('plusread^1,function(町町varfirst=null\pljs.key.addEventListener(1backbuttan1jfunction{){Ivar-flag=wfirin("你確定要退出嗎？11if(iFlag){plus?runtj.iii巳//退出|} hfalse)；</scnipt><script<scripttype="text/javascript">document.addEventListener('plusready',function(a){varfirst=null;plus.key.addEventListener('backbutton',function(){varflag=confirm("你確定要退出嗎？”)；if(flag){plus.runtime.quit();//退出}},false);});</script>解決：當(dāng)首頁時，用戶一秒內(nèi)連續(xù)點(diǎn)擊兩次才退出2.在首頁處加上代碼，做一個判斷<scripttypg="t電x.t/javascript">document.addE\ientListener(^lusreadyFfurction(a){var*first=null;plus.key.addEventListener^'backbutton',function(){幾首次按鍵，提示，再按一坎退出應(yīng)用，if{!first){first=neuDate()■呂已tzTiniEf);console.log('再^一次退出應(yīng)用■打"用自as七提示最好，bt^Qlayer彈框setTimeout(function(}{first=null;}』leea);}else{if(neuDate().getTime()-first<10Q&){plus.runtime.quit0；}}false);<scripttype="text/javascript">document.addEventListener('plusready',function(a){varfirst=null;plus.key.addEventListener('backbutton',function(){〃首次按鍵，提示‘再按一次退出應(yīng)用'if(!first){first=newDate().getTime();console.log('再按一次退出應(yīng)用’);//用自定義toast提示最好，比如layer彈框setTimeout(function(){first=null;},1000);}else{if(newDate().getTime()-first<1000){plus.runtime.quit();}}},false);})；</script>解決：當(dāng)非首頁時，點(diǎn)擊返回按鈕回到上一頁在非首頁中加入如下代碼，就可以回到上一頁<5tripttype="text/javascriptM>document.addEucntListenep('pluspeady',functionQ{varwebview=plus.webview.currentWeb^iewO；.打獲取_當(dāng)前頁面plus.key.addEveritListensr('b日匚kbutton'jfunctionOfwebview,canBaclcffiineti&n(e){if(e-canBack){alert("即將回到上一頁”)view?b辺匚k();}else0webview.clos&();//hide//plus,runtime,quit();//(]iuit|})})；n；</script><scripttype="text/javascript">document.addEventListener('plusready',function(){varwebview=plus.webview.currentWebview();//獲取當(dāng)前頁面plus.key.addEventListener('backbutton',function(){webview.canBack(function(e){if(e.canBack){alert("即將回到上一頁")webview.back();}else{webview.close();//hide,quit//plus.runtime.quit()；//quit}})});});</script>

由于你的項(xiàng)目中可能有許多的頁面都要使用此代碼，所以我們可以把它單獨(dú)封裝在一個js文件中供相應(yīng)頁面進(jìn)行使用。rinrt?ihljnl|vrebvitjfil?CiJ1r：-乂忤『wtbt酣12/events.htnl日擰■穿應(yīng).尸曲■卜ICsci^Lpttyf-*- dAa'ascript!-rinrt?ihljnl|vrebvitjfil?CiJ1r：-乂忤『wtbt酣12/events.htnl日擰■穿應(yīng).尸曲■卜ICsci^Lpttyf-*- dAa'ascript!-sr-i-'Js.3s"*></script>.Jj.lb.4bi]/-Busnik.htn]円擰■完hi-rqbfEUknLiKMLW-O^Tlip.r：'ni^nfarr^SSiyrpH e**|p4rd*qjiL^-^-2.'i."inh14Ld-Ci^f-iuTIv^iA?丄1：』匚丄LiV-?-iJrwri^Cr'lpE?AddEvfilWCLiiTiMMr\Lurid.furiLE'im()-iAlfiriAiXiI(rnOwUR.「WKtiain悶J?。鹸iEoescr&LJTnlVi.JJ:t"rdDt、|^><：4匸?圧I.^CdEmAiiILJ^LiJiWiI■Lluni"ucbuiiu-pLuc.w?3nj3.Hhi.cunn*ntWHbvL-iui,J;::pt1/3kity..rtdtvefwtListc-ner('Mckixrtton'rfwrTct-ionlJ■；u?bvi4M.￡icw&ia:Iit [六、直接打包一個在線網(wǎng)站當(dāng)我們進(jìn)行打包時可以直接打包一個在線網(wǎng)站，在相應(yīng)的輸入框中填寫網(wǎng)址就可以把一個在線網(wǎng)址打包為一個ap