Cordova+Vue实现Android APP开发（二）-- 打包运行在真机上和打包运行在本地调试，以及打包时候一些问题的处理

接上一篇文章：Cordova+Vue实现Android APP开发（一）

一、使用cordova打包运行app

打包静态资源，没有问题的，但是把自己的vue其他项目转成android app时候，发现接口请求不到数据。

1、对axios的统一加一个前缀

2、vue打包

3、打包android app

cordova run android

但是还是这样接口没有反应。

cordova install android //将编译好的应用程序安装到模拟器上。
cordova emulate android //在模拟器上运行（前提是创建好AVD）
cordova serve android //在浏览器运行
cordova build android //打包cordova项目到android平台。
cordova run android //通过USB直接安装到真机（该语句已经包括了build命令）

想debug一下，看一下问题，这样的不知道怎么debug

只能使用真机，使用谷歌浏览器的device模式。

4、调试华为荣耀8真机

我使用的是华为手机，在设置--系统--开发人员选项。

打开开发人员选项。

然后打开usb调试。

打开充电模式下的ADB调试

然后把电脑这边需要安装华为驱动程序。。

不知道为啥，检测不到

然后我在电脑端就安装了华为手机助手。

然后设置了安全和隐私-->设备管理器，未知来源应用的

这些都设置完成之后，执行

cordova run android //通过USB直接安装到真机（该语句已经包括了build命令）

这样就可以成功了。

调试的时候，请先看一下这个：https://jingyan.baidu.com/article/db55b609fde96d4ba30a2fa9.html

在地址栏输入"chrome://inspect"进入。

终于看到登陆接口

vendor.a01c62e2a9a919bfb338.js:12 Refused to connect to 'http://chat.chengxinsong.cn/api/chat/login' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

查了一下资料，原因是：

出于安全考虑，Cordova 4.0 以上环境中，需要安装cordova-plugin-whitelist插件并 对

config.xml中的<access origin="your-policy" />标签和index.html中的META标签做一定设置，防止出现共享 Webview 模式下的跨站攻击等安全问题。

我们应该始终在 js 中添加事件监听器，而不是内联事件调用，因为Cordova 内容安全策略不允许内置javascript。 如果我们尝试调用事件内联，我们将得到以下错误。

我们先在index.html中去掉这个meta标签，这个标签用来严格限制哪些请求会被拦截的，在开发环境下，先不用这个meta标签，先去掉。

 <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:;">

5、iconfont图标不显示

我是引用的cdn。如果直接下载下来放到项目里应该就不会出现这个问题了。阿里iconfont提供的cdn没有加上http/https协议。

<script src="http://at.alicdn.com/t/font_1083780_zb54wokfjud.js"></script>

6、字体变大

vue项目在pc端的手机模式下，是完整适配的，但是现在出现了整个字体放大。视觉体验感下降了。

在platform-->android-->CordovaLib-->src-->org-->apache-->cordova-->engine-->SystemWebViewEngine.java

 /*字体放大问题*/
 settings.setUseWideViewPort(true);
 settings.setLoadWithOverviewMode(true);

红框我添加的字体放大的处理办法。这个设置成自适应。

正常显示了：

注意：我使用了 settings.setTextZoom(100)并不能解决问题。

7、有时候真机出现错误--java.io.IOException: Requested internal only, but not enough space

Using apk: E:\2019github\happyChatApp\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Package name: io.cordova.happychatapp
adb: Command failed with exit code 1 Error output:
adb: failed to install E:\2019github\happyChatApp\platforms\android\app\build\outputs\apk\debug\app-debug.apk:
Exception occurred while executing:
android.os.ParcelableException: java.io.IOException: Requested internal only, but not enough space
        at android.util.ExceptionUtils.wrap(ExceptionUtils.java:34)
        at com.android.server.pm.PackageInstallerService.createSession(PackageInstallerService.java:596)
        at com.android.server.pm.PackageManagerShellCommand.doCreateSession(PackageManagerShellCommand.java:1362)
        at com.android.server.pm.PackageManagerShellCommand.runInstall(PackageManagerShellCommand.java:201)
        at com.

大致的意思就是说，运行本机的内存不够用。

我就把真机的app卸载了一些，然后重新运行 codova run android ，这样就可以正常安装到真机上。

二、本地调试--启动本地android服务

首先说一下，为什么出现这个问题，因为最近把之前写的loveBook准备打包成apk，然后发现cordova打包android apk出现空白页（无法显示）。

很尴尬，然后使用chrome://inspect查看是什么地方报错，发现没有地方报错，

然后使用查看元素发现是<div id="app"></div>里面的内容是空的。

后来查资料发现个本地调试cordova本地调试--（不需要每次打包都发送apk到手机上），可以通过cordova serve android来启动服务，用户可以通过http://localhost:8000/android/www/index.html来请求android平台下的页面，也就是相当于手机访问到的首页，如此一来方便调试了。

然后：浏览器请求到app中某个页面时，所有的css、js全部加载了，肯定还是白屏，

但是这时候，console里出现了错误信息“processMessage failed: invalid message: ""”，一会儿时间出现了3k都跳这样的信息，同时页面出现了浏览器内存泄露

1、报错信息processMessage failed: invalid message: ""

后来发现是原因：

（1）路由模式不能使用history；

（2）axios异步请求存在跨域问题；

剩下来就是修改了：proxyTable是在开发模式下才生效的，你通过cordova serve android访问的是打包后生产环境使用的index.html文件，所以代理是不生效的。

2、cordova打包成apk后，axios异步请求该如何设置？

请求url可以直接写服务器上的绝对地址就会访问正确的地址了,如果开发环境和生产环境要请求不同的地址的话，可以自己做一下判断。

如果存在跨域就是nginx进行代理。

最终正常运行：