前期踩坑，简单带过：
如果你还不知道怎么安装cordova，创建一个cordova项目，请移步w3school看下Cordova教程，然后再摸索一下。
如果你不清楚vue-cli项目的搭建和打包，emmm，建议先学习一下，一步一个脚印
当你创建好cordova项目的时候，把vue打包好的项目dist下的内容全部复制覆盖到cordova项目里面的www文件夹中。然后再来踩坑吧
1. JDK版本 只能是1.8 其实官网首页就有的下
15691406-6353f9c253c34dd4.png
2. Gradle环境变量配置 自行搜教程
开始-Vue打包踩坑
一. 使用vue-cordova插件
1.安装方式
️用vue ui安装简单 可视化
️使用npm
npm install vue-cordova --save
2.在main.js里面引入使用
import VueCordova from 'vue-cordova'
Vue.use(VueCordova)
二. 修改vue.config.js
这个文件在项目根目录 也就是 package.json同级文件。如果没有这个文件 就创建一个js文件 名为vue.config
module.exports = {
publicPath: '',
};
然后cordova打包，已经可以顺利跑起来了。
下面讲点击两次返回按键退出应用以及沉浸式状态栏
一. cordova监听返回退出按钮
1.在index.html引入cordova.js
<script src="./cordova.js" type="text/javascript" charset="utf-8"></script>
//无需手动添加cordova.js Cordova打包后会自动生成
2.在mounted中添加监听（如果要实现某些页面使用返回，用$route.path获取路径再做判断处理）
let _vue = this;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//navigator.splashscreen.hide();
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
_vue.$toast('再按一次返回键退出'); //这里的toast使用的是vant组件的，自行修改
document.removeEventListener("backbutton", onBackKeyDown, false); // 注销返回键
document.addEventListener("backbutton", exitApp, false); //绑定退出事件
// 3秒后重新注册
let intervalID = window.setInterval(function() {
window.clearInterval(intervalID);
document.removeEventListener("backbutton", exitApp, false); // 注销返回键
document.addEventListener("backbutton", onBackKeyDown, false); // 返回键
}, 3000);
}
function exitApp() {
navigator.app.exitApp();
}
二. 沉浸式状态栏
1.安装状态栏插件
cordova plugin add cordova-plugin-statusbar
2.打开Cordova项目文件夹下面的
/platforms/android/app/src/main/java/org/apache/cordova/statusbar
修改StatusBar.java文件的run方法为：
run{
Window window = cordova.getActivity().getWindow();
//实现沉浸式状态栏效果 start
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
window.setNavigationBarColor(Color.TRANSPARENT);
// end
window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
}
cordova build一下项目，发到手机上安装看效果
结束
至此，已经完成，上个效果图 要注意的是 做沉浸式，要给页面顶部留个25px的padding。若有疑问，不妨留言
15691406-c83a3a05dd342f03.png
