Cordova + vue 打包安卓(Android) apk

Posted 2023-04-03 Addam Holmes

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

解决 Cordova 打包 vue项目为 APP 后，在安卓平台下 touchMove 事件不生效的问题

Cordova + vue 打包成 APP 后在部分安卓机上面，左右滑动无法正常的实现页面滚动逻辑。

解决方案：

　　在 touchMove 的时候，通过 event.preventDefault() 来解决

注意：

transform 事件是有兼容性的，可不要忘记加前缀。