2018-03-14 cordov插件自定義流程

一.前期開發(fā)環(huán)境

1.android studio和xcode開發(fā)環(huán)境

2.安裝node.js?

3.安裝plugman

4.命令工具環(huán)境（可以安裝git也可以使用系統(tǒng)自帶的工具，window的dos，ios的終端）

5.subline text3 主要用于編輯插件的的文件（當然也可以用notepad 看個人喜好也可以用一些其它編輯工具）

二.創(chuàng)建工程

1.安裝cordova和plugman

使用npm命令：npm install -g cordova?

? ? ? ? ? ? ? ? ? ? ? ? ?npm install -g plugman

如果是mac上有可能安裝失敗虱朵，這是因為讀寫權限問題痒玩，在命令前面加上sudo就好。

cordova安裝的是最新版本族壳。

2.創(chuàng)建android或ios的cordova項目

?雖然這一步?jīng)]必要寫，網(wǎng)上也有很多教程，但是為了整個流程的完整性补履，還是寫出來

命令步驟如下：

在這之前有一點細碎的事，個人習慣一定要把工程放在合適的位置

例如在window 的DOS 環(huán)境下剿另，cd到相應的磁盤目錄在使用下面的命令（ios則直接在Desktop目錄下就可以了也就是桌面上）

? ? 2.1 創(chuàng)建Hello工程

? ? ? ? ? cordova create hello ?com.moke.hello ?Hello?

? ? ? ? ? 第一個hello是創(chuàng)建的工程文件夾名中間的com.moke.hello就不用多說了箫锤，Hello,工程名

? ? 2.2 添加開發(fā)環(huán)境平臺

? ? ? ? ?首先得切換命令目錄到工程目錄，例如本例子就需要 cd hello到工程目錄中雨女，然后執(zhí)行以下命令： ?

? ? ? ? ?android環(huán)境：cordova platform add android 谚攒，ios環(huán)境：cordova platform add ios?

? ? ? ? 會生出如下目錄(ios為例)：

圖1-1

?2.3 添加插件

? ? ? ? ? 這一步可做可不做，但是命令還是要寫出來氛堕。 cordova plugin add ?********* 馏臭，星號部分為插件的地址或者自定義插件的目錄地址

? ? ? ? ? 可以添加也可以刪除 cordova plugin rm ******** ,星號為插件名如果不知道插件名可以用命令查看當前工程的插件列表 cordova plugin list

? ? ? ?2.4 最后就是編譯?

? ? ? ? ? cordova build ios或者android

三自定義插件

? ? ?有時候github或者npm上的插件不能滿足項目需求時就需要自己自定義插件

? ? ?3.1創(chuàng)建插件基本結構

? ? ?先cmd到桌面或者任意磁盤目錄執(zhí)行以下命令：

? ? 輸入?plugman create --name com.moke.TestPlugin --plugin_id com.moke.testPlugin --plugin_version 0.0.1

生成一個名字為com.moke.TestPlugin的插件文件夾以及目錄為下：

3.2 插件目錄配置

? ? ? ? ?plugin.xml 是配置相關android ios ?wp等平臺的信息，這是一個非常重要的配置文件讼稚，在js中能否調(diào)用到插件中的本地方法就需要看這個文件中是否配置正確括儒。

? ? ? ? ?src文件夾：里面放置的是各個平臺的類文件以及一些lib庫绕沈，但是需要注意在src目錄下要新建例如命名為ios的文件夾這個文件夾就放置的ios的.h 和.m的文件以及ios環(huán)境下插件所需要的第三方庫等，同等帮寻，放置android的java文件需要創(chuàng)建命名為android的文件夾乍狐。

? ? ? ? ?www文件夾：這個文件夾里面有一個js文件，是在3.1中創(chuàng)建插件文件時自動生成的规婆。這個js的主要作用就是鏈接本地代碼的接口通過訪問該js接口來調(diào)用src文件夾中不同平臺的本地方法 ? ? ? ?

? ? ? ? ?3.3 插件配置詳細

? ? ? ? ? ? ?3.3.1 以一個簡單demo為例子來表示相應配置信息在這創(chuàng)建了相應android平臺的hello.java 和ios平臺的HVPhello.h HVPhello.m文件主要實現(xiàn)了字符串的顯示

? ? ? ? ? hello.java文件:

package com.moke.testPlugin;

import org.apache.cordova.*;

import org.json.JSONArray;

import org.json.JSONException;

public class Hello extends CordovaPlugin {

? ? @Override

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

? ? ? ? if (action.equals("greet")) {

? ? ? ? ? ? String name = data.getString(0);

? ? ? ? ? ? String message = "Hello, " + name;

? ? ? ? ? ? callbackContext.success(message);

? ? ? ? ? ? return true;

? ? ? ? } else {

? ? ? ? ? ? return false;

? ? ? ? }

? ? }

}

??HVPhello.h HVPhello.m文件

#import

@interface HWPHello : CDVPlugin

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

@end

#import "HWPHello.h"

@implementation HWPHello

- (void)greet:(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

? ?備注：在本地插件文件中 ?

? ? ? java callbackContext 和 ios中的 sendPluginResult:result? 都代表了將相應結果回調(diào)到你的html中的js回調(diào)方法中澜躺。

? ?3.3.2 plugin.xml配置

? ? TestPlugin

? ? Cordova hello Plugin

? ? Apache 2.0

? ? cordova,hello

? ? ? ? 備注：在執(zhí)行plugman命令生成的plugin文件在最開始是只有和標簽的?

所以平臺相關配置還是需要自己配置，具體配置的注解在代碼中我已經(jīng)標明抒蚜。

? ? ?3.3.3 www文件夾下的js配置：

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

exports.greet = function(msg, success, error) {

? ? exec(success, error, "TestPlugin", "greet", [msg]);

};

? ? ? 備注：js是執(zhí)行plugman自動生成的掘鄙，但是其中的exports 和exec中的相應參數(shù)需要做一些改變，代碼中做了注釋

? ? ? 4.插件本地代碼的創(chuàng)建

? ? ? ? ? 插件本地代碼邏輯和方法的編碼 ?也就是java文件和 .h .m 文件的創(chuàng)建嗡髓，可以在android studio ?或者 xcode 中加載相應平臺的cordova工程項目操漠，在項目工程中做插件本地代碼的編碼，然后把寫好的文件再copy到插件文件中的src中相應文件夾下即可饿这。

? ? ? 5.添加插件浊伙。

? ? ? 先cmd到相應cordova目錄然后執(zhí)行 cordova plugin add ?xx/xx/xx/com.moke.TestPlugin ? 。

? ? ? 這時就可以看到在cordova工程中的插件目錄中添加好的 com.moke.TestPlugin插件

? ? ?6.插件調(diào)用

? ? ? 在你的cordova工程中的 html頁面用調(diào)用js方法并且在js的function中寫入

? ? var success = function(e){

? ? ? ? ? alert(e);

? ? ? }

? ? ? var error = function(e){

? ? ? ? ? alert(e);

? ? ? }

? ? ? TestPlugin.greet("Geek",success,error);

? ? ? 四最后一點插件相應的配置

? ? ? ? ? 如果我們寫的插件需要使用第三方庫那么第三方庫的配置怎么辦长捧？

? ? ? ? ? 我們以微信支付為例子 : 只做個簡單的例子配置展現(xiàn)嚣鄙。

? ? ? ? ?plugin.xml配置

? ? ? ? ? id="moke-plugin-wepay"

? ? ? version="1.3.0">

? ? WeChatPay

? ? Cordova wepay Plugin

? ? Apache 2.0

? ? cordova,pay,wechat

? ? ? ? ? ? ? ? weixin

? ? ? ? ? ? ? ? wechat

? ? ? ? ? ? ? ? NSAllowsArbitraryLoads

? ? ? ? ? ? ? ? ? ? CFBundleURLName

? ? ? ? ? ? ? ? ? ? weixin

? ? ? ? ? ? ? ? ? ? CFBundleURLSchemes? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ? ? ? $WECHATAPPID

? ? ? ? ? ? ? This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

? ? ? ? ? ? ? ? android:name=".wxapi.WXPayEntryActivity"

? ? ? ? ? ? ? ? android:label="@string/launcher_name"

? ? ? ? ? ? ? ? android:exported="true"

? ? ? ? ? ? ? ? android:launchMode="singleTop">

? ? ?android-install.js

module.exports = function (context) {

? ? var path? ? ? ? = context.requireCordovaModule('path'),

? ? ? ? fs? ? ? ? ? = context.requireCordovaModule('fs'),

? ? ? ? shell? ? ? = context.requireCordovaModule('shelljs'),

? ? ? ? projectRoot = context.opts.projectRoot,

? ? ? ? plugins? ? = context.opts.plugins || [];

? ? // The plugins array will be empty during platform add

? ? if (plugins.length > 0 && plugins.indexOf('cordova-plugin-wechat') === -1) {

? ? ? ? return ;

? ? }

? ? var ConfigParser = null;

? ? try {

? ? ? ? ConfigParser = context.requireCordovaModule('cordova-common').ConfigParser;

? ? } catch(e) {

? ? ? ? // fallback

? ? ? ? ConfigParser = context.requireCordovaModule('cordova-lib/src/configparser/ConfigParser');

? ? }

? ? var config? ? ? = new ConfigParser(path.join(context.opts.projectRoot, "config.xml")),

? ? ? ? packageName = config.android_packageName() || config.packageName();

? ? // replace dash (-) with underscore (_)

? ? packageName = packageName.replace(/-/g , "_");

? ? console.info("Running android-install.Hook: " + context.hook + ", Package: " + packageName + ", Path: " + projectRoot + ".");

? ? if (!packageName) {

? ? ? ? console.error("Package name could not be found!");

? ? ? ? return ;

? ? }

? ? // android platform available?

? ? if (context.opts.cordova.platforms.indexOf("android") === -1) {

? ? ? ? console.info("Android platform has not been added.");

? ? ? ? return ;

? ? }

? ? var targetDir? = path.join(projectRoot, "platforms", "android", "src", packageName.replace(/\./g, path.sep), "wxapi");

? ? ? ? targetFiles = ["WXPayEntryActivity.java"];

? ? if (['after_plugin_add', 'after_plugin_install'].indexOf(context.hook) === -1) {

? ? ? ? // remove it?

? ? ? ? targetFiles.forEach(function (f) {

? ? ? ? ? ? try {

? ? ? ? ? ? ? ? fs.unlinkSync(path.join(targetDir, f));

? ? ? ? ? ? } catch (err) {}

? ? ? ? });

? ? } else {

? ? ? ? // create directory

? ? ? ? shell.mkdir('-p', targetDir);

? ? ? ? // sync the content

? ? ? ? targetFiles.forEach(function (f) {

? ? ? ? ? ? fs.readFile(path.join(context.opts.plugin.dir, 'src', 'android', f), {encoding: 'utf-8'}, function (err, data) {

? ? ? ? ? ? ? ? if (err) {

? ? ? ? ? ? ? ? ? ? throw err;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? data = data.replace(/^package __PACKAGE_NAME__;/m, 'package ' + packageName + '.wxapi;');

? ? ? ? ? ? ? ? fs.writeFileSync(path.join(targetDir, f), data);

? ? ? ? ? ? });

? ? ? ? });

? ? }

};