cordova封装一个vue应用

2024-01-23 11:08:10

第一步：安装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

cordova封装一个vue应用

码农公寓

相关文章