Cordova + vue 打包安卓(Android) apk

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项目啦!!!!!!!!!!!!

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_55534317/article/details/127058674