一。环境准备
- cordova 环境。
- 安卓环境。
- plugman环境。
- npm install -g plugman(淘宝镜像用cnpm)
二。开发工具
- webStorm
- AndroidStudio
三。开始开发
-
1.创建插件
plugman create --name toastPlugin --plugin_id toast-plugin-xytoast --plugin_version 1.0.1
- --name 插件名
- --plugin_id 插件id,最好用小写,这个插件id会在用户安装完之后显示在config.xml文件中的<plugin name="cordova-plugin-whitelist" spec="1" />
- --plugin_version 插件版本号
-
2.创建cordova项目
-
3.创建android项目,并引入CordvaLib,同时编写java类继承CorovaPlugin
public class ShowToast extends CordovaPlugin { private CallbackContext mCallbackContext; /** * @param action 调用方传来的动作,即要肝肾恶魔 * @param args 参数 * @param callbackContext 返回给客户端的值 * @return * @throws JSONException */ @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { this.mCallbackContext = callbackContext; if ("toastFunc".equals(action)) { String message = args.getString(0); Toast.makeText(cordova.getActivity(), message, Toast.LENGTH_SHORT).show(); mCallbackContext.success("success"); return true; } mCallbackContext.error("error"); return false; } }
-
4.为插件创建android目录
- 1.在插件的src目录下创建android与ios目录,分别对应安卓插件与ios插件
如图
- 2.将安卓原生的ShowToast.java放入安卓目录下。
图片.png
-
5.修改plugin.xml文件
plugin.xml详解<?xml version='1.0' encoding='utf-8'?> <plugin id="toast-plugin-xytoast" version="1.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>toastPlugin</name> <js-module name="toastPlugin" src="www/toastPlugin.js"> <clobbers target="cordova.plugins.toastPlugin" /> </js-module> <platform name="android"> <source-file src="src/android/ShowToast.java" target-dir="src/cn/shuto/toast"/> <config-file target="res/xml/config.xml" parent="/*"> <feature name="ShowToast"> <param name="android-package" value="cn.shuto.toast.ShowToast"/> </feature> </config-file> </platform> </plugin>
- <plugin>:id为创建插件时指定的id
- <name>:name为创建插件时指定的name
- <js-module>:文件中可能会有多个js-module的,一个js-module就是一个调用的方式。只为js端调用使用。js端调用时为target.functionName 即cordova.plugins.toastPlugin.functionName
- <platform>:为插件添加安卓平台
- <source-file> :src为java源文件的路径,需要相对于plugin.xml到文件的位置。target-dir为插件安装好后,源文件的位置(即以后在platform/android下的目录),要和下面的feature标签下param标签里的value中的包名对应
-
<feature>:name要与java类名一致都为ShowToast, param标签中的value是插件安装好后java类名全路径 与安卓端的类路径保持一致即可
:
-
6.修改toastPlugin.xml
var exec = require('cordova/exec'); exports.toast = function (arg0, success, error) { exec(success, error, 'ShowToast', 'toastFunc', [arg0]); };
- exports.toast:暴露出的方法,供js端调用
- success:成功回调
- error:失败回调
- ShowToast:是plugin.xml中配置的feature的name
- toastFuc:action,原生根据不同的action处理不同的请求
- [arg0]:参数,需要传递个原生端的内容
-
7.为插件创建package.json文件
plugman createpackagejson 插件绝对路径plugman createpackagejson C:\Users\lzj\Desktop\plugin\toastPlugin
-
8.cordova安装相应的插件
cordova项目目中下执行cordova plugin add C:\Users\lzj\Desktop\plugin\toastPlugin(插件名)
-
9 js调用
function showToast() { //msg为 mCallbackContext.success("success");的返回值 cordova.plugins.toastPlugin.toast('吐司', function (msg) { alert(msg); }, function (msg) { alert(msg); }) }
网友评论