Cordova + vue 打包安卓(Android) apk
本系统通过Vue集成Cesium制作的高精度三维地图引擎,在此基础上进行Android封装,封装与2022-9-26日,亲测可用。
第一步:环境配置
1、安装jdk、sdk及node
略
2、安装Cordova
npm install -g cordova
之后可以查看一下版本
第二步:新建Cordova项目(建议放在英文目录下)
执行行命令
cordova create myApp
myapp :cordova 目录名
cd myApp 进入目录
使用命令
cordova platform add android
来生成Android平台的cordova库,这时platforms文件夹中会生成一个android文件夹。
在生成的cordova文件中 :config.xml -包含应用相关信息,使用到的插件以及面向的平台platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库plugins – 包含应用所需插件的 Cordova 库,使得应用能够访问例如照相机和电池状态相关的事项。www – 包含应用源代码,例如 HTML, JavaScript 和 CSS 文件hooks – 包含为个性化应用编译系统所需的脚本
到这里,cordova项目就已经建好了。
第三步:Vue项目打包放入cordova项目
需要先将vue.config.js中publicPath属性改为:”/” (没有vue.config.js文件可以百度一个模板自己在根目录创建一个)
然后修改路由,在router的index.js
下修改mode,吧原本的history改为hash
使用打包命令
npm run build
之后将打包文件夹下的文件(默认打包在dist文件夹下)全部复制到cordova项目下的www目录中(将原先www目录中的文件全部删除)
第四步:打包Android
1、调试打包apk软件
在打包之前,检查打包相关环境是否正确安装,在cordova项目文件夹下执行命令。
cordova requirements
即可查看当前环境中安装情况。显示如下即标识环境正确安装。(确认安装正确即可,不需要每次都去进行检查)
2、打包成安卓apk
执行命令
cordova build android -release
3、解决封装成Android时http的不可用问题
最初怀疑是Android 高版本默认不允许http访问造成,查看了platform/android下的Android studio项目AndroidManifest.xml文件,看到其中已经加了
android:usesCleartextTraffic="true"
(没加的一定要加上,加在application标签上,具体加上了如下图)
很显然不是这个原因造成的。
Android默认通信协议支持HTTPS,不支持HTTP,需要修改一下项目中的源码。
将cordova的本地虚拟容器改为http的,是不是就可以了?在项目根目录下搜索ConfigXmlParser.java
找到这个文件,打开。
在ConfigXmlParser.java
文件中的原来是这样的:
package org.apache.cordova;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Locale;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import org.xmlpull.v1.XmlPullParser;
import org.xmlpull.v1.XmlPullParserException;
import android.content.Context;
public class ConfigXmlParser {
private static String TAG = "ConfigXmlParser";
private static String SCHEME_HTTP = "http";
private static String SCHEME_HTTPS = "https";
private static String DEFAULT_HOSTNAME = "localhost";
private String launchUrl;
private String contentSrc;
private CordovaPreferences prefs = new CordovaPreferences();
private ArrayList<PluginEntry> pluginEntries = new ArrayList<PluginEntry>(20);
public CordovaPreferences getPreferences() {
return prefs;
}
public ArrayList<PluginEntry> getPluginEntries() {
return pluginEntries;
}
public String getLaunchUrl() {
if (launchUrl == null) {
setStartUrl(contentSrc);
}
return launchUrl;
}
public void parse(Context action) {
// First checking the class namespace for config.xml
int id = action.getResources().getIdentifier("config", "xml", action.getClass().getPackage().getName());
if (id == 0) {
// If we couldn't find config.xml there, we'll look in the namespace from AndroidManifest.xml
id = action.getResources().getIdentifier("config", "xml", action.getPackageName());
if (id == 0) {
LOG.e(TAG, "res/xml/config.xml is missing!");
return;
}
}
pluginEntries.add(
new PluginEntry(
AllowListPlugin.PLUGIN_NAME,
"org.apache.cordova.AllowListPlugin",
true
)
);
parse(action.getResources().getXml(id));
}
boolean insideFeature = false;
String service = "", pluginClass = "", paramType = "";
boolean onload = false;
public void parse(XmlPullParser xml) {
int eventType = -1;
while (eventType != XmlPullParser.END_DOCUMENT) {
if (eventType == XmlPullParser.START_TAG) {
handleStartTag(xml);
}
else if (eventType == XmlPullParser.END_TAG)
{
handleEndTag(xml);
}
try {
eventType = xml.next();
} catch (XmlPullParserException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
public void handleStartTag(XmlPullParser xml) {
String strNode = xml.getName();
if (strNode.equals("feature")) {
//Check for supported feature sets aka. plugins (Accelerometer, Geolocation, etc)
//Set the bit for reading params
insideFeature = true;
service = xml.getAttributeValue(null, "name");
}
else if (insideFeature && strNode.equals("param")) {
paramType = xml.getAttributeValue(null, "name");
if (paramType.equals("service")) // check if it is using the older service param
service = xml.getAttributeValue(null, "value");
else if (paramType.equals("package") || paramType.equals("android-package"))
pluginClass = xml.getAttributeValue(null,"value");
else if (paramType.equals("onload"))
onload = "true".equals(xml.getAttributeValue(null, "value"));
}
else if (strNode.equals("preference")) {
String name = xml.getAttributeValue(null, "name").toLowerCase(Locale.ENGLISH);
String value = xml.getAttributeValue(null, "value");
prefs.set(name, value);
}
else if (strNode.equals("content")) {
String src = xml.getAttributeValue(null, "src");
if (src != null) {
contentSrc = src;
} else {
// Default
contentSrc = "index.html";
}
}
}
public void handleEndTag(XmlPullParser xml) {
String strNode = xml.getName();
if (strNode.equals("feature")) {
pluginEntries.add(new PluginEntry(service, pluginClass, onload));
service = "";
pluginClass = "";
insideFeature = false;
onload = false;
}
}
private String getLaunchUrlPrefix() {
if (prefs.getBoolean("AndroidInsecureFileModeEnabled", false)) {
return "file:///android_asset/www/";
} else {
String scheme = prefs.getString("scheme", SCHEME_HTTPS).toLowerCase();
String hostname = prefs.getString("hostname", DEFAULT_HOSTNAME);
if (!scheme.contentEquals(SCHEME_HTTP) && !scheme.contentEquals(SCHEME_HTTPS)) {
LOG.d(TAG, "The provided scheme \"" + scheme + "\" is not valid. " +
"Defaulting to \"" + SCHEME_HTTPS + "\". " +
"(Valid Options=" + SCHEME_HTTP + "," + SCHEME_HTTPS + ")");
scheme = SCHEME_HTTPS;
}
return scheme + "://" + hostname + '/';
}
}
private void setStartUrl(String src) {
Pattern schemeRegex = Pattern.compile("^[a-z-]+://");
Matcher matcher = schemeRegex.matcher(src);
if (matcher.find()) {
launchUrl = src;
} else {
String launchUrlPrefix = getLaunchUrlPrefix();
// remove leading slash, "/", from content src if existing,
if (src.charAt(0) == '/') {
src = src.substring(1);
}
launchUrl = launchUrlPrefix + src;
}
}
}
把htmls改为html
之后找到项目根目录下的config.xml,添加如下代码:
<access origin="*" subdomains="true" />
保存之后再电脑上借一个pad或者手机
运行
cordova run android
就可以看到手机或者pad上出现我们的Vue项目啦!!!!!!!!!!!!
`
把htmls改为html
之后找到项目根目录下的config.xml,添加如下代码:
<access origin="*" subdomains="true" />
保存之后再电脑上借一个pad或者手机
运行
cordova run android
就可以看到手机或者pad上出现我们的Vue项目啦!!!!!!!!!!!!