创建cordova+vue(android)项目并调用cordova自定义插件(java)

一、创建cordova

  1. 用npm安装cordova
npm install -g cordova
  1. 创建cordova项目
cordova create cordova-vue
  1. 添加android平台
cd cordova-vue
cordova platform add android --save
  1. 检查构建APP的条件
cordova requirements
  1. 构建/运行APP
 cordova build android  
 cordova run android   (需要保证有android模拟器)



二、创建vue(在cordova中)

  1. 用npm安装vue-cli
npm install -g vue-cli
  1. 创建项目
cd cordova-vue
vue init webpack vue-app
  1. 运行vue项目
cd vue-app
npm run dev
  1. 修改打包路径

vue-app->config->index.js    vue-app->config->index.js

  1. 构建项目(将项目打包到www文件里)
 npm run build



三、运行创建好的cordova+vue(android)项目

回到cordova-vue文件夹中
构建apk:

cordova build android

运行app:

cordova run android

到此cordova+vue的android项目创建完毕。



四、创建cordova自定义插件(android->java)

  1. 安装plugman
 npm install -g plugman
  1. 创建插件
plugman create --name ZshDemo --plugin_id cordova-plugin-zshdemo --plugin_version 1.0.0
  1. 编写android支持的插件
cd ZshDmo
plugman platform add --platform_name android

修改plugin.xml目录
ZshDemo->plugin.xml
在这里插入图片描述
代码:

<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-zshdemo" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>ZshDemo</name>

    <js-module name="ZshDemo" src="www/ZshDemo.js">
        <!--target是插件安装后的调用方法前缀  比如:cordova.plugins.ToastDemo.改:ZsnDemo.自己定义方法-->
        <clobbers target="ZshDemo" />
    </js-module>

    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="ZshDemo">
                <!--改成通用的cordova插件的安装目录-->
                <param name="android-package" value="org.apache.cordova.zshdemo.ZshDemo" />
            </feature>
    </config-file>

    <config-file parent="/*" target="AndroidManifest.xml">
    </config-file>
    
    <!--这里把 target-dir 修改和包路径一致-->
    <source-file src="src/android/ZshDemo.java" target-dir="src/org/apache/cordova/zshdemo" />


    </platform>
</plugin>

修改ZshDemo.js 和ZshDemo.java文件
.java修改:
实现调用Android弹框

package org.apache.cordova.zshdemo;  

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.widget.Toast;

/**
 * This class echoes a string called from JavaScript.
 */
public class ZshDemo extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("showToast")) {
            String message = args.getString(0);
            this.showToast(message, callbackContext);
            return true;
        }
        return false;
    }

    private void showToast(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            Toast.makeText(cordova.getContext(), message, Toast.LENGTH_SHORT).show;
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

在这里插入图片描述
.js修改成对应的方法名称暴漏出去

var exec = require('cordova/exec');

exports.showToast = function (arg0, success, error) {
    exec(success, error, 'ZshDemo', 'showToast', [arg0]);
};

插件到此写完了。


  1. 添加插件
    初始化插件:
    进入ZshDemo中,npm init, 之后出现package.json文件
 npm init

进入cordova-vue 项目中,添加插件
 cordova plugin add c:\xx\cordova-vue\plugins\ZshDemo  --save



五、调用cordova自定义插件

1.修改.vue文件
在这里插入图片描述

  1. 修改vue-app->index.html
    添加代码:
    在这里插入图片描述
    3.重新构建vue项目
cd vue-app
npm run build
  1. 重新构建并运行Cordova(Android)项目
cd cordova-vue
cordova run android

正常情况下,可以看到安卓模拟器界面文字的改变,并且弹出Toast弹框,证明调用成功。就此一切完毕。

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以尝试使用以下步骤来实现在 Cordova 环境下打包 Vue 项目调用拍照功能: 1. 在 Cordova 项目根目录下执行以下命令安装 Cordova 插件 Camera: ``` cordova plugin add cordova-plugin-camera ``` 2. 在 Vue 项目中安装 Cordova 插件 Camera 的 TypeScript 类型: ``` npm install --save-dev @types/cordova-plugin-camera ``` 3. 在 Vue 项目的入口文件 main.ts 中添加以下代码: ``` declare var navigator: any; const app = createApp(App); app.config.globalProperties.$takePicture = () => { return new Promise((resolve, reject) => { navigator.camera.getPicture((imageData: string) => { resolve(`data:image/jpeg;base64,${imageData}`); }, (error: any) => { reject(error); }, { quality: 50, destinationType: navigator.camera.DestinationType.DATA_URL }); }); }; app.mount('#app'); ``` 上述代码会将 Cordova 的 Camera 插件添加到 Vue 的全局属性中,以便在 Vue 组件中调用。 4. 在 Vue 组件中调用 `$takePicture` 方法: ``` <template> <div> <button @click="takePicture">Take Picture</button> <img :src="image" v-if="image" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const image = ref(''); const takePicture = async () => { try { const imageData = await (window as any).$takePicture(); image.value = imageData; } catch (error) { console.error(error); } }; return { image, takePicture, }; }, }); </script> ``` 上述代码会在 Vue 组件中定义 `$takePicture` 方法的调用,在用户点击“Take Picture”按钮时调用该方法。调用成功后,图片的 base64 编码会被设置到 Vue 组件的 `image` 变量中,并渲染到页面上。 以上是一个简单的实现,在实际开发中你可能需要进行更多的配置和调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值