使用HBuilderX打包移动端应用.docx

使用HBuilderX打包移动端应用.docx

《使用HBuilderX打包移动端应用.docx》由会员分享，可在线阅读，更多相关《使用HBuilderX打包移动端应用.docx（14页珍藏版）》请在冰豆网上搜索。

使用HBuilderX打包移动端应用

1、什么是HBuilderX

概述

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE,而HBuilderX是新版的Hbuilder，简称HX

HX的优势

1.HX性能更强，启动速度、大文档打开速度、代码提示速度均极为流畅。

2.HX的VUE语法提示、ES6语法提示支持更强大，应该是最强悍的vue提示工具。

3.HX有内置终端，对于现代编译型语言的开发提供更强的支持。

4.HX支持uni-app、小程序开发、快应用开发

5.HX的markdown、json方面秒杀其他开发工具。

6.HX新增了智能双击、更完善的多光标处理，可为极客提供更高效的操作。

HX的缺点

如果开发者使用jquery+php等技术栈，目前还是建议使用HBuilder。

HBuilderX对这2块技术的支持不如HBuilder。

2、下载安装HBuilderX

下载

http:

//www.dcloud.io/hbuilderx.html

他提供了各种版本下载，如下

安装

直接解压即可，然会找到其中可执行文件双击打开就能使用，

也可以将其作为快捷方式发送到桌面上。

注册

打开后可以简单的注册下,如果以前在使用Hbuilder时注册过，那么可以直接使用此用户名和密码。

入门

注册后根据入门提示进行适合你的基础设置...

3、新建移动端项目

1　文件--》新建--》项目---》5+app项目

2　将你的网站代码放入5+app项目中

3　设置应用入口页面地址/首页

4　设置app的一些其他信息

这里各个部分都简单配置处理下，需要特别关注的如下：

（1）应用标识（APPID）

不同的app的应用标识不能相同，否则会被app认为是同一个app,然后安装时可能会覆盖安装。

（2）图标配置

这里配置的图标就是我们在手机桌面中看到的图标.

有iphone,ipad,android三种类型及各种尺寸的图标可以让你设置，

当然，如果你嫌麻烦可以直接点击【自动生成所有图标并替换】

就生成了各个设备上的图标了。

点击【浏览生成图标所在目录还可以看到具体生成的文件】

（3）启动图标

当我们的app在手机上启动后显示的图标，也有iphone,ipad,android三种类型及各种尺寸的图标可以让你设置，

还要注意一个启动时的基本选项。

4、开始打包

鼠标右键项目名--》发行---》云打包，打包原生安装包--》选择打包方式（ios/android）

查看APP打包状态，打包完成后就能得到apk文件进行安装

提示

如果你要打包ios应用，但是有没有证书的话，只能打包越狱版本的app

5、解决在手机上点击回退按钮问题

在Hbuilder打包的app中，默认不管任何页面，只要点击了一次手机返回键，app就会直接退出，返回不了上一页。

解决：

在首页点击返回按钮不直接退出，而是询问用户

1.在首页处加上代码，做一个判断

document.addEventListener（'plusready',function（a）{

varfirst=null;

plus.key.addEventListener（'backbutton',function（）{

varflag=confirm（"你确定要退出吗？

"）;

if（flag）{

plus.runtime.quit（）;//退出

}

},false）;

}）;

解决：

当首页时，用户一秒内连续点击两次才退出

2.在首页处加上代码，做一个判断

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）;

}）;

解决：

当非首页时，点击返回按钮回到上一页

在非首页中加入如下代码，就可以回到上一页

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

}

}）

}）;

}）;

由于你的项目中可能有许多的页面都要使用此代码，所以我们可以把它单独封装在一个js文件中供相应页面进行使用。

6、直接打包一个在线网站

当我们进行打包时可以直接打包一个在线网站，在相应的输入框中填写网址就可以把一个在线网址打包为一个app.

7、在手机上调试你的app

流程（以安卓手机为例）

1.打开你手机的开发者选项

直接在XX上搜索你的品牌手机如何打开开发者选项，例如：

【小米手机打开开发者选项】

2.打开开发者模式，打开usb调试，usb安装等

我这是小米手机上显示的样式，其他手机显示的界面不能略有不同，

记住：

usb调试，usb安装是一定要勾选的，不然打包会失败

3.将你的手机链接上电脑

可以通过usb线或者wifi将你的手机链接到电脑上（也可以直接使用360手机助手等软件）

4.让程序在手机上运行

手机连山电脑后，重启下你的HbuilderX。

然后点击：

运行--》运行到手机或模拟器---》选择你的手机运行程序

或者点击按钮：

5.让程序在手机上运行

这时，Hbuilder可能会自动的在你的手机上安装，【HBuilder调试基座】，这是请认真的盯着你的手机，一旦看到显示出了相应弹框，就点击同意，然后等他安装好后就会自动的将手机app运行在你的手机上。

6.手机电脑实时更新

一切ok后，你在电脑山修改相应代码，手机就会自动的改变了。

7.真机运行、手机运行、真机联调常见问题

8、远程升级APP（使用ajax）