自定义cordova插件

1、安装plugman

若我们需要自己编写自己的插件，则可以使用额外的一个叫做plugman的工具, 该工具可直接通过npm来安装。

npm install -g plugman

使用plugman的好处就是会自动帮我们生成一套代码框架，而不需要我们再自己一个个建立文件

2、生成插件框架

安装成功后，就可以使用plugman命令来自动生成插件代码框架，避免手工建立和输入代码文件的工作：

cd到你要生成插件的目录，执行下面这句命令生成插件

plugman create --name <PhotoBrower> --plugin_id <cordova-plugin-photobrower> --plugin_version <0.0.1> 

之后就可以发现在目录下生成了PhotoBrower文件夹。

3、添加平台支持

进入插件目录,运行相应的平台支持命令，就可以支持我们需要的平台，命令如下：

plugman platform add --platform_name android (Andriod)
plugman platform add --platform_name ios    (iOS)

可以发现当我们添加了平台支持后，/src目录下就多了相应平台的文件夹

4、添加package.json文件

在没有给插件添加package.json文件之前，直接安装插件是会报错的，这个时候就需要我们添加package.json文件了，执行如下命令：

npm init

这个命令会引导你创建一个package.json文件，其中包括填写一些插件的信息。

name：名字建议写plugin_id
version：
description：
main：
scripts：
author：
license：

5、编写插件

插件准备工作做完了，接下来就是编写插件功能了

6、安装插件

cordova plugin add <插件的地址>

7、使用插件

• 声明

declare var cordova: any;

@Component({
  selector: 'page-chaoshang',
  templateUrl: 'chaoshang.html',
})

• 调用

cordova.plugins.PhotoBrowser.show(imageUrls, index);

8、问题汇总

• plugin.xml配置

<?xml version='1.0' encoding='utf-8'?>
<plugin 
id="cordova-plugin-photobrowser" 
version="0.0.1" 
xmlns="http://apache.org/cordova/ns/plugins/1.0" 
xmlns:android="http://schemas.android.com/apk/res/android">

    <name>PhotoBrowser</name>
    <js-module name="PhotoBrowser" src="www/PhotoBrowser.js">
        <clobbers target="cordova.plugins.PhotoBrowser" />
    </js-module>

    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="PhotoBrowser">
                <param name="android-package" value="wythetan.cordova.photobrowser.PhotoBrowser" />
            </feature>
        </config-file>
         
        <!-- 在AndroidManifest.xml添加activity -->
        <config-file target="AndroidManifest.xml" parent="/manifest/application">
            <activity android:name="wythetan.cordova.photobrowser.PhotoBrowserActivity" android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen" />
        </config-file>

        <config-file parent="/manifest" target="AndroidManifest.xml">
            <uses-permission android:name="android.permission.INTERNET" />
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
            <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
        </config-file>
        
        <!-- 添加依赖java文件-->
        <source-file src="src/android/PhotoBrowser.java" target-dir="src/wythetan/cordova/photobrowser" />
        <source-file src="src/android/PhotoBrowserActivity.java" target-dir="src/wythetan/cordova/photobrowser" />
        
        <!-- 添加依赖布局文件-->
        <source-file src="src/android/layout/activity_photo_browser.xml" target-dir="res/layout" />
        
        <!-- 添加依赖 framework-->
        <framework src="src/android/photobrowser.gradle" custom="true" type="gradleReference" />
    </platform>

    <platform name="ios">
        <config-file parent="/*" target="config.xml">
            <feature name="PhotoBrowser">
                <param name="ios-package" value="PhotoBrowser" />
            </feature>
        </config-file>
        <source-file src="src/ios/PhotoBrowser.m" />

        <!-- SDWebImage - 引入依赖文件 注意路径一定要对 -->
        <header-file src="src/ios/SDWebImage/NSData+ImageContentType.h" />
        <source-file src="src/ios/SDWebImage/NSData+ImageContentType.m" />

        <!-- 引入资源  -->
        <resource-file src="src/ios/XLPhotoBrowser+CoderXL/Vender/FSActionSheet/FSActionSheetResources/FSActionSheet_cancel@2x.png" />
        <resource-file src="src/ios/XLPhotoBrowser+CoderXL/Vender/FSActionSheet/FSActionSheetResources/FSActionSheet_cancel@3x.png" />

        <!-- 引入依赖的 framework  -->
        <framework src="SystemConfiguration.framework" />

    </platform>
</plugin>