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

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

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

时间： 2024-11-03 22:23:11

Cordova-在现有iOS工程自动化接入Cordova插件的相关文章

集成ReactNative到现有Ios工程

前段时间刚接触了ReactNative,感觉还不错.今天心血来潮就把这边文章分享给大家,好了让我们直奔主题吧! 1.搭建ReactNative开发基础环境可以根据http://reactnative.cn/docs/0.31/getting-started.html文档来配置,安装必须的工具 2.创建一个Ios工程 TestRTC 3.进入到工程根目录下面执行安装ReactNative命令行工具  npm install -g react-native-cli 4.在工程的根目录下面创建一个Re

iOS使用Object-C自定义cordova插件（－）

1.  创建项目 打开终端,切换到桌面,然后使用`ionic`创建一个测试项目,命名CountTest. cd ./Desktop/ sudo ionic start CountDemo 或 //使用cordova ,但是后期cordova不知道怎么引导ionic中,如果你知道请留言告诉我,感谢!        sudo cordova create CountDemo com.twenty.CountDemo CountDemo 1: 项目创建到桌面的目录名, 2: iOS Bundle Id

ionic cordova plugin for ios

源代码结构目录: payplugin: |_src |_android |_PayPlugin.java |_ios |_CDVPayPlugin.h |_CDVPayPlugin.m |_www |_payplugin.js plugin.xml --====================================== payplugin/www/payplugin.js var exec = require('cordova/exec');/*window.payplugin = f

cordova无法删除ios插件的解决办法

错误如下: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff; min-height: 13.0px } span.s1 { } Unin

Cordova webapp实战开发：（6）如何写一个iOS下自动更新的插件？

上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了. 本次练习你能学到的 学习如何获取iOS当前版本号 学习iOS下插件类的编写 学习iOS下插件的配置 学习iOS下插件的调用 主要内容 APP中[检查更新]显示当前版本号 插件类的编写 在上一篇介绍Andorid插件时我们贴出了很多源码,这里也直接贴出代码,首先是iOS下插件的代码. 我们在Plugins下新建两个文件,一个头文件

使用 jenkins 自动化编译cordova for android 生成 APK

引言 前文中已经介绍了什么是cordova 为什么要用cordova,基础的环境搭建以及如何编译打包生成APK安装包,接下来我们介绍如何使用Jenkins 自动化编译打包生成APK安装包! 服务器搭建 在搭建jerkins之前首先需要一台服务器环境,一个虚拟机或者阿里云租一台,这里我以阿里云服务器为例子: 准备一台阿里云服务器:系统为centos docker环境的搭建 准备一台阿里云服务器,准备一个域名指向该服务器,本例暂用 jenkins.zscode.com 不知道如何操作的小伙伴请自行百

Unity3d与iOS交互开发——接入平台SDK必备技能

原地址:http://www.2cto.com/kf/201401/273337.html# 前言废话:开发手机游戏都知道,你要接入各种平台的SDK.那就需要Unity3d与iOS中Objective-C的函数有交互,所以你就需要用到如下内容: 一.Unity3d To iOS: 1.创建一个C#文件 SdkToIOS.cs 这是调用iOS函数的接口: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 public class SdkToIOS: Mo

给iOS工程增加Daily Build

给iOS工程增加Daily Build  前言 Daily Build 是一件非常有意义的事情,也是敏捷开发中关于 “持续集成” 的一个实践.Daily Build 对于开发来说有如下好处: 保证了每次 check in 的代码可用,不会造成整个工程编译失败. 进度跟进.产品经理可以每天看到最新的开发进度,并且试用产品,调整一些细节.很多时候,一个新功能,你真正用了一下才能有体会好或不好,所以 daily build 也给产品经理更多时间来调理他的设计. 需求确认.产品经理可以确认开发的功能细节

功能自动化接入持续集成方案

功能自动化接入持续集成方案 功能自动化一般用于项目集中测试.回归测试.dailybuild等,我们不可能通过IDE手动来运行case,一般可借助于jenkins或平台化的方式来批量执行case.下面介绍如何将功能自动化接入jenkins. 接入jenkins主要用到了其定时和轮询的功能,我们只要准备好构建jar(build.sh)和执行case(execCase.sh)的脚本,放入jenkins的Excute shell模块,然后配置定时或轮询的时间即可.build.sh和execCase.sh