刚刚做了一个项目,想试试混合开发。然后去网上溜达了一圈加上前端同事的建议,最后选择了已经发布好多年的cordova。至于为啥要用这么老的技术来做混合开发主要有以下几个方面的考虑:
1.cordova可以直接把现有的前端代码嵌入到ios原生项目中。因为我这个ios项目有部分功能在移动web端也是有的,所以前端可以直接把代码拷贝过来。
2.cordova比较成熟。前端同事说前面用过,使用过程还是比较顺利。
3.性能不是太差,而且有热更新的能力。
4.对现在的原生项目侵入小,我可以直接使用cocopods来导入cordova插件到我现在的项目中。不需要建立一个cordova项目。如果以后换成其他技术方案也很容易。
虽然说技术比较成熟了,但是cordova确实有点老了。网上的资料也不是太多。所以开发中还是遇到了很多坑。以下就是我在开发中遇到的一些坑。
坑1.cordova项目建立
如我前面提到的,在这个项目中我不是建立的一个cordova项目。而是使用cocopods导入的cordova第三方库。cocopods项目的建立网上有很多就不赘述了。下面是Podfile文件中cordova文件导入的代码,第一个是cordova的框架,其他的都是我项目中需要的cordova插件,这些插件提供了对应的原生功能如果设备信息、网络情况、文件访问等。p-1
p-1导入后 直接在终端中执行pod install命令就可以把cordova添加到现在的原生项目中了。如果是学习或者第一次使用cordova的朋友 建议你一定导入 “ pod 'phonegap-ios-template' ” 这个东东到项目中。他会导入一个完整的cordova项目。还有对应的实例、www文件、config.xml等。你可以在这个文件上参考修改。用cocopods来导入cordova 虽然方便,但是其他方面相对直接建立一个cordova项目有以下弊端:
1.cocopods 上在我写这篇文章时支持的cordova最高版本是4.5.4。我在github上看到的cordova最新版本在5.0.1。4.5.4是在2017年发布的。我也没去详细了解相对于5.0.X的版本,4.5.4有哪些功能欠缺。但是在准备做热更新时发现。是需要5.0.X版本来支持的。
2.cocopods 支持的cordova插件数比较少但是基本满足日常开发,如果你确实需要一些cocopods不支持的插件你可以手动导入。手动导入插件我们在下面在表。你可以使用pod search cordova 来查看 插件基本都是以cordova-plugin-* 来命名的 很好识别。 p-2
p-2cocopods导入cordova的弊端在我这个项目中主要就是以上2个点。相对于cocopods导入的优点来说。我还是推荐使用cocopods来导入。比较符合我们ios的正常开发。
坑2.swift自定义cordova插件
自定义插件涉及到4个文件的编辑。分别是1.swift类提供具体功能。2.config.xml文件需要把你自定义的swift类添加进去。3.cordova_plugins.js文件也是需要你自己把添加的自定义类加入进去。这个文件主要是让cordova可以去查找对应的js对象。4.js文件,js文件主要是调用swift方法。你需要在js类中调用swift方法。
在网上查到的大部分都是基于oc来开发的。但是我这个项目是swift。在自定义插件时遇到的一个坑就是函数命名了、swift类名、js代码函数的命名了。以下我用一个简单例子来说明。这个例子的作用很简单设置当前viewcontroller的title。
1.编写swift代码。如p-3
p-3注意点1. class前面需要用 @objc(类名) 来修饰 。
注意点2. 插件类需要继承自CDVPlugin 类。CDVPlugin类是自定义插件必须继承的类。
注意点3. 方法名需要用@objc 修饰。
注意点4. 参数必须是CDVInvokedUrlCommand 类型。前端传过来的参数都是通过CDVInvokedUrlCommand中的arguments来获取。可以看到cordova中对这个对象的定义 p-4
p-41._callbackId 为网页回调方法的id
2._className 插件的类名。在我这个例子中,就是"A"
3.js调用的swift代码的方法名。在我这个例子中 他就是”setTitle“。但是需要注意的是在js代码中调用时不能写成"setTitle" 而需要传递“setTitleWithCommand” 需要加上 “WithCommand”。
4._arguments 这个参数是一个数组。js想传递参数都可以放在这个数组中。
2.config.xml中添加对应的swift类
在config.xml中添加如果xml节点 如图p-5
p-5放在其他feature节点后面即可。
3.cordova_plugins.js文件的添加
如果你是使用cocopods导入的。那么在www文件下有一个cordova_plugins.js文件。
网友评论