cordova 自定义插件，养成良好习惯

cordova混合编程中总能遇到调取原生功能，有cordova官方插件的，也有第三方自定义插件的，也有找不到现成的需要自己定义的。
已有插件的不多说了，说下需要自己定义插件吧。目前项目中用的都是直接调用原生，没有形成插件形式，优点是随用随写，缺点是跨平台时候不容易维护，移植性也不太好。
下面来介绍创建自己的cordova 插件，主要功能是从App中打开设备设置，切换网络，创建 VPNPlugin 文件夹，先看下具体的目录结构：

先来看看 plugin.xml 的内容：

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="VPNPlugin" version="1.0.0">
    <name>VPNPlugin</name>
    <description>Cordova VPNPlugin Plugin</description>
    <license>Apache 2.0</license>
    <keywords>cordova,VPNPlugin</keywords>
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="VPNChange" >
                <param name="ios-package" value="VPNChange"/>
            </feature>
        </config-file>
        <header-file src="src/ios/VPNChange.h"/>
        <source-file src="src/ios/VPNChange.m" />
           <info>
               This plugin is VPNChange
          </info>
    </platform>
  <platform name="android">
        <config-file target="config.xml" parent="/*">
            <feature name="VPNChange" >
                <param name="android-package" value="org.apache.cordova.file.VPNChange"/>
            </feature>
        </config-file>
        <source-file src="src/android/VPNChange.java" target-dir="src/org/apache/cordova/file" />
           <info>
               This plugin is android VPNChange
          </info>
    </platform>
</plugin>

有几个关键的字段需要解释下：
id: 插件的标识，即发布到 plugins.cordova.io 的 ID
name：插件的名称
description：描述信息
js-module：对应我们的 javascript 文件，src 属性指向
platform：支持的平台
这里是插件的配置信息，最后会添加到 res/xml/config.xml 文件中，并且将我们的 src/下的资源文件，复制到 相应的平台下。

看 VPNChange.java 的内容：

package org.apache.cordova.file;
import android.content.Intent;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

public class VPNChange extends CordovaPlugin {
    public static final String TOAPN ="getVPNInfo";
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if(action.equals(TOAPN)){
            Intent intent = new Intent(android.provider.Settings.ACTION_APN_SETTINGS);
            this.cordova.startActivityForResult(this, intent, 1);
        }
        return true;
    }
}

另iOS平台下VPNChange.h 和 VPNChange.m 的内容

.h文件
#import <UIKit/UIKit.h>
#import <Cordova/CDV.h>
@interface VPNChange : CDVPlugin

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

@end

.m文件

#import "VPNChange.h"

@implementation VPNChange

- (void)getVPNInfo:(CDVInvokedUrlCommand*)command
{
    
    NSDictionary *simData = [NSDictionary dictionaryWithObjectsAndKeys:
                             @"VPN", @"mnc",
                             nil];
    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"prefs:root=General&path=Network/VPN"]];
    NSLog(@"prefs:root=General&path=Network/VPN");
    NSURL *url = [NSURL URLWithString:UIApplicationOpenSettingsURLString];
    if ([[UIApplication sharedApplication] canOpenURL:url]) {
        [[UIApplication sharedApplication] openURL:url];
    }
    CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsDictionary:simData];
     sendPluginResult:pluginResult callbackId:command.callbackId];
}
@end

插件编写完成 ，使用cordova 命令 安装插件 cordova plugin add 插件目录路径
插件中 iOS和安卓方法统一 ，在js 中用统一方法掉用插件

 function chanegVPN() {     
      cordova.exec(successFunction, failFunction, "VPNChange",
                        "getVPNInfo", []);
}
function successFunction(data){
   }
 function failFunction(message){
}

注：本插件直接使用 cordova.exec 调用，没有使用VPNPlugin.js 进行组装，若使用需要在plugin.xml中添加配置

<js-module name="VPNPlugin" 
        <clobbers target="cordova.plugins. VPNPlugin"/>
    </js-module>

VPNPlugin.js中内容为

var VPNPlugin = {    getVPNInfo: function(successCallback, errorCallback) {        cordova.exec(successCallback, errorCallback, 'VPNChange','getVPNInfo',[]);    }};module.exports = VPNPlugin;

调用方式 相应的需要改变 cordova.plugins. VPNPlugin. getVPNInfo(e,f);