70-webApp打包：将网站利用hbuilder打包为安卓app

感觉现在开发网页比写安卓应用简单多了，至少对我是这样，我安卓跟没学一样，于是在某次需求中需要写个简单的APP,我就想能不能弄成网页的，网页做出手机版，用手机访问不就是app了吗？于是去网上找了下资源，发现Hbuilder 还真可以这样做，它自动可以生成一套关于App的配置文件，你改了url让他默认访问到你网站的主页即可，一切如此美好。

本文提纲：

介绍实用Hbuilder打包成安卓app的详细过程。

详细内容：

1.首先你得有Hbuilder软件，可以去官网下载，地址；

2.安装后如果先要打包app,是需要注册一个账号的；

3.创建一个项目，新建移动APP项目，这里介绍两种选择的结果，

一种是选择空模板（如果只是想为自己的网页封装成app，推荐这个）；

一种是选择hello H5+模板（自带的模板跑起来效果很好，介绍了可以实现的所有功能，想系统的学的可以看看）。

3.1 如果选择hello H5+, 他会默认帮你生成一个模板，当然如果实用他生成的模板，他里面会带很多东西，你可以跑下它玩玩，

自动生成的文件是完善的，但是manifest.json可能会报错，因为你没有填写app的数据信息，在应用信息里面获取appid, 填入响应的sdk配置，其它没有的参数可以将选中的勾去掉，暂时不用那些权限。

之后就可以发行了：

一路默认即可完成，最后生成的apk在项目的unpackage目录下，发送到手机，安装测试即可。

3.2 如果选择空模板，生成的项目框架，进行封装也很简单：

但是需要修改index.html文件，添加内容的目的是保证，app运行后，直接打开我们的web主页，并且手机的返回键能起作用。

将index.html中的js部分内容替换为下面内容：

<script type="text/javascript">document.addEventListener('plusready', function() {var page = plus.webview.create("http://10.139.250.130:8080/MyWords/index", "main")page.show();ws = plus.webview.currentWebview();// Android处理返回键plus.key.addEventListener('backbutton', function() {('iOS' == plus.os.name) ? plus.nativeUI.confirm('确认退出？', function(e) {if(e.index > 0) {plus.runtime.quit();}}, null, ['取消', '确定']): (confirm('确认退出？') && plus.runtime.quit());}, false);});</script>

如果你直接打包还会有问题，就是只在主页面时，手机的返回键有用，其他界面不行，所以需要在每个web页面添加一个js函数，我是直接写了一个js文件，名为：appreturn.js，然后引入到每个web页面（<script src="${pwd }/static/app/js/appreturn.js"></script>），appreturn.js中内容如下：

    document.addEventListener("plusready", function() { // 注册返回按键事件 plus.key.addEventListener('backbutton', function() { // 事件处理 window.history.back();}, false); });

4.提示，软件的名称启动图片、软件图标都可以在manifest.json文件中根据自己的需要设置。

至此，应该可以将网站转为APP了吧，反正我认为写web比写安卓爽多了！！！

下面给一个我打包的例子吧，如果有需要可以看看，里面就是我上面的写的两种模板的代码，基本就改了一点点index.html中js内容。下载地址（csdn默认积分，没积分可以下方留言留下邮箱地址）

如果有什么问题，欢迎下面留言评论！