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.其它作用

    toastPlugin
    toast插件
    
    
        
    
    
    
    
        
        
        
        
        
        
        
        
            
                
            
        
    

• 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讲解