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插件的自动化接入了。
如有说的不对的地方请指正
Cordova-在现有iOS工程自动化接入Cordova插件的更多相关文章
- iOS 工程自动化 - 思路整理
4 月份参加 2017@Swift 大会的时候有幸听到了 @zesming 大佬关于美团组件化的 Topic,有一张图印象特别深刻. 来自 @zesming 大佬 后来跟 @zesming 大佬沟通怎 ...
- iOS 工程自动化 - OCLint
前言 最近一直在做 iOS 工程自动化方向的事情,所以把自己研究和实践的内容进行记录并分享,希望能给大家一些帮助. 为什么要使用 OCLint 做为一个静态代码分析工具,我们引入 OCLint 的目的 ...
- Cordova与现有框架的结合,Cordova插件使用教程,Cordova自定义插件,框架集成Cordova,将Cordova集成到现有框架中
一.框架集成cordova 将cordova集成到现有框架中 一般cordova工程是通过CMD命令来创建一个工程并添加Android.ios等平台,这样的创建方式可以完整的下载开发过程中所需要的的插 ...
- Flutter 集成到现有iOS工程
前沿 由于我司已经有自己的App,flutter属于技术引进的一部分,也不太可能重新启动一个项目,因此目前我们是将flutter模块形式注入我们的App之中.即:将flutter模块集成到现在有iOS ...
- Flutter-现有iOS工程引入Flutter
前言 Flutter 是一个很有潜力的框架,但是目前使用Flutter的APP并不算很多,相关资料并不丰富,介绍现有工程引入Flutter的相关文章也比较少.项目从零开始,引入Flutter操作比较简 ...
- 如何在原生工程中引入Cordova工程-for iOS 【转】
http://blog.csdn.net/e20914053/article/details/50170487 如今混合开发方兴未艾,有的项目可能一开始是原生开发的,后期需要加入混合开发,如将Cord ...
- iOS 混合开发之 Cordova 实践
在15年时,之前公司使用 Cordova 做混合开发使用,后来公司没有用到了,现在重新记录下. Cordova (官网:http://cordova.apache.org/)简介: Apache Co ...
- ionic cordova plugin for ios
源代码结构目录: payplugin: |_src |_android |_PayPlugin.java |_ios |_CDVPayPlugin.h |_CDVPayPlugin.m |_www | ...
- PhoneGap,Cordova[3.5.0-0.2.6]:利用插件Cordova-SQLitePlugin来操作SQLite数据库
在PhoneGap应用程序中,我们可以利用一款名叫Cordova-SQLitePlugin的插件来方便的操作基于浏览器内置数据库或独立的SQLite数据库文件,此插件的基本信息: 1.项目地址:htt ...
随机推荐
- 自己动手实现一个html2canvas
前言 昨天写了新手引导动画的4种实现方式,里面用到了 html2canvas 于是就顺便了解了一下实现思路. 大概就是 利用 svg 的 foreignObject 标签, 嵌入 dom, 最后再利用 ...
- 将ShellCode注入进程内存
内存注入ShellCode的优势就在于被发现的概率极低,甚至可以被忽略,这是因为ShellCode被注入到进程内存中时,其并没有与之对应的硬盘文件,从而难以在磁盘中取证,但也存在一个弊端由于内存是易失 ...
- CentOS6.6安装使用MyCat
https://blog.csdn.net/u012948302/article/details/78902092 1. 安装Java环境MyCAT 是使用 JAVA 语言进行编写开发,使用前需要先安 ...
- 095、如何创建Swarm集群?(Swarm02)
参考https://www.cnblogs.com/CloudMan6/p/7862254.html 本节我们将创建三节点的swarm集群(操作系统Ubuntu 16.04 ,Docker 版本均 ...
- c#获取网络时间
public static DateTime GetInternetDate() { var client = new TcpClient("time.n ...
- MySQL 7种 JOIN连表方法
规定:左边的圆代表表 a,右边的代表 b. JOIN 关键字可以在两表之间选中任意部分.] 通过以下代码制造一些数据: delimiter // drop procedure if exists pr ...
- roll out项目中原系统自定义程序不能编辑
1.SE38编辑时报 程序源系统与现阶段系统不一致:Carry out repairs in non-original systems only if urgent 2.SE16N 查看表TADIR, ...
- 2019.9.16 linux安装软件lamp
2019/9/16 Linux软件安装 方式:yum/rpm/源码安装 yum安装: yum 是通过分析RPM的包头数据后,根据各软件的相关性制作出属性相对应的解决方案,然后可以自动处理软件的相依属性 ...
- 状压DP操作
1.’&’符号,x&y,会将两个十进制数在二进制下进行与运算,然后返回其十进制下的值.例如3(11)&2(10)=2(10). 2.’|’符号,x|y,会将两个十进制数在二进制 ...
- Java并发编程实战 第6章 任务并行 第7章 取消与关闭
ExecutorCompletionService CompletionService用来接收一个Executor的执行结果,将已经完成任务,放置在可使用 take 访问的队列上. 大概用法: Exe ...