使用HBuilder将Vue开发的WebApp打包为App

众所周知，前端开发的webapp只能在浏览器上运行，这对运行环境有一定的限制，即在除浏览器外的其他环境中不支持；现在如果有这样的需求怎么办？需要一组在三端运行的代码吗？三端操作（黑面？？）是的，三端操作是web端、Android端和IOS端；不要担心不可能或不可能，用HBulder来尝试；

HBuilder是一个Web开发IDE，支持DCloud（数字天堂）推出的HTML5。HBuilder是使用Java、C、Web和Ruby编写的。HBuilder本身的主体是由Java编写的。它基于Eclipse，因此自然与Eclipse插件兼容。HBuilder实际上只是一个具有丰富语法库、对Vue的友好支持、轻量级工具和强大功能的编辑器；

官方网站地址：

首先，让我们做一些准备：

下载HBuilder并安装

用webpack打包开发的webapp

下载360手机助手，并将其安装在手机上，以查看打包后的效果

1.首先，我们得到我们的网络App并运行它。确认没有异常后，我们使用webpack进行打包。webpack打包后，它将生成dist/directory（根据webpack命名，包括index.html和static/directory）

2.打开HBuilder，单击“文件”-“新建”-“移动App”，创建一个空白模板的移动App；

形象

3.创建一个空白的移动App模板后，我们可以看到我们的文件夹路径更改为此（您可以删除css、js、img和其他文件夹）

形象

4.复制所有索引。npm生成的html内容运行build（打包后）到Hbuilder html的索引中，并将生成的static/目录复制到Hbuilder的项目目录中。此时，我们的目录结构如下：

形象

5.在索引中打开对静态的引用。html，并删除后面的“/”=

形象

6.单击浏览器运行，查看是否有异常。如果没有例外，我们将继续前进；HBuilder支持云打包和离线打包。本文将只讨论云打包

7.右键单击项目文件夹--发布--单击云打包--点击本机安装包，并根据所需版本（Android和IOS）进行打包

形象

8.无论提示信息如何，直接点击确认没有缺少权限，继续打包

形象

9.提交到云后，直接单击“确定”以准备安装包。这里可能需要两三分钟。请耐心等待包裹完成

形象

形象

10.单击手动下载下载我们的打包APK

形象

11.这里我们可以使用手机模拟器来安装apkApp，也可以使用360移动助手来安装。让我们谈谈360移动助手的安装：管理我的手机--安装本地App--选择要安装的apk，然后安装它；事实上，360助手只是一种手段，专注于APK。当然，你可以通过微信助手发送APK手机安装；

12.这是打包后的App。它运行平稳，占用大量内存。包装后，仅使用30+M；功能正常，但布局比webapp略大，可以忽略（图像效果是截图，所以有点挤压，打包后正常）

形象

要解决在HBuilder中打包App后点击物理键直接退出App的问题（这里，我们要感谢@的建议和解决方案，这些建议和解决方法可用于个人测试）：

/**

*hbuilder打包App后，单击手机返回按钮直接退出App

*/

文件addEventListener（'plusready'，函数（）{

//获取当前页面所属的Webview窗口对象

var webview=plus.webview.currentWebview（）；

//注册返回键事件

plus.key。addEventListener（'backbutton'，函数（）{

网络视图。canBack（函数（e）{

//获取当前url

var文件名=位置。href；

//捕获当前文件名

filename=filename.substr（filename.lastIndexOf（'/'）+1）；

//文件名比较，仅在主页和登录页面

如果（filename==“user_login”| | filename=“”）{

//在主页或登录页面上，按物理键返回并单击“确定”直接触发关机

如果（窗口确认（“退出？”）{

//关闭网络视图窗口

webview.close（）；

返回true；

}其他{

返回false；

}

//不要在主页和登录页面上返回物理密钥

}其他{

webview.back（）；

}

})

});

});

在项目中使用：我们只需要在项目中创建一个单独的js文件，然后将该文件导入main.js