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)
-