#高考加油#每一天的学习就是对自己的投资

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进行代理。


最终正常运行:

截图


文章转载:原创
感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/668.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

图文推荐

saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!