Cordova 插件开发

有时候github或者npm上的插件不能满足项目需求时 就需要自己自定义插件 3.1创建插件基本结构

 创建插件需要用plugman 命令,运行npm install -g plugman进行安装

cd 到需要创建插件的目录运行以下命令创建插件

plugman create --name cordova-plugin-alipay-login --plugin_id cordova-plugin-alipay-login --plugin_version 1.0.1

生成一个名字为cordova-plugin-alipay-login的插件文件夹以及目录为下:

3.2 插件目录配置

     plugin.xml 是配置相关android ios  wp等平台的信息,这是一个非常重要的配置文件,在js中能否调用到插件中的本地方法就需要看这个文件中是否配置正确。

     src文件夹:里面放置的是各个平台的类文件以及一些lib库,但是需要注意在src目录下 要新建例如 命名为ios的文件夹 这个文件夹就放置的ios的.h 和.m的文件以及ios环境下插件所需要的第三方库等,同等,放置android的java文件需要创建命名为android的文件夹。

     www文件夹:这个文件夹里面有一个js文件,是在3.1中创建插件文件时自动生成的。这个js的主要作用就是链接本地代码的接口 通过访问该js接口来调用src文件夹中不同平台的本地方法        

     3.3 插件配置详细

         3.3.1 以一个简单demo为例子来表示相应配置信息 在这创建了相应android平台的AlipayLogin.java 和ios平台的RDMAlipayLogin.h RDMAlipayLogin.m文件 主要实现了字符串的显示

AlipayLogin.java文件:

package com.rizhaodarkmatter.alipayLogin;

import org.apache.cordova.*;
import org.json.JSONArray;
import org.json.JSONException;

public class AlipayLogin extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray data, CallbackContext callbackContext) throws JSONException {

        if (action.equals("auth")) {

            String name = data.getString(0);
            String message = "Hello, " + name;
            callbackContext.success(message);

            return true;

        } else {

            return false;

        }
    }
}


RDMAlipayLogin.h和RDMAlipayLogin.m文件:

#import <Cordova/CDV.h>

@interface RDMAlipayLogin : CDVPlugin

- (void) auth:(CDVInvokedUrlCommand*)command;

@end
#import "RDMAlipayLogin.h"

@implementation RDMAlipayLogin

- (void)auth:(CDVInvokedUrlCommand*)command
{

    NSString* name = [[command arguments] objectAtIndex:0];
    NSString* msg = [NSString stringWithFormat: @"Hello, %@", name];

    CDVPluginResult* result = [CDVPluginResult
                               resultWithStatus:CDVCommandStatus_OK
                               messageAsString:msg];

    [self.commandDelegate sendPluginResult:result callbackId:command.callbackId];
}

@end



md5-db2dcbc4d3e0efb66e4bd996c5b0dccb



<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-alipay-login" version="1.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>AlipayLogin</name>
    <preference name="APP_ID"/>
    <js-module name="AlipayLogin" src="www/alipaylogin.js">
        <clobbers target="AlipayLogin" />
    </js-module>

    <!--android平台的配置-->
    <platform name="android">

        <!--config-file 是把你android平台的java文件配置进去 feature中的name可以自定义-->
        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="AlipayLogin" >
                <param name="android-package" value="com.rizhaodarkmatter.alipayLogin.AlipayLogin"/>
            </feature>
        </config-file>

        <config-file parent="/*" target="AndroidManifest.xml">
            <uses-permission android:name="android.permission.INTERNET"/>
            <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
            <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
            <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
        </config-file>

        <config-file target="AndroidManifest.xml" parent="/manifest/application">
            <!-- alipay sdk begin -->
            <activity
                    android:name="com.alipay.sdk.app.H5PayActivity"
                    android:configChanges="orientation|keyboardHidden|navigation|screenSize"
                    android:exported="false"
                    android:screenOrientation="behind"
                    android:windowSoftInputMode="adjustResize|stateHidden">
            </activity>
            <activity
                    android:name="com.alipay.sdk.app.H5AuthActivity"
                    android:configChanges="orientation|keyboardHidden|navigation"
                    android:exported="false"
                    android:screenOrientation="behind"
                    android:windowSoftInputMode="adjustResize|stateHidden">
            </activity>
            <!-- alipay sdk end -->
        </config-file>

         <!--source-file 其中 src中的目录是你插件java文件的目录 target-dir是把你插件的类文件在cordova工程中的目录,记住com/moke/testPlugin一定要是你自己的文件的包名-->
        <source-file src="src/android/AlipayLogin.java" target-dir="src/com/rizhaodarkmatter/alipayLogin" />
        <source-file src="src/android/lib/alipaySdk-20180601.jar" target-dir="libs"/>
    </platform>

    <!--ios平台的配置-->
     <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="AlipayLogin">
                <param name="ios-package" value="RDMAlipayLogin"/>
            </feature>
            <preference name="alipayid" value="$APP_ID"/>
        </config-file>
        <config-file target="*-Info.plist" parent="CFBundleURLTypes">
            <array>
                <dict>
                    <key>CFBundleURLName</key>
                    <string>alipay</string>
                    <key>CFBundleURLSchemes</key>
                    <array>
                        <string>ali$APP_ID</string>
                    </array>
                </dict>
            </array>
        </config-file>
        <!-- Plugin source code -->
        <framework src="CoreTelephony.framework" weak="true"/>
        <framework src="SystemConfiguration.framework" weak="true"/>
        <framework src="CoreMotion.framework" weak="true"/>
        <framework src="CFNetwork.framework" weak="true"/>
        <framework src="libc++.tbd" weak="true"/>
        <framework src="libz.tbd" weak="true"/>
        <framework src="CoreText.framework" weak="true"/>
        <framework src="CoreGraphics.framework" weak="true"/>
        <framework src="UIKit.framework" weak="true"/>
        <framework src="QuartzCore.framework" weak="true"/>
        <framework src="Foundation.framework" weak="true"/>

        <framework src="src/ios/lib/AlipaySDK.framework" custom="true"/>
        <resource-file src="src/ios/lib/AlipaySDK.bundle"/>

        <header-file src="src/ios/RDMAlipayLogin.h" />
        <source-file src="src/ios/RDMAlipayLogin.m" />
    </platform>

</plugin>



md5-b95c13811182b18b6779fc2a92a6bb10



var exec = require('cordova/exec');

exports.auth = function (arg0, success, error) {
    exec(success, error, 'AlipayLogin', 'auth', [arg0]);
};



md5-a83de22bca568f5d02add4ca7f3d5ec7



var success = function(e){
          alert(e);
      }
      var error = function(e){
          alert(e);
      }
      AlipayLogin.auth("Geek",success,error);

文档信息

版权声明:可自由转载(请注明转载出处)-非商用-非衍生

发表时间:2018年7月5日 09:33