创建cordova+vue(android)项目并调用cordova自定义插件(java)
一、创建cordova用npm安装cordovanpm install -g cordova创建cordova项目cordova create cordova-vue添加android平台cd cordova-vuecordova platform add android --save检查构建APP的条件cordova requirements构建/运行APPcordova build andro
·
一、创建cordova
- 用npm安装cordova
npm install -g cordova
- 创建cordova项目
cordova create cordova-vue
- 添加android平台
cd cordova-vue
cordova platform add android --save
- 检查构建APP的条件
cordova requirements
- 构建/运行APP
cordova build android
cordova run android (需要保证有android模拟器)
二、创建vue(在cordova中)
- 用npm安装vue-cli
npm install -g vue-cli
- 创建项目
cd cordova-vue
vue init webpack vue-app
- 运行vue项目
cd vue-app
npm run dev
- 修改打包路径
vue-app->config->index.js
- 构建项目(将项目打包到www文件里)
npm run build
三、运行创建好的cordova+vue(android)项目
回到cordova-vue文件夹中
构建apk:
cordova build android
运行app:
cordova run android
到此cordova+vue的android项目创建完毕。
四、创建cordova自定义插件(android->java)
- 安装plugman
npm install -g plugman
- 创建插件
plugman create --name ZshDemo --plugin_id cordova-plugin-zshdemo --plugin_version 1.0.0
- 编写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]);
};
插件到此写完了。
- 添加插件
初始化插件:
进入ZshDemo中,npm init, 之后出现package.json文件
npm init
进入cordova-vue 项目中,添加插件
cordova plugin add c:\xx\cordova-vue\plugins\ZshDemo --save
五、调用cordova自定义插件
1.修改.vue文件
- 修改vue-app->index.html
添加代码:
3.重新构建vue项目
cd vue-app
npm run build
- 重新构建并运行Cordova(Android)项目
cd cordova-vue
cordova run android
正常情况下,可以看到安卓模拟器界面文字的改变,并且弹出Toast弹框,证明调用成功。就此一切完毕。
更多推荐
已为社区贡献1条内容
所有评论(0)