cordova封装一个vue应用

前言

目前webApp的实现方式有很多种，但是大致分为一下技术类型
编译增强性：编译html成不同平台的源代码，将其运行在各个平台上，对应框架有 taro、uiniapp、reactNactive
webview型：将html代码运行在原生的webview容器中，跟你自己手写webview没什么本质区别。对应的框架有：cordova

第一步：安装android开发环境
具体文档，看我的语雀 https://www.yuque.com/dingshaohua/hn6srn

第二步：安装cordova
参考官方文档：http://cordova.axuer.com/

第三步：创建一个空的cordova项目

cordova create MyApp

第四步：创建一个vue项目
并将编vue.config.js配置改为如下

module.exports = {
    publicPath: '', //静态资源地址（因为cordova的访问方式是file//xxx）
    outputDir:'/MyApp/www' //输出目录(直接输出到cordova的web代码文件夹中)
}

修改vue的模板 /public/index.html
增加如下两行代码

<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>

然后运行编译 npm run build 。这个时候编译的代码会被传到cordova项目中（的www目录下）

第五步：cordova增加平台

即MyApp下，执行命令

cordova platform add android

或者指定版本

cordova platform add android@^9.0.0

此时，根目录下会多出platform>android目录，这个目录就是安卓项目

第六步：Android studio导入刚才的目录
导入完成后，记得配置Gradle仓库代理，不然依赖几乎安装不来

第七步：此时调试，打包即可

添加访问原生底层的权限
比如我要使用麦克风和外放的权限
1、在cordova中安装权限插件

cordova plugin add cordova-plugin-android-permissions

2、使用插件
切换到vue项目，在你需要使用的地方使用，

比如我这里已进入项目就要使用权限插件，那我就再main.js文件中增加如下代码

// http://www.web000.cn/?p=363
document.addEventListener('deviceready',  ()=> {
    console.log('Device is Ready!');
    if (cordova) {
        const permissions = cordova.plugins.permissions;
        const list = [
            permissions.MICROPHONE,
            permissions.RECORD_AUDIO
        ];
        permissions.requestPermissions(list, () => {
            console.log('授权成功')
        }, () => {
            console.log('授权失败')
        });
    }
}, false);

3、cordova项目中增加安卓配置文件的权限申请
MyApp>config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.MyApp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>美团</name>
    <description>
        就是外卖啊
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <!-- 新增这块start -->
        <config-file target="AndroidManifest.xml" parent="/manifest" xmlns:android="http://schemas.android.com/apk/res/android">
            <uses-permission android:name="android.permission.MICROPHONE" />
            <uses-permission android:name="android.permission.RECORD_AUDIO" />
            <uses-permission android:name="android.permission.INTERNET" />
            <uses-feature android:name="android.hardware.audio.low_latency" />
            <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
            <uses-feature android:name="android.hardware.audio.pro" />
            <uses-feature android:name="android.hardware.microphone"/>
        </config-file>
        <!-- 新增这块end -->
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

4、然后重新添加平台，重复以上步骤即可

 自定义app的图标

1、cordova项目的config.xml
增加配置如下代码

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.abc" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>美团</name>
    <description>
        就是外卖啊
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <!-- 新增这行 -->
        <icon src="res/icon/android/icon.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

2、cordova项目增加icon
MyApp>res/icon/android/icon.png

自动化脚本

截至目前，从创建vue应用，到编译至cordova应用下的www目录，以及修改cordova添加安卓平台并修改gradle阿里代理源，每一步都需要手动来做。太麻烦，所以写了个脚本

安装依赖

安装两个项目依赖的一键脚本（vue项目和corodva项目）

const shell = require('shelljs');
const inquirer = require('inquirer');
const chalk = require('chalk');

const qs = [{
    type: "checkbox",
    message: "选择需要安装依赖的项目",
    name: "project",
    choices: [
        {
            name: "主程序项目"
        },{
            name: "cordova项目"
        }
    ]
}];
inquirer
  .prompt(qs)
  .then(answers => {
    console.log(chalk.greenBright(
        '-----项目信息-----'+'
'+
        '为' + answers.project+'安装依赖中...'
    ));

    answers.project.forEach(element => {
        if(element === '主程序项目'){
            shell.exec('yarn', null, () => {
                console.log(chalk.greenBright('[主程序项目]依赖安装完毕'));
            })
        }

        if(element === 'cordova项目'){
            shell.exec('cd ./cordova && yarn', null, () => {
                console.log(chalk.greenBright('[cordova项目]依赖安装完毕'));
            })
        }
        
    });
  })

打包脚本

const fs = require('fs');
const shell = require('shelljs');
const inquirer = require('inquirer');
const chalk = require('chalk');
const childProcess = require('child_process');

const qs = [{
    type: "confirm",
    message: "是否需要更新工作台模块？", // 因为我是两个vue项目合并，第二个vue项目通过iframe的方式被引入到第一个所以 我要考虑这个 这不是必须的
    name: "upWkbench",
    default: false
}]
inquirer
    .prompt(qs)
    .then(answers => {
        console.log(chalk.greenBright('编译vue代码中...'));
        if (answers.upWkbench) {
            shell.exec('cd ./module/workbench && npm run build')
            console.log(chalk.greenBright('工作台模块更新完毕，即将更新主程序'));
        }
        shell.exec('npm run build');
        console.log(chalk.greenBright('主程序更新完毕，即将操作cordova项目'));
        console.log("删除可能存在的旧安卓平台");
        shell.rm('-rf', './cordova/platforms')
        console.log("开始添加安卓平台");
        childProcess.exec('cd ./cordova && cordova platform add android', (err, sto) => {
            if (!err) {
                console.log("开始替换安卓依赖代理仓库");
                // 替换的内容
                const str =
                    `repositories {
                    maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
                    maven { url 'http://maven.aliyun.com/nexus/content/repositories/jcenter' }
                    google()
                }
                repos`;

                // 读取文件
                fs.readFile('./cordova/platforms/android/build.gradle', (err, data) => {
                    // 修改文件内容
                    data = data.toString().replace(/repositories repos/g, str)
                    // 写入文件
                    fs.writeFile('./cordova/platforms/android/build.gradle', data, () => {
                        console.log("完成所有操作，请打开Android studio打包");
                    })
                })
            } else {
                console.log(err);
            }
        })
    })