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

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

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

一、创建项目

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

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

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

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

二、运行

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

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

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

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

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

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

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

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

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

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

三、调试

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

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

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

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