本文目的
正確快速配置插件中xml,js和html之間的關(guān)系。
環(huán)境配置
npm版本5.5.1，cordova版本7.1.0，本文以iOS為例進(jìn)行說明。
插件目錄
以cordova-plugin-splashscreen為例，其目錄結(jié)果如圖所示：
Snip20171108_3.png
如果是自定義插件其中四個文件必不可少，分別是package.json，src文件夾,www文件夾和plugin.xml
-
plugin.xml文件
主要作用:
1.決定html該如何調(diào)用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：測試過程發(fā)現(xiàn)修改并沒有什么影響，可能有什么用處，只是現(xiàn)在沒發(fā)現(xiàn)，target：這里有兩種寫法，不同的寫法標(biāo)志著plugin.xml、js和html中的代碼不同，具體不同點(diǎn)，下文進(jìn)行描述-->
<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"
}
這個文件一定要配置，否則會報(bào)錯如圖：
Snip20171107_6.png
-
創(chuàng)建插件文件夾
Snip20171108_14.png
Snip20171108_15.png
xml、js和原生代碼關(guān)系
Snip20171107_8.png
xml、js和html關(guān)系
js代碼一
若自定義插件中js文件是這樣的：
插件中js
那么插件添加到項(xiàng)目中是在Xcode中js文件是這樣的：
xcode中js文件
三者對應(yīng)關(guān)系：
Snip20171108_6.png
js代碼二
若自定義插件中js文件是這樣的：
Snip20171108_10.png
那么插件添加到項(xiàng)目中是在Xcode中js文件是這樣的：
Snip20171108_11.png
三者對應(yīng)關(guān)系：
Snip20171108_13.png
添加插件
Snip20171107_5.png
參考文章
cordova安裝和插件詳解
使用Cordova開發(fā)iOS App -- 環(huán)境搭建
使用Cordova開發(fā)iOS App -- 開發(fā)iOS插件
使用Cordova開發(fā)iOS App -- 打包插件及JS腳本
詳細(xì)cordova講解
