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

接上一篇文章:Cordova+Vue实现Android APP开发(一)

 

一、使用cordova打包运行app

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

Cordova+Vue实现Android APP开发(二)-- 打包运行在真机上和打包运行在本地调试,以及打包时候一些问题的处理_第1张图片

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

Cordova+Vue实现Android APP开发(二)-- 打包运行在真机上和打包运行在本地调试,以及打包时候一些问题的处理_第2张图片

 

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调试。

Cordova+Vue实现Android APP开发(二)-- 打包运行在真机上和打包运行在本地调试,以及打包时候一些问题的处理_第3张图片

打开充电模式下的ADB调试

Cordova+Vue实现Android APP开发(二)-- 打包运行在真机上和打包运行在本地调试,以及打包时候一些问题的处理_第4张图片

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

不知道为啥,检测不到

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

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

Cordova+Vue实现Android APP开发(二)-- 打包运行在真机上和打包运行在本地调试,以及打包时候一些问题的处理_第5张图片

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

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

这样就可以成功了。

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

Cordova+Vue实现Android APP开发(二)-- 打包运行在真机上和打包运行在本地调试,以及打包时候一些问题的处理_第6张图片

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

终于看到登陆接口

Cordova+Vue实现Android APP开发(二)-- 打包运行在真机上和打包运行在本地调试,以及打包时候一些问题的处理_第7张图片

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中的标签和index.html中的META标签做一定设置,防止出现共享 Webview 模式下的跨站攻击等安全问题。

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

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

 "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图标不显示

Cordova+Vue实现Android APP开发(二)-- 打包运行在真机上和打包运行在本地调试,以及打包时候一些问题的处理_第8张图片

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


                    
                    

你可能感兴趣的:(cordova,混合App)