本文目的
正确快速配置插件中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讲解
