使用HBuilderX打包移动端应用

一、什么是HBuilderX概述HBuilder是DCIou（数字天堂）推出的一款支持HTML5的Web开发IDE,而HBuilderX是新版的Hbuilder，简称HXHX的优势HX性能更强，启动速度、大文档打开速度、代码提示速度均极为流畅。HX的VUE语法提示、ES6语法提示支持更强大，应该是最强悍的vue提示工具。HX有内置终端，对于现代编译型语言的开发提供更强的支持。HX支持uni-app、小程序开发、快应用开发HX的markdown、json方面秒杀其他开发工具。HX新增了智能双击、更完善的多光标处理，可为极客提供更高效的操作。HX的缺点如果开发者使用jquery+php等技术栈，目前还是建议使用HBuilder。HBuilderX对这2块技术的支持不如HBuilder。二、下载安装HBuilderX

http://www.dcloud.io/hbuilderx.html他提供了各种版本下载，如下安装直接解压即可，然会找到其中可执行文件双击打开就能使用，也可以将其作为快捷方式发送到桌面上。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应^曲r雇4.533KQL3DfiGui.dll^019/3^1412^64,899KB'Qt5N^twDirk.dll2019/3/1412:36应眾■?穴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时注册过，那么可以直接使用此用户名和密码。入门注册后根据入门提示进行适合你的基础设置...三、新建移动端项目①文件--》新建--》项目---》5+app项目新建顷目HIML5+标准的诗平台App*［了锂圭瘩］O晉迢顶目凹OunLappttllOWap2ApptE)®5+App曲O4雀洋迪O快应用◎项目名称C:/Users/admin/Documents/HBuilderProjectsmui顷弓mui顷弓已包窖mui旳，、匚铠宇住删的顷目模痕原生违项卡示例.含t北口部凸担半區1示虫rtellnH5-rtellnH5-HTMLSPlus^范皓展示.刍佥国8；遥各扫底层乾力范羽弔QlHifc,*!ind-ix.htard-HBuidirX加IE）崭证J逅盹函自U6«血运&HJ疝山J ZRtU晤即乂vlescindQK>itmimjFillBStJSiJFicssirt^gJfi、SP就kd护QlHifc,*!ind-ix.htard-HBuidirX加IE）崭证J逅盹函自U6«血运&HJ疝山J ZRtU晤即乂vlescindQK>itmimjFillBStJSiJFicssirt^gJfi、SP就kd护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熬应常:征I览拿件菽主石诫用｝）;SSB^tiEOpLusisundafinad.i« </s£ri[pt>15</he-Bcl>L6曰uh口dy>IB</body>-</htnl>将你的网站代码放入5+app项目中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却。■冒丄<script -taxt/jatf^Ecript>设置应用入口页面地址/首页④设置app的一些其他信息这里各个部分都简单配置处理下，需要特别关注的如下：(1)应用标识(APPID)不同的app的应用标识不能相同，否则会被app认为是同一个app,然后安装时可能会覆盖安装。

(2)图标配置这里配置的图标就是我们在手机桌面中看到的图标.有iphone,ipad,android三种类型及各种尺寸的图标可以让你设置，当然，如果你嫌麻烦可以直接点击【自动生成所有图标并替换】就生成了各个设备上的图标了。点击【浏览生成图标所在目录还可以看到具体生成的文件】(3)启动图标当我们的app在手机上启动后显示的图标，也有iphone,ipad,android三种类型及各种尺寸的图标可以让你设置，还要注意一个启动时的基本选项。四、开始打包鼠标右键项目名--》发行---》云打包，打包原生安装包--》选择打包方式(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点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强氐5】"MUli-UH 阳旻聲An^dd口亡虺皿童呻Tftjk^JMJMaVWn.kjtifeb**q怕DXH^wQHtttiQfflJSg认湘GHI盘岗口HJ：：］；■耐!曲他亘IdmlF< 如；1rfaLtdSlj查看APP打包状态，打包完成后就能得到apk文件进行安装[HBuxldcr]16:02-31.965-目[HBuxldcr]16:02-31.965-目test[H5FC<01F56]EgJJ^KS[HBmilder]直;肋仙咖打创垢会官顽匪TFS诧矗，[HBmLldAr*]]fi!01W. 7-[HBid：]d.r] 璇壬世li号咚闺«打它枫尿调洞"？魚[MDulldcr]1C;B1旳，43如臬三方了三的DK闻近丙伺电旨建盘宜王f5?且迫行-手机如VU-易崔呂丘翌巴GE)TSSflJJQ.提示如果你要打包ios应用，但是有没有证书的话，只能打包越狱版本的app五、解决在手机上点击回退按钮问题在Hbuilder打包的app中，默认不管任何页面，只要点击了一次手机返回键，app就会直接退出，返回不了上一页。解决：在首页点击返回按钮不直接退出，而是询问用户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>解决：当首页时，用户一秒内连续点击两次才退出2.在首页处加上代码，做一个判断<scripttypg="t电x.t/javascript">document.addE\ientListener(^lusreadyFfurction(a){var*first=null;plus.key.addEventListener^'backbutton',function(){几首次按键，提示，再按一坎退出应用，if{!first){first=neuDate()■呂已tzTiniEf);console.log('再^一次退出应用■打"用自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(){〃首次按键，提示‘再按一次退出应用'if(!first){first=newDate().getTime();console.log('再按一次退出应用’);//用自定义toast提示最好，比如layer弹框setTimeout(function(){first=null;},1000);}else{if(newDate().getTime()-first<1000){plus.runtime.quit();}}},false);})；</script>解决：当非首页时，点击返回按钮回到上一页在非首页中加入如下代码，就可以回到上一页<5tripttype="text/javascriptM>document.addEucntListenep('pluspeady',functionQ{varwebview=plus.webview.currentWeb^iewO；.打获取_当前页面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();//获取当前页面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>

由于你的项目中可能有许多的页面都要使用此代码，所以我们可以把它单独封装在一个js文件中供相应页面进行使用。rinrt«ihljnl|vrebvitjfil»CiJ1r：-乂忤『wtbt酣12/events.htnl日拧■穿应.尸曲■卜ICsci^Lpttyf-*- dAa'ascript!-rinrt«ihljnl|vrebvitjfil»CiJ1r：-乂忤『wtbt酣12/events.htnl日拧■穿应.尸曲■卜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肌｛xiEoescr&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 [六、直接打包一个在线网站当我们进行打包时可以直接打包一个在线网站，在相应的输入框中填写网址就可以把一个在线网址打包为一个ap