目前开发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开发的控制台输出了,如下: