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(
'-----项目信息-----'+'\n'+
'为' + 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);
}
})
})
