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

---

 

  
  poros-mm  
  A sample Apache Cordova application that responds to the deviceready event.  
  Apache Cordova Team  
    
    
    
    
    
    
    
    
    
   
     
    
   
      
     
    
    
    
    
    
    
    
    
    
    
    
    
   
      
     
  
   
     
  
   
     
  
   
      
     
  
   
     
  
   
     
  
   
     
  
  
   
     
  
   
     
  
  
   
     
  

• Plugin：cordova框架中引入的插件名称和版本

• feature: cordova.exec方法中“消息名称”与对应的“native类名”映射

• preference:控制对应插件中的某些属性值

---

plugin.xml wkwebview插件的xml文件

---

    Cordova WKWebView Engine
    Cordova WKWebView Engine Plugin
    Apache 2.0
    cordova,wkwebview,webview
    https://git-wip-us.apache.org/repos/asf/cordova-plugin-wkwebview-engine.git

    
        
        
    

    
    
        
            
        

        
            
        

        
            
                
            
            
        

        

        
        
        
        
        
        
    

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

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

转载于:https://www.cnblogs.com/xiongwj0910/p/11596926.html