hbuilder创建app并利用真机运行调试

时间:2024-03-23 06:56:30

        目前开发app有原生开发和web开发两种方式,各有各的优势和劣势,利用web技术开发app可以只用写一套代码,即可以在Android和ios同时应用,比较方便和快捷,有很多中不同的开发方式,例如cordova打包vue、阿里weex框架打包以及hbuilder打包等等方式。本文介绍利用hbuilder建立一个简单的app项目。

        首先要下载安装Hbuilder、不需要配置任何环境,就可以开始建立项目了。

一、创建项目

点击文件、新建、移动app、就会出现以下界面:

hbuilder创建app并利用真机运行调试

可以先选择hello mui看一下实例。然后点击完成

创建成功后项目结构如下图所示:

hbuilder创建app并利用真机运行调试

这是一个已经创建好的实例、上面有很多例子可供参考


二、运行

        hbuilder的app可以在真机上运行,所以我们需要将手机连上电脑,这里介绍的是Android的手机。

1、将手机的开发者模式打开

若找不到开发者模式选项,连续点击版本号多次,则可显示开发者模式选项。

然后进入、选择USB调试,若有监控ADB需要在充电时允许ADB调试,否则将无法连接

hbuilder创建app并利用真机运行调试

2、在电脑上安装手机驱动

安装手机驱动可以利用驱动助手、360手机驱动等等。当确保这些应用可以连接上手机即可。

3、当驱动安装好并将手机连接上电脑,hbuilder会自动检测是否已经连接手机,这时若手机出现是否允许USB调试则表示已经成功了,点击确定即可。

hbuilder创建app并利用真机运行调试

4、运行app、点击运行、真机运行、选择自己的手机就可以了。

当手机上出现欢迎界面则表示运行成功了。

点击立即体验进入后可以看到它的很多例子如下:

hbuilder创建app并利用真机运行调试


三、调试

        利用hbuilder开发手机app有一大好处就是可以即时调试并显示在手机上,当你改变了某个页面的css、js保存后它像我们开发web一样马上就显示出来,这样可以避免开发后打包、然后真机调试、若出现问题需要改了再打包再调试的麻烦。所以如果我们需要修改css、js、添加html等等,只需要写完保存、然后在手机上查看就可以了。

        我们利用hbuilder调试app的时候,有一个最大的问题就是不能看到后台输出,但是hbuilder也帮我们解决了这个问题。在右上角有一个调试:

hbuilder创建app并利用真机运行调试

选择webView调试模式,打开后可以看到我们正在运行的页面。

hbuilder创建app并利用真机运行调试

点击调试进入,就可以看到我们平时用web开发的控制台输出了,如下:

hbuilder创建app并利用真机运行调试