一、创建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弹框,证明调用成功。就此一切完毕。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐