Cordova-在现有iOS工程自动化接入Cordova插件
Cordova前端流程
模拟Cordova插件命令 自己编写脚本，了解cordova添加插件做了哪些事情。
上一篇文章了解到，web与native的交互主要是cordova.js中的exec方法调用，触发交互事件。UIWebView已经成为过去时，忽略，这里只说wkwebview，exec调用wk的configuration.userContentController中注册的事件cordova，触发回调userContentController:didReceiveScriptMessage:
先聊web端，再聊iOS端。
-
几个文件介绍
cordova_plugins.js：包含cordova中依赖的所有的插件js路径，用于前端导出对应的插件js
package.json：cordova包本身的信息
config.xml:包含所有插件对应于原生的类名的映射关系
plugin.xml:每个插件的描述信息，源文件、资源、依赖库等都写在这里
cordova_plugins.js
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"id": "cordova-plugin-wkwebview-engine.ios-wkwebview-exec",
"file": "plugins/cordova-plugin-wkwebview-engine/src/www/ios/ios-wkwebview-exec.js",
"pluginId": "cordova-plugin-wkwebview-engine",
"clobbers": [
"cordova.exec"
]
},
{
"id": "cordova-plugin-wkwebview-engine.ios-wkwebview",
"file": "plugins/cordova-plugin-wkwebview-engine/src/www/ios/ios-wkwebview.js",
"pluginId": "cordova-plugin-wkwebview-engine",
"clobbers": [
"window.WkWebView"
]
}
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-whitelist": "1.3.3",
"cordova-plugin-wkwebview-engine": "1.1.4"
};
// BOTTOM OF METADATA
});
-
id：cordova-plugin-wkwebview-engine + plugin.xml中的js-module 的name
-
file: js文件存放的路径 plugins/插件名称/ plugin.xml中的js-module的src
-
pluginId:插件名称
-
Clobbers:就是js-module中的clobbers
-
module.exports.metadata中各个参数
-
插件名称：版本号
package.json
{
"name": "com.comtop.testwk",
"displayName": "testWK",
"version": "1.0.0",
"description": "A sample Apache Cordova application that responds to the deviceready event.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Apache Cordova Team",
"license": "Apache-2.0",
"dependencies": {
"cordova-ios": "^4.5.5",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-wkwebview-engine": "^1.1.4"
},
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-wkwebview-engine": {}
},
"platforms": [
"ios"
]
}
}
config.xml
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="com.test.mm" version="1.0.0">
<name>poros-mm</name>
<description>A sample Apache Cordova application that responds to the deviceready event.</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">Apache Cordova Team</author>
<content src="index.html"/>
<plugin name="cordova-plugin-whitelist" spec="1"/>
<access origin="*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<platform name="android">
<allow-intent href="market:*"/>
</platform>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
</platform>
<allow-navigation href="*"/>
<plugin name="cordova-plugin-wkwebview-engine" spec="^1.1.4"/>
<plugin name="cordova-plugin-file" spec="^6.0.1"/>
<plugin name="cordova-sqlcipher-adapter" spec="^0.4.0"/>
<plugin name="cordova-plugin-file-opener2" spec="^2.2.0"/>
<plugin name="cordova-plugin-advanced-http" spec="^2.1.1"/>
<plugin name="cordova-plugin-media-capture" spec="^3.0.3"/>
<plugin name="cordova-plugin-camera" spec="^4.0.3"/>
<plugin name="cordova-save-image-gallery" spec="^0.0.26"/>
<plugin name="cordova-plugin-device" spec="^2.0.3"/>
<plugin name="cordova-plugin-imagepicker" spec="^1.3.0"/>
<feature name="File">
<param name="ios-package" value="CDVFile"/>
<param name="onload" value="true"/>
</feature>
<feature name="CordovaHttpPlugin">
<param name="ios-package" value="CordovaHttpPlugin"/>
</feature>
<feature name="FileOpener2">
<param name="ios-package" value="FileOpener2"/>
</feature>
<feature name="SaveImageGallery">
<param name="ios-package" value="SaveImageGallery"/>
<param name="onload" value="true"/>
</feature>
<feature name="Device">
<param name="ios-package" value="CDVDevice"/>
</feature>
<feature name="Capture">
<param name="ios-package" value="CDVCapture"/>
</feature>
<feature name="Camera">
<param name="ios-package" value="CDVCamera"/>
</feature>
<preference name="CameraUsesGeolocation" value="false"/>
<feature name="ImagePicker">
<param name="ios-package" value="CTPicker"/>
</feature>
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine"/>
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
<feature name="SQLitePlugin">
<param name="ios-package" value="SQLitePlugin"/>
</feature>
</widget>
-
Plugin：cordova框架中引入的插件名称和版本
-
feature: cordova.exec方法中“消息名称”与对应的“native类名”映射
-
preference:控制对应插件中的某些属性值
plugin.xml wkwebview插件的xml文件
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:rim="http://www.blackberry.com/ns/widgets"
xmlns:android="http://schemas.android.com/apk/res/android"
id="cordova-plugin-wkwebview-engine"
version="1.1.4">
<name>Cordova WKWebView Engine</name>
<description>Cordova WKWebView Engine Plugin</description>
<license>Apache 2.0</license>
<keywords>cordova,wkwebview,webview</keywords>
<repo>https://git-wip-us.apache.org/repos/asf/cordova-plugin-wkwebview-engine.git</repo>
<engines>
<engine name="cordova-ios" version=">=4.0.0-dev" />
<engine name="apple-ios" version=">=9.0" />
</engines>
<!-- ios -->
<platform name="ios">
<js-module src="src/www/ios/ios-wkwebview-exec.js" name="ios-wkwebview-exec">
<clobbers target="cordova.exec" />
</js-module>
<js-module src="src/www/ios/ios-wkwebview.js" name="ios-wkwebview">
<clobbers target="window.WkWebView" />
</js-module>
<config-file target="config.xml" parent="/*">
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</config-file>
<framework src="WebKit.framework" weak="true" />
<header-file src="src/ios/CDVWKWebViewEngine.h" />
<source-file src="src/ios/CDVWKWebViewEngine.m" />
<header-file src="src/ios/CDVWKWebViewUIDelegate.h" />
<source-file src="src/ios/CDVWKWebViewUIDelegate.m" />
<header-file src="src/ios/CDVWKProcessPoolFactory.h" />
<source-file src="src/ios/CDVWKProcessPoolFactory.m" />
</platform>
</plugin>
-
Plugin：cordova框架中引入的插件名称和版本
-
feature: cordova.exec方法中“消息名称”与对应的“native类名”映射
-
preference:控制对应插件中的某些属性值
有了这几个关键文件，cordova才能识别和调用到各个插件
-
Cordova plugin add做了什么
-
填充cordova_plugins.js
执行插件add命令之后，会去插件包中读plugin.xml信息， - id字段: plugin字段的id + js-module 的name - file字段: js文件存放的路径。 plugins/插件名称/ plugin.xml中的js-module的src - pluginId字段:插件名称 - Clobbers:就是js-module中的clobbers - module.exports.metadata中各个参数 如插件名称：版本号 -
填充package.json
执行插件命令之后，会去插件包中读plugin.xml，获取包地址和包名，插入到dependencies和cordova字段中。 -
填充config.xml
执行插件命令之后，会去插件包中读plugin.xml信息 读取对应平台的映射信息，插入到config.xml中 - Plugin：cordova框架中引入的插件名称和版本 - feature: cordova.exec方法中“消息名称”与对应的“native类名”映射 - preference:控制对应插件中的某些属性值 -
填充{plugin}.js
每个插件包中都有对应的js文件，add命令会在其中嵌入如下代码 cordova.define(包id, function(require, exports, module) {}); cordova.define的目的是为了前注册包id到coedova对象中。
-
-
Cordova运行时做了什么
cordova.js运行时，读取cordova_plugin.js内容，生成clobbers字段数组中对应的名称对象。比如上面cordova_plugin.js中的cordova.exec 对象，这个对象是ios-wkwebview-exec.js的实例。前端可以直接使用。 -
iOS现有项目自动化接入Cordova插件
-
必要的前提
工程中包含的web资源包含完整的Cordova运行的必要文cordova_plugins.js，exec.js，platform.js，cordova.js等必要资源文件。保证cordova框架能够正常
说明一下，必须包含Cordova运行的基本js,html。 cordova create 项目名称 cordova platform add ios cordova plugin add xxx 这些命令执行之后打开cordova工程我们看见的Staging资源里面的所有文件。我们需要把这些copy到自己现有的工程中。 这一步可以使用脚本处理。 -
Cordova的add命令做了什么
plugin.xml: 每个插件都有一个plug.xml文件，用于标识此插件各个平台依赖的 源文件，资源，库文件 以及插件与实际类名的映射。 config.xml: cordova通过读取config.xml中的配置 找到插件对应的原生实现类，由此类调用对应的原生方法 1.add命令把plugin.xml中的映射 写到config.xml中 2.add命令把plugin.xml中的依赖添加到工程。 -
解析plugin.xml
我们已经有了运行必须的js，xml，html等基础文件，了解了add命令做了什么事情之后，想要现有工程接入插件还差一步，就是把plugin.xml中的依赖添加到工程。 1.打开cordova官网，https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html 2.对照各个字段的意思把源文件/库/资源/头文件/编译设置对工程进行处理。使用工具XcodeProj进行项目的设置，如何使用可以参照我的另外一篇文章[Xcode工程文件pbxproj](https://www.cnblogs.com/xiongwj0910/p/11040820.html)
-
