Cordova-在现有iOS工程自动化接入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="[email protected]" 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做了什么

  • 填充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

    执行插件命令之后，会去插件包中读package.json(不确定是不是读这个文件，也有可能是读plugin.xml)，获取包名和版本号，插入到dependencies和cordova字段中

  • 填充config.xml

    执行插件命令之后，会去插件包中读plugin.xml信息
    读取对应平台的映射信息，插入到config.xml中
    - Plugin：cordova框架中引入的插件名称和版本
    - feature: cordova.exec方法中“消息名称”与对应的“native类名”映射
    - preference:控制对应插件中的某些属性值

    ?

• 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插件的自动化接入了。

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