HBuilder X 集成vue项目到5+APP中，运行打包测试发布

1.以下内容借鉴自https://www.cnblogs.com/taohuaya/p/10263519.html

一：打包vue项目

二：在HBuilder X 点击新建，选择5+app项目，新建后把vue打包的项目dist下的

static和index.html 复制到新建的app项目下

三：manifest.json,项目配置

配置完成后点击运行，可以用模拟器运行，也可以手机

安卓安装一个360手机助手，连接手机，然后点击运行，选择运行手机或者模拟器，会看到手机型号，点击即可

苹果安装istule,连接手机，同上

测试完成后，选择发行，先使用云打包测试下，云打包只能下载五次，打包成功后会返回一个下载连接，在手机浏览器打开连接，进行下载，此过程苹果可能会失败

安卓端手机返回按键直接退出处理

/**
 * 解决hbuilder打包app之后点击手机返回键直接退出app的
 */
document.addEventListener('plusready', function () {
  var webview = plus.webview.currentWebview();
	webview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}});//设置Webview窗口的回弹效果
	var first = null;
  plus.key.addEventListener('backbutton', function () {
    webview.canBack(function (e) {
      if (e.canBack) {// 获取Webview窗口是否可后退 ，可后退时
        webview.back();
      } else {
				console.log("不可回退");
        // 处理逻辑：1秒内，连续两次按返回键，则退出应用；
				if (!first) {// first没有值时
				  first = new Date().getTime();
				  console.log('再按一次退出应用') // 此处可以用自定义提示
					toast({content:"再按一次退出应用",duration:1000});
				  setTimeout(function () {
				    first = null
				  }, 1000)
				} else {
				  if (new Date().getTime() - first < 1500) {
				    plus.runtime.quit()
				  }
				}
      }
    })
  })
});

 

 

以下为摘抄内容怕以后不好找，

开始使用 HBuiderX 打包

 

 

 

 

 这是我vue 项目打包后的dist 文件。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 设置沉浸状态栏：（什么是沉浸状态栏和设置方法 请移步： http://ask.dcloud.net.cn/article/32  地址里的  http://ask.dcloud.net.cn/article/1150）

 上图中添加位置的代码：

        "statusbar": { //应用可视区域到系统状态栏下透明显示效果
            "immersed": true
        },