Cordova插件开发(iOS/Android)--看这篇就够了
<h4 id="其他cordova相关文章链接">其他Cordova相关文章链接</h4><h5 id="--cordova-现有ios工程中集成cordova">- Cordova-现有iOS工程中集成Cordova</h5>
<h5 id="--cordova-在现有ios工程自动化接入cordova插件cordova机制原理">- Cordova-在现有iOS工程自动化接入Cordova插件(cordova机制原理)</h5>
<h5 id="--cordova-源码分析">- Cordova-源码分析</h5>
<h2 id="1创建一个测试工程">1.创建一个测试工程</h2>
<pre><code>//创建cordova工程
cordova create cordovaTest com.szcomtop.cordovaTest cordovaTest
//进入工程根目录
cd platforms
//添加iOS 和 Android 平台代码
cordova platform add ios
cordova platform add android
</code></pre>
<h2 id="2创建插件">2.创建插件</h2>
<pre><code>//安装插件工具
npm install -g plugman
/**创建一个 弹出alert的插件
name:插件名称
plugin_id:插件id
plugin_version:插件版本
**/
plugman create --name mytoast --plugin_id com.example.mytoast --plugin_version 0.0.1
执行完之后会看见一个mytoast文件夹在根目录下的plugins目录里面。把文件夹名称改成com.example.mytoast
</code></pre>
<h3 id="21-生成packagejson文件">2.1 生成package.json文件</h3>
<pre><code>//进入到插件目录
cd plugins/mytoast
//执行创建package.json文件
plugman createpackagejson ./
按照默认的选项提示创建即可
</code></pre>
<h3 id="22-创建iosandroid原生代码">2.2 创建iOS/Android原生代码</h3>
<ul>
<li>
<h4 id="ios代码---alertpluginh-文件">iOS代码 —AlertPlugin.h 文件</h4>
<pre><code>#import <Foundation/Foundation.h>
#import <Cordova/CDVPlugin.h>
NS_ASSUME_NONNULL_BEGIN
@interface AlertPlugin : CDVPlugin
//接收cordova消息方法
- (void)coolMethod:(CDVInvokedUrlCommand*)command;
@end
NS_ASSUME_NONNULL_END
</code></pre>
</li>
<li>
<h4 id="ios代码--alertpluginm-文件">iOS代码 — AlertPlugin.m 文件</h4>
<pre><code>#import "AlertPlugin.h"
@implementation AlertPlugin
- (void)coolMethod:(CDVInvokedUrlCommand*)command{
// NSLog(@"className:%@ - callbackId:%@ - args:%@ - methodName:%@",
// command.className,command.callbackId,command.arguments,command.methodName);
if (command.arguments.count > 0) {
UIAlertController *alertCtr = preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:(UIAlertActionStyle)UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
CDVPluginResult *result = ;
;
}];
;
[.windows.firstObject.rootViewController presentViewController:alertCtr animated:YES completion:^{
}];
}else{
CDVPluginResult *result = ;
;
}
}
@end
</code></pre>
</li>
<li>
<h4 id="android代码--mytoastjava">Android代码 — mytoast.java</h4>
<pre><code>package com.example.mytoast;
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;
public class mytoast extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("coolMethod")) {
String message = args.getString(0);
this.coolMethod(message, callbackContext);
return true;
}
return false;
}
private void coolMethod(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
callbackContext.success(message);
//吐司内容
Toast.makeText(cordova.getContext(),message, Toast.LENGTH_LONG) .show();
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}
</code></pre>
</li>
</ul>
<h3 id="23-修改pluginxml添加ios和android平台相关字段">2.3 修改plugin.xml，添加iOS和Android平台相关字段</h3>
<pre><code><?xml version='1.0' encoding='utf-8'?>
<plugin id="com.example.mytoast" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>mytoast</name>
<js-module name="mytoast" src="www/mytoast.js">
<clobbers target="cordova.plugins.mytoast" />
</js-module>
<platform name="ios">
<source-file src="src/ios/AlertPlugin.m" />
<header-file src="src/ios/AlertPlugin.h" />
<config-file target="config.xml" parent="/widget">
<feature name="mytoast">
<param name="ios-package" value="AlertPlugin" />
</feature>
</config-file>
</platform>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="mytoast">
<param name="android-package" value="com.example.mytoast.mytoast"/>
</feature>
</config-file>
<config-file parent="/*" target="AndroidManifest.xml"></config-file>
<source-file src="src/android/mytoast.java" target-dir="src/com/example/mytoast/mytoast"/>
</platform>
</plugin>
</code></pre>
<h3 id="24-插件js文件">2.4 插件js文件</h3>
<pre><code>var exec = require('cordova/exec');
exports.coolMethod = function (arg0, success, error) {
exec(success, error, 'mytoast', 'coolMethod', );
};
</code></pre>
<h3 id="25-插件最终的目录结构">2.5 插件最终的目录结构</h3>
<pre><code>com.example.mytoast
|-- package.json
|-- plugin.xml
|-- src
|-- ios
|-- AlertPlugin.h
|-- AlertPlugin.m
|-- android
|-- mytoast.java
|-- www
|-- mytoast.js
按照上面的目录结构，把原生文件放到对应的位置。
</code></pre>
<h2 id="3-测试插件">3. 测试插件</h2>
<h3 id="31-执行cordova命令添加插件">3.1 执行cordova命令添加插件</h3>
<pre><code>//add 后面参数为 我们新创建的插件文件夹
cordova plugin add ./plugins/com.example.mytoast
</code></pre>
<h3 id="32-编写测试indexhtml">3.2 编写测试index.html</h3>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>TestPlugin</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function testPlugin() {
cordova.plugins.mytoast.coolMethod("我是JS传来的参数！",alertSuccess,alertFail);
}
function alertSuccess(msg) {
alert(msg);
}
function alertFail(msg) {
alert('调用OC失败: ' + msg);
}
</script>
</head>
<body style="padding-top:50px">
<button style="font-size:17px;" onclick="testPlugin();">调用iOS插件</button> <br>
</body>
</html>
</code></pre>
<h3 id="33-执行效果">3.3 执行效果</h3>
<img src="https://img2020.cnblogs.com/blog/432851/202005/432851-20200528174052841-2086588010.png" width="250" height="450">
<img src="https://img2020.cnblogs.com/blog/432851/202005/432851-20200528174129090-1178481383.png" width="250" height="450">
<h3 id="demo插件附件">Demo插件附件</h3>
<p>插件Demo下载</p>
<h3 id="官网参考地址">官网参考地址</h3>
<p>cordova的plugin.xml字段说明</p><br><br>
来源：https://www.cnblogs.com/xiongwj0910/p/12982485.html
頁:
[1]