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)
    
    

做完上面步骤，就完成了对现有工程中cordova插件的自动化接入了。

如有说的不对的地方请指正