关于cordova打包vue写的web-app时容易出现白屏以及部分BUG不能测出的问题

打包成apk说明

vue文件修改

1. index.html 中必须添加

   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
   <meta name="format-detection" content="telephone=no">
   <meta name="msapplication-tap-highlight" content="no">
   

2. index.html 添加

   <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
   

   的时候可能导致页面样式改变，如果改变则不加，否则还是建议加上。这段主要是防止跨站脚本攻击。
3. index.html 添加 cordova 操作安卓事件,必须加到 #app 下方!!

   <script src="cordova.js"></script>
   

4. 部分项目出现非代码问题白屏情况,可以考虑修改main.js

   document.addEventListener('deviceready',function(){
       new Vue({
           el: '#app',
           router,
           components: { App },
           template: '<App/>'
       })
       window.navigator.splashscreen.hide()
   },false);
   

   大多数情况下是不需要的, 如果出现白屏, 还是多检查检查代码吧

cordova插件

1. 退出 app 插件 => 推荐使用 kr.co.joycorp.cordova.exitapp
2. 控制台打印插件推荐使用官方维护插件 cordova-plugin-console 方便调试
3. 添加插件的方法可以查看 官方文档
4. 常用插件除了可以查看 官方文档 之外,还可以直接去 搜索

cordova打包

rem 全局安装 cordova 
C:\>npm install -g cordova

rem 创建 cordova 项目 fileName --- 文件夹名称 projectLinence --- 包名(com.example.helloWorld) projectName --- 项目名称
C:\>cordova create [id:fileName] [id:projectLinence] [id:projectName]

rem 进入工程目录
C:\>cd [id:fileName]

rem 添加平台
C:\>cordova platform add ios --save
C:\>cordova platform add android --save

rem 检测构建先决条件 如果检测缺少 grandle 可以先 build, grandle会自动安装
C:\>cordova requirements

rem 构建 app, 路径为\platforms\android\app\build\outputs\apk\debug
$ cordova build

cordova测试

不推荐官网的测试方法, 在本机上测试会测不出一部分bug

推荐使用 Androidstudio 测试

1. 安装 Androidstudio

2.导入 android 项目

按照官网说明导入

3. 打开手机调试, 用数据线连接电脑, 点击 androidstutio 右上角的 run, 控制台在右下角

代码中的 console.log() 会在控制台打印, 显示情况会实时出现在手机中

! 代码中的路径只能使用 (./) (…/), 不能使用服务器路径 (/)

cordova目录

For a detailed explanation on how things work, check out the guide and docs for vue-loader.