HBuilderX 打包 vue 项目生成 apk

首先打包你的 vue 项目生成 dist 文件夹。

注意：请确保将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，打包生成的 dist 文件。

开始使用 HBuiderX 打包。（工具下载地址：http://www.dcloud.io/）

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

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

上图中添加位置的代码：

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

解决打包成App后，单击手机返回键退出应用的bug。（可以直接把这段代码放到你vue项目中，重新打包，再放回来，也可以直接修改这个index.html）

上图中的代码：

<script type="text/javascript">//如下代码主要是解决, 打包后的app点击返回键直接退出的bug./* 自己写的 toast 提示框 *///下面用的是调的 Android 自身的 toast方法。 我把我自己写的toast 注释掉 /* let flag = false;function toast(tip){if(flag) return;let oDiv  = document.createElement('div');let oBody = document.getElementsByTagName('body')[0];oDiv.innerText = tip;oDiv.style.background = 'rgba(50, 50, 51, 0.88)';oDiv.style.color = '#fff';oDiv.style.textAlign = 'center';oDiv.style.fontSize = '14px';oDiv.style.lineHeight = '30px';oDiv.style.width = '200px';oDiv.style.borderRadius = '4px';oDiv.style.position = 'fixed';oDiv.style.left = '50%';oDiv.style.transform = 'translateX(-50%)';oDiv.style.bottom = '100px';oDiv.style.zIndex = '1000';oBody.appendChild(oDiv);flag = true;setTimeout(function(){oBody.removeChild(oDiv);flag = false;},1000);}*//* 自己写的 toast 提示框---END--- */document.addEventListener('plusready', function(a) { //等待plus ready后再调用5+ API：在这里调用5+ APIvar first = null;plus.key.addEventListener('backbutton', function() { //监听返回键//首次按键，提示‘再按一次退出应用’if (!first) {first = new Date().getTime(); //获取第一次点击的时间戳// console.log('再按一次退出应用');//用自定义toast提示最好// toast('双击返回键退出应用'); //调用自己写的吐丝提示 函数plus.nativeUI.toast("双击退出", {duration:'short'}); //通过H5+ API 调用Android 上的toast 提示框setTimeout(function() {first = null;}, 1000);} else {if (new Date().getTime() - first < 1000) { //获取第二次点击的时间戳, 两次之差 小于 1000ms 说明1s点击了两次,plus.runtime.quit(); //退出应用}}}, false);});
</script>

HBuilderX 打包 vue 项目生成 apk相关推荐

vue项目打包wap2app项目生成apk保姆级教程适合新手看，建议收藏
一.需要提前准备的有: 1.已部署到云端的网站+域名 2.下载软件HBuilder X, 下载地址官网. 3.创建项目重要的配置部分来了二.部分配置修改问题1:如果你的网站没有事先为顶部预留安全 ...
解决使用HbuilderX打包vue项目后，按物理返回键直接退出程序的问题
使用场景:老总让我一个前端开发搞APP,不会原生啊,无奈使用vue项目,然后使用HbuilderX打包成APP,完事之后测试,发现按返回直接退出程序了使用vue-awesome-mui 使用以下命令 ...
用Cordova打包Vue项目为app
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
亲测用APICloud打包vue项目
准备工作: 1.去APICloud官网下载打包工具 https://www.apicloud.com/devtools 我使用的是第三款(Eclipse APICloud Plugins(Studio ...
vue项目转apk详细介绍linux虚拟器远程连接逍遥模拟器
vue项目转apk详细介绍此篇文章为原创,转载请标明出处!!! 1.卸载centOs7自带的jdk,安装1.8版本上传后解压 tar -zxvf jdk-7u67-linux-x64.tar.gz ...
webpack打包vue项目之后dist文件夹在本地跑起来
webpack打包vue项目之后dist文件夹在本地跑起来转载为:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主亲测, ...
Vue项目生成二维码
场景: [民主测评.闭卷测试] Vue项目生成二维码,使用手机浏览器扫码录入答题一,创建vue项目,样式布局,接口联调, npm run build 打包成dist 文件,让后台发送到服务器中,页面 ...
使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore
打包Vue项目 1.在Webstorm中打开Vue项目,在下面的Terminal中输入: npm run build 2.等待build完成,双击项目,进入菜单选择Reveal in Finder , ...
使用webpack打包vue项目
使用webpack打包vue项目安装webpack工具,安装方式有两种:全局安装(命令:npm install -g webpack webpack-cli)以及安装在项目中,这里使用第二种: // ...
vue打包部署到php,打包vue项目部署在nginx
因为liunx操作命令不是很熟,我整的是宝塔面板部署哈首先在本地打包vue项目,打包成功后,项目中会多出一个dist 文件夹把dist上传到服务器配置nginx配置文件,新建一个othercon ...

HBuilderX 打包 vue 项目生成 apk

HBuilderX 打包 vue 项目生成 apk相关推荐

最新文章

热门文章