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

一、创建cordova

1. 用npm安装cordova

npm install -g cordova

2. 创建cordova项目

cordova create cordova-vue

3. 添加android平台

cd cordova-vue
cordova platform add android --save

4. 检查构建APP的条件

cordova requirements

5. 构建/运行APP

 cordova build android  
 cordova run android   (需要保证有android模拟器)

二、创建vue（在cordova中）

1. 用npm安装vue-cli

npm install -g vue-cli

2. 创建项目

cd cordova-vue
vue init webpack vue-app

3. 运行vue项目

cd vue-app
npm run dev

4. 修改打包路径

vue-app->config->index.js

5. 构建项目（将项目打包到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

2. 创建插件

plugman create --name ZshDemo --plugin_id cordova-plugin-zshdemo --plugin_version 1.0.0

3. 编写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]);
};

插件到此写完了。

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

 npm init

进入cordova-vue 项目中，添加插件

 cordova plugin add c:\xx\cordova-vue\plugins\ZshDemo  --save

五、调用cordova自定义插件

1.修改.vue文件

2. 修改vue-app->index.html
   添加代码：
   
   3.重新构建vue项目

cd vue-app
npm run build

4. 重新构建并运行Cordova（Android）项目

cd cordova-vue
cordova run android

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