码迷，mamicode.com
首页 > 移动开发 > 详细

Cordova-在现有iOS工程自动化接入Cordova插件

时间：2019-09-27 12:33:57      阅读：131      评论：0      收藏：0      [点我收藏+]

标签：adapter   word   src   message   命令   pool   main   des   json   

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

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

Cordova-在现有iOS工程自动化接入Cordova插件

标签：adapter   word   src   message   命令   pool   main   des   json   

原文地址：https://www.cnblogs.com/xiongwj0910/p/11596926.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！