HBulider创建、发布H5移动应用

HBulider是一款基于Eclipse的IDE，兼容Eclipse插件，拥有完整的语法提示和代码输入法、代码块等，对于Web应用开发十分方便，同时HBulider内置了HTML5模板和MUI框架，可以十分快捷的创建H5移动应用。
本文使用HBulider创建一个H5移动应用，包含摄像头调用、二维码扫描、文件上传、本地文件系统、本地存储等功能，并在HBulider进行真机调试，最后生成离线资源并使用Eclipse编译Android安装包。

环境 版本 计算机操作系统 Windows 10 手机操作系统 Android 7.0 编译器1 HBulider 8.0.2 编译器2 Eclipse 2014

---

使用HBulider创建H5移动应用

打开HBulider，打开文件>新建>移动APP。

在创建移动APP的窗口有多个选项：空模版、mui项目、mui登录模板、Hello H5+、Hello mui。其中Hello H5+是HTML5Plus的演示示例，加速传感器、摄像头、音频等示例均可以找到。Hello mui是MUI前端框架的演示示例，无需前端设计师就能创建一个外观不错的移动APP。

这里选择mui登录模板创建一个移动APP，此时项目中已经包含了mui的js、css、字体资源。

使用HBulider编辑、调试H5移动应用

使用HBulider创建的H5移动应用需要连接手机进行真机调试或使用Android模拟器进行调试，这点和Eclipse是一样的。将手机连接到计算机上，同时启用手机的USB调试模式。在HBulider中选择运行>手机运行>在[XX]设备上运行[XX]，查看真机运行效果。注意只有手机正常连接时此选项才可用。

可以看到真机运行界面中，登录界面除了普通的账号、密码登录外，还集成了微信、QQ和新浪微博的授权登录选项。在这个示例中并不需要第三方授权登录，所以这部分不多赘述。用户登录的相关代码在js文件夹下的app.js中，根据自己的业务逻辑修改即可。

在login.html的js代码中可以看出，登录成功页面跳转至页面main.html。

此外我又分别创建了Hello H5+示例应用和Hello mui示例应用，参考这两个示例的代码分别为自己的移动应用进行页面布局和手机硬件交互。由于在真机调试过程中添加断点调试比较麻烦，所以在js代码中console.log()命令输出调试结果到控制台，HBulider可以看到相应的输出结果。此外真机调试过程中如果修改代码后保存，手机中的页面会同步刷新。

使用Eclipse打包H5移动应用

移动应用编辑和调试完毕后，下一步就是打包发布了。HBulider本身提供的云端打包的功能，但用过后发现等待时间太长，需要排队。所以还是采用Eclipse打包，而HBulider也是可以将项目发布成本地打包资源的。在HBulider中选择发行>生成本地打包App资源。

HBulider会在指定目录下生成一个www文件夹，包含了App所需的资源、页面等。

在www文件中包含了一个文件mainfest.json，这个文件的作用等同于使用Eclipse创建移动App项目时的AndroidMainfest.xml文件，但mainfest.json不能自动转换成AndroidMainfest.xml，所以发布时需要根据mainfest.json中的配置选项手动修改AndroidMainfest.xml中的配置项。
详细过程可以参考HBulider官方文档：

Android本地打包指南

参考官方文档可以使用Eclipse创建一个最简单的移动App。打开Eclipse（最好一并把Android运行环境配置好），选择File>New>Android Application Project。这点和HBulider没什么区别，毕竟它俩内核一样。

在项目的MainActivity.java文件中添加WebView控件，这样就可以访问web应用了。比如使用IIS或TomCat发布的web应用，只需要将WebView的地址指向web应用即可，这时的app项目实质上只是一层“壳”，并无任何实质内容，仅仅是一个浏览器。当然也可以将移动App的相关资源放到项目的assets文件夹下，然后将WebView的地址指向本地assets文件下的起始页即可。

import android.app.Activity;import android.os.Bundle;import android.view.KeyEvent;import android.view.Window;import android.webkit.WebChromeClient;import android.webkit.WebView;import android.webkit.WebViewClient;public class MainActivity extends Activity {    /** Called when the activity is first created. */    private WebView webview;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);         setContentView(R.layout.activity_main);        webview=(WebView)findViewById(R.id.webview);        //设置WebView属性，能够执行JavaScript脚本        webview.getSettings().setJavaScriptEnabled(true);        //设置渲染（必须）        webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);        webview.setWebChromeClient(new WebChromeClient());        //加载URL内容        webview.loadUrl("http://192.168.1.1:8080/");        //设置web视图客户端        webview.setWebViewClient(new MyWebViewClient());    }    //设置回退    public boolean onKeyDown(int keyCode,KeyEvent event)    {            if((keyCode==KeyEvent.KEYCODE_BACK)&&webview.canGoBack())            {                    webview.goBack();                    return true;            }            return super.onKeyDown(keyCode,event);    }    //web视图客户端    public class MyWebViewClient extends WebViewClient    {            public boolean shouldOverviewUrlLoading(WebView view,String url)            {                    view.loadUrl(url);                    return true;            }    }}

---

由于本人主要从事.NET开发，几乎没有Java开发经验，所以本文中很多细节没有详细描述，谬误之处，还望海涵。同时感谢公司多位同事的大力协助！