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="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做了什么

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

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

上一篇:WKWebView使用注意事项


下一篇:SocketHelper