试用HBuilder编辑H5移动开发

HBuilder快速搭建H5+应用

个人分类： 移动开发
一、环境搭建

1.安装HBuilder

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。

它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。

利用HBuilder可以快速的搭建与H5+应用和原生APP进行交互

从官网下载 HBuilder

这里写图片描述

点击下载即可下载安装

2.安装Java环境

由于HBuilder是基于java开发的所以需要安装java JDK

安装 java JDK

具体参考以上步骤即可安装

3.新建H5+应用

1.文件——>2.新建——>3.移动APP——>4.选择模板Hello H5+

以上操作完成后就可以生成一个带有H5+全部交互案例的App应用了

可以简单的看下生成的的H5+应用的结构

aduio目录存放的是音频资源、css目录存放css文件、doc文件夹存放Html文档页面、img目录存放图片资源、js目录存放js文件、plus目录就是页面Html文件所在了、upackage存放打包后的文件

index.html主页面(入口)

manifest.json包含这个应用的所有配置信息，包括指定主页面，打包app名称。。。等配置

其实说白了，我们看到的生成的这个H5+项目就是一个前端页面

其实我们利用HBuilder开发跨平台应用只需要像开发前端一样开发HTML页面就可以了，打包发布时HBuilder会全部帮我们完成。

4.调试H5+应用

将手机连接电脑，手机必须打开 开发者模式

手机连接电脑后

选择 1.运行——>2.手机上运行

也可以使用模拟器运行

具体参阅 如何安装配置手机模拟器

5.发布H5+应用

可以将在HBuilder中将H5+应用发行为Android应用或IOS应用

选择 1.发行–>2.发行原生安装包

将相关参数填写好，就可以进行云端打包了。

可以查看打包状态

打包完毕后，下载到手机安装即可。