Vue代码打包成apk？Cordova帮你解决！

最近有这样一个需求，需要开发一个Android-apk应用程序，但是我早就把学的Android代码开发忘到了几年前，现在想要重新捡起，又要花费大量的时间进行学习，就想着能不能另辟蹊径，于是经过查阅大量资料，决定使用Cordova这个工具进行编译开发。

阅读过我之前文档的应该都知道，我的主要方向是前端，所以Vue工程肯定是已经很熟悉了，而这次所介绍的工具，也是对Vue项目打包后的代码，再次进行编译，实现一个apk安装程序的打包。

Cordova到底是什么

Cordova（点击跳转官网）是一个开源移动开发框架，允许开发者使用HTML、CSS和JavaScript构建跨平台混合移动应用，通过统一的JavaScript类库访问摄像头、麦克风等原生设备功能，并依赖对应的原生后台代码实现功能调用。

需要的环境

node-v20.19.2
cordova-12.0.0
java-sdk-21
android-studio
android-sdk-35
android-tool-35
gradle 9.1.0

开发工具

vue开发工具：WebStorm
Cordova打包开发工具：Android Studio

如何创建一个Cordova工程

首先我们需要在电脑上全局安装Cordova插件，安装命令如下：
sh 复制代码
```
npm install -g cordova
cordova -v
```
在命令行工具中执行下面代码，创建一个Cordova基础项目
sh 复制代码
```
cordova create MyApp
```
执行完成之后如下图：
完成上面操作之后，我们需要进入项目文件，在项目中添加Android平台相关插件，执行下面代码：
sh 复制代码
```
cd MyApp
cordova platform add android
```
执行完成之后，会多出一个platforms的文件夹，里面存储了有关Android打包、打包后的一些配置及文件，以及我们需要的apk程序，如下图：
到这里，其实项目已经创建完成了，可以执行下面的命令进行打包了，但是可能在打包过程中，部分依赖访问时候被墙了，这里需要先打开科学上网模式：
sh 复制代码
```
cordova build android --verbose
# /platforms/android/app/build/outputs/apk/debug 打包apk软件包位置
```
打包完成后，即可根据这个路径找到打包后的apk软件就可以安装了:

如何修改应用程序图标及其他配置

其他的一个配置可以去网上查询，资料还是比较多的，这里只讲述一些常用的功能及示例，需要注意的是，使用一个插件代码，需要在项目里面安装对应的插件，比如我这里使用的是app启动页面自定义图片和地理位置权限，用到了多个插件，我这边将安装插件写成了一个脚本，使用时只需在项目中执行这个脚本就可以，脚本放在项目根目录下，如下：

sh 复制代码

#!/bin/bash
# 定义需要安装的插件列表（名称@版本 或 源地址）
PLUGINS=(
  "cordova.plugins.diagnostic"
  "cordova-plugin-advanced-http"
  "cordova-plugin-android-permissions"
  "cordova-plugin-file"
  "cordova-plugin-geolocation"
)
# 循环安装每个插件
for plugin in "${PLUGINS[@]}"; do
  echo "正在安装插件: $plugin"
  cordova plugin add "$plugin"
done
echo "所有插件安装完成！"

执行完上面脚本，会在项目结构中新增一个plugins目录，这个目录用于存储当前项目使用的插件，如下图：

下面我们讲述一下，如何修改apk的logo以及获取系统的位置权限，下面的配置都是在根目录下的config.xml文件中进行的，当然，cordova也有他自己的生命周期（hook），下面也只是展示了一下写法，具体如果要在生命周期中添加逻辑，可以查看官方文档：

找到<platform name="android">代码部分，在内部添加一个配置，这个icons文件夹也是根目录下，自己创建即可：

xml 复制代码

<!-- 应用程序logo -->
<icon src="icons/logo.png" />
<!-- 使用自定义启动页相关插件，位置可以看最后面的xml使用demo -->
<plugin name="cordova-plugin-splashscreen" spec="^6.0.2" />
<!-- 应用程序启动页logo -->
<preference name="AndroidWindowSplashScreenAnimatedIcon" value="icons/start_new.png" />

安卓机的手机系统设置权限级别获取，以地理位置权限为例：

xml 复制代码

<config-file parent="/*" target="AndroidManifest.xml">
    <!-- 精确位置（GPS） -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <!-- 粗略位置（基站/WiFi） -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <!-- Android 10+后台定位（如需后台访问） -->
    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
</config-file>

<edit-config file="platforms/android/app/src/main/res/values/strings.xml" mode="merge" target="/resources">
    <string name="location_permission_rationale">我们需要访问您的位置以提供服务</string>
</edit-config>

<!-- 使用地理位置相关插件，代码使用位置可以看最后面的xml使用demo -->
<plugin name="cordova-plugin-geolocation" spec="^5.0.0" />
<plugin name="cordova.plugins.diagnostic" spec="^7.2.5" />

完整的XML使用demo,插件安装完成之后，建议移除之前引用的plugins插件重新安装，以适配对应的权限文件：

xml 复制代码

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Cordova Demo</name>
    <description>Sample Apache Cordova App</description>
    <author email="wangtx97@foxmail.com"> wangtx </author>
    <access origin="*" />
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />

    <platform name="android">
        <icon src="icons/logo.png" />
        <preference name="AndroidWindowSplashScreenAnimatedIcon" value="icons/start_new.png" />
        <preference name="AndroidPersistentFileLocation" value="Compatibility" />

        <config-file parent="/*" target="AndroidManifest.xml">
            <!-- 精确位置（GPS） -->
            <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
            <!-- 粗略位置（基站/WiFi） -->
            <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
            <!-- Android 10+后台定位（如需后台访问） -->
            <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
        </config-file>

        <edit-config file="platforms/android/app/src/main/res/values/strings.xml" mode="merge" target="/resources">
            <string name="location_permission_rationale">我们需要访问您的位置以提供服务</string>
        </edit-config>

        <!-- cordova生命周期函数及引用文件 -->
        <!-- <hook src="scripts/001_request_permission.js" type="after_prepare" />） -->
    </platform>

    <plugin name="cordova-plugin-geolocation" spec="^5.0.0" />
    <plugin name="cordova-plugin-splashscreen" spec="^6.0.2" />
    <plugin name="cordova-plugin-android-permissions" spec="^1.1.5" />
    <plugin name="cordova-plugin-advanced-http" spec="^3.3.1" />
    <plugin name="cordova-plugin-file" spec="^8.1.3" />
    <plugin name="cordova.plugins.diagnostic" spec="^7.2.5" />
</widget>

至此，我们在Cordova项目中的配置就配置完成了，其中包括了以下几个功能配置：

配置应用程序logo；
配置apk启动页面图片；
配置允许获取系统地理位置权限；

如何在页面中获取与使用地理位置信息

我们可以在Vue项目中进行获取权限的事件监听，如下面代码，可以写在项目的/public/config.js文件中，在main.js中引用这个配置文件，文件内容为：

js 复制代码

// 在deviceready事件中调用
document.addEventListener('deviceready', () => {
  // 请求定位权限（Android需要）
  if (cordova.platformId === 'android') {
    cordova.plugins.diagnostic.requestLocationAuthorization(
      (status) => {
        // 根据授权状态处理
        switch (status) {
          case cordova.plugins.diagnostic.permissionStatus.GRANTED:
            // 权限已授予，调用定位
            // this.getCurrentPosition();
            break;
          case cordova.plugins.diagnostic.permissionStatus.DENIED:
            // 权限被拒绝，提示用户手动开启
            Toast.fail('请开启定位权限后重试');
            break;
          case cordova.plugins.diagnostic.permissionStatus.DENIED_ALWAYS:
            // 权限被永久拒绝，引导用户去设置页开启
            // this.openAppSettings();
            break;
          default:
            break;
        }
      },
      (error) => {
        Toast.fail(`请求权限失败：${error.message}`);
      }
    );
  } else {
    // iOS或其他平台直接调用定位（iOS权限由geolocation插件自动处理）
    // this.getCurrentPosition();
  }
}, false);

允许获取地理位置之后，可以通过下面的代码，获取当前所在的位置信息：

js 复制代码

navigator.geolocation.getCurrentPosition(
  (position) => {
    // 获取WGS84坐标（经纬度）
    const wgsLng = position.coords.longitude;
    const wgsLat = position.coords.latitude;
    // 如果使用了地图，可以实现setMapCenter、setMapZoom、showMarker，对当前位置进行居中、缩放、打点等操作
    // setMapCenter({longitude: wgsLng.toFixed(6), latitude: wgsLat.toFixed(6)})
    // setMapZoom(16)
    // showMarker(wgsLng.toFixed(6), wgsLat.toFixed(6))
  },
  (error) => {
    console.log(error)
    // 定位失败处理
    let errorMsg = '定位失败：';
    switch(error.code) {
      case error.PERMISSION_DENIED: errorMsg += '用户拒绝授权'; break;
      case error.POSITION_UNAVAILABLE: errorMsg += '位置信息不可用'; break;
      case error.TIMEOUT: errorMsg += '请求超时'; break;
      default: errorMsg += '未知错误';
    }
    closeToast()
    setTimeout(() => {
      showFailToast(errorMsg)
    }, 500)
    console.log(errorMsg)
  },
  { enableHighAccuracy: true, timeout: 15000 } // 高精度定位，超时15秒
);

至此，本篇关于Cordova的案例就结束了，感谢您的阅读，如有疑问或其他见解，可以在评论区留言或讨论😏。