zoukankan html css js c++ java

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

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

查看全文

相关阅读:
vim+makefile入门编辑，编译，差错实例
 vim操作备忘录
 vim学习、各类插件配置与安装
 ubuntu命令行下java工程编辑与算法（第四版）环境配置
 【RabbitMQ】命令行使用学习
 【Docker】RabbitMQ使用学习
 Jmeter如何把响应数据的结果保存到本地的一个文件
 Selenium + Python 自动化测试环境搭建
 Jmeter监控服务器-CPU，Memory，Disk，Network性能指标
 Jmeter 聚合报告---测试结果分析

原文地址：https://www.cnblogs.com/xiongwj0910/p/11596926.html

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

Cordova前端流程

先聊web端，再聊iOS端。

几个文件介绍

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中各个参数

插件名称：版本号

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

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

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