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

最终正常运行：

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

html5 plus与vue,基于Html5 Plus + Vue + Mui 移动App 开发（二）
基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...
android app开发混合开发,混合开发入门 Vue结合Android/iOS开发仿京东项目App
download:混合开发入门 Vue结合Android/iOS开发仿京东项目App 无需原生开发基础,也能完美呈现京东商城.本课程融合vue.Android.IOS等目前流行的前端和移动端技术,混合 ...
写给Android App开发人员看的Android底层知识合集（1-8）
写给Android App开发人员看的Android底层知识合集(1-8) 转自包老师:http://www.cnblogs.com/Jax/p/6864103.html 写给Android App开 ...
傻瓜式Android APP开发入门教程
这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤一一讲解,非常简明的一个Android APP开发入门教程,android各种机子和rom的 ...
Android App 开发技术图谱
Android App 开发技术图谱转载请注明出处:www.leoyanblog.com 本文出自 LeoYan 的博客本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 LeoYa ...
5G 时代的 Android App 开发入门与项目实战
随着移动互联网的持续发展,Android系统从智能手机逐步拓展到平板电脑.智能电视.车载大屏.智能家居.智能手表等诸多设备,Android开发依然是前景可期的IT岗位. 当然,整个社会正在迈向5G时代 ...
Android APP开发需求文档范本
Android APP开发需求文档范本软件需求文档格式的标准写法 1．引言 1．1 编写目的 • 阐明开发本软件的目的: 1．2 项目背景 • 标识待开发软件产品的名称.代码: • 列出本项目的任 ...
android开发入门与实践_我的新书《Android App开发入门与实战》已经出版
前言工作之余喜欢在CSDN平台上写一些技术文章,算下时间也有两三年了.写文章的目的一方面是自己对技术的总结,另一方面也是将平时遇到的问题和解决方案与大家分享,还有就是在这个平台上能和大家共同交流. ...
Android APP开发入门
Android APP开发入门目录 android_studio很好用的一个就是debug 1 1导入demo编译出错 1 4使用as运行安装不了apk安装adb 2 5SeekBar组件使用 2 ...

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

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

最新文章

热门文章