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交流学习社区-power by saucxs(程新松)(/page/668.html)
- 记录一次nginx故障:recv() failed (104: Connection reset by peer) while reading response header from upstream,
- 微信小程序初体验,入门练手项目--通讯录,部署上线(二)
- 微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器(一)
- thinkjs性能优化之nginx配置
- 开学AI登场!南京高校用人脸识别查考勤管理学生,还敢逃课、玩手机?姚AI变脸热到爆!开源换脸工具FakeSwap今登GitHub排行榜第二位,ICLR飞升,IJCAI降级:清华的新版AI顶会评级引发学术圈热议,意外!已获6700万美元投资的自动驾驶LiDAR创业公司关门了
标签云
图文推荐
“深度学习”这十年:52篇大神级论文再现AI荣与光,12岁上大学、31岁成最年轻IEEE Fellow,前百度总裁张亚勤加盟清华,全球女性福音!DeepHealth深度学习模型检测乳腺癌完胜5名放射科医师,读博无门,就业碰壁,孤独当了7个月“民科”后,我的论文中了顶会Spotlight
saucxs 2020-01-03 10:04:09
1200 万部手机、500 亿实时位置数据,上帝视角还原特朗普全天行踪,自动驾驶玩漂移 斯坦福最新研究:《头文字D》无人车版来了,印度裔又要统领美国科学界?特朗普提名他领导美国国家科学基金会,GitHub排名第一!免费最强“抢票神器”在手,程序员抢票再不用跪求加速包
saucxs 2019-12-25 10:08:05
蝉联AI专业全球冠军!清华力压CMU再夺CSRankings高校AI排行王座,波士顿动力CEO:不排斥军方订单,就想你粗暴地对待机器狗,亚马逊Alexa突然发疯,读着论文教主人自杀:你活着地球人口会过剩,图神经网络的ImageNet?斯坦福大学等开源百万量级OGB基准测试数据集
saucxs 2019-12-24 09:57:45
2020 AAAI Fellow名单出炉!深度学习先驱Bengio和LeCun双双入选,李世石最后一战不敌AI“韩豆”!唯一战胜过AlphaGo的男人正式退役,GAN和PS合体会怎样?东京大学图像增强新研究:无需配对图像,增强效果还可解释,2019年最受关注的100项研究,AI“复活”蒙娜丽莎排第一
saucxs 2019-12-23 09:58:10
这家AI公司用面具破解中国人脸识别系统!微信、支付宝、火车站无一幸免,OpenAI公开Dota 2论文:胜率99.4%,「手术」工具连续迁移训练,9岁神童大学毕业前突然退学,转赴美国攻读电气工程博士,Reddit热议:15岁高中生用神经网络建立生命进化“新宇宙”
saucxs 2019-12-17 09:45:30
- 东方财富
- saucxs博客园
- weekly周报
- loveBook
- 前端博客
- 技术交流学习社区
- saucxs
- segmentfault
- saucxs的博客
- haorooms
- luckyscript
- 东方财富期货
- 峰云就她了
- binlive
- songEagle
- 且听风吟
- (TX)Heying Ye
- CG Online Judge
- Chris's Blog
- vueRouter
- 龙恩0707
- 鑫空间,鑫生活
- 木易杨
- MDN-js
- Cherry's Blog
- InterviewMap
- 安安哥的小戏台
- xiaojun1994-cat
- JavaScript-Garden
- junruchen-daily
- 秋天爱美丽
- web-summary-daily
- w3cplus-tb
- 潜行者m
- 于江水
- KieSun-git
- cnodejs
- aerminBlog
- fex_bd
- gwuhaolin-git
- Deboy's Blog
- react-china
- react.docschina
- Vuejs社区
- vuejsDoc
- cdnSocketIo
- shuaihuaCC
- colorize
- stazhu
- 前端学习
- IBM Dev社区
- linux运维笔记
- webpackDoc
- sayskyGithub
- 前端里
- 996.ICU
- electronjs
- CS-Notes
- mqyqingfengBlog
- beego官方
- 编码规范
- 阮一峰个人网站
- sessionstack
- damonareGoUp
- 咀嚼之味
- fe-interview
- xd-tayde/blog
- css-tricks
- ghmagical个人中心
- markyunp6
- hellogithub
- 霜序廿
- rin部落
- 建站素材
- 前端资源网
- CSS开发手册
- web技术交流
- 程新松个人网站
- wangEditor
- 小松博客
- 交流学习社区