cordova 插件开发

本文目的

正确快速配置插件中xml,js和html之间的关系。

环境配置

npm版本5.5.1，cordova版本7.1.0，本文以iOS为例进行说明。

插件目录

以cordova-plugin-splashscreen为例，其目录结果如图所示：

Snip20171108_3.png

如果是自定义插件其中四个文件必不可少，分别是package.json，src文件夹,www文件夹和plugin.xml

• plugin.xml文件

  主要作用:
  1.决定html该如何调用js
  2.配置原生（native）界面的类名
  3.其它作用

<?xml version="1.0" encoding="UTF-8" ?>
<plugin xmlns="http://phonegap.com/ns/plugins/1.0"
    id="cordova-plugin-toast"
    version="1.0.0">
    <name>toastPlugin</name>
    <description>toast插件</description>
    
    <js-module src="www/toast.js" name="toastPlugin">
        <clobbers target="cordova.plugins.toastName" />
    </js-module>
    <!--src：插件中www文件夹下的JS文件全称，name：测试过程发现修改并没有什么影响，可能有什么用处，只是现在没发现，target：这里有两种写法，不同的写法标志着plugin.xml、js和html中的代码不同，具体不同点，下文进行描述-->
    
    <platform name="ios">
        <source-file src="src/ios/TestPlugin.m" />
        <header-file src="src/ios/TestPlugin.h" />
        <source-file src="src/ios/TestViewController.m" />
        <header-file src="src/ios/TestViewController.h" />
        <resource-file src="src/ios/TestViewController.xib" />
        <resource-file src="src/ios/test.png" />
        
        <config-file target="config.xml" parent="/widget">
            <feature name="toast">
                <param name="ios-package" value="TestPlugin" />
            </feature>
        </config-file>
    </platform>
</plugin>

• src文件夹
  

  存放原生的代码。 Snip20171108_4.png

• www文件夹
  存放js文件。

• package.json文件
  用来描述该插件的json文件

{
    "name":"cordova-plugin-toast",
    "version":"1.0.0"
}

这个文件一定要配置，否则会报错如图：

Snip20171107_6.png

• 创建插件文件夹

  
  Snip20171108_14.png
  Snip20171108_15.png

xml、js和原生代码关系

Snip20171107_8.png

xml、js和html关系

js代码一

若自定义插件中js文件是这样的：

插件中js

那么插件添加到项目中是在Xcode中js文件是这样的：

xcode中js文件
三者对应关系：
Snip20171108_6.png

js代码二

若自定义插件中js文件是这样的：

Snip20171108_10.png

那么插件添加到项目中是在Xcode中js文件是这样的：

Snip20171108_11.png
三者对应关系：
Snip20171108_13.png

添加插件

Snip20171107_5.png

参考文章
cordova安装和插件详解
使用Cordova开发iOS App -- 环境搭建
使用Cordova开发iOS App -- 开发iOS插件
使用Cordova开发iOS App -- 打包插件及JS脚本
详细cordova讲解