剛剛做了一個(gè)項(xiàng)目矾瘾,想試試混合開(kāi)發(fā)图张。然后去網(wǎng)上溜達(dá)了一圈加上前端同事的建議瘾境,最后選擇了已經(jīng)發(fā)布好多年的cordova崔梗。至于為啥要用這么老的技術(shù)來(lái)做混合開(kāi)發(fā)主要有以下幾個(gè)方面的考慮:
1.cordova可以直接把現(xiàn)有的前端代碼嵌入到ios原生項(xiàng)目中。因?yàn)槲疫@個(gè)ios項(xiàng)目有部分功能在移動(dòng)web端也是有的逻澳,所以前端可以直接把代碼拷貝過(guò)來(lái)闸天。
2.cordova比較成熟。前端同事說(shuō)前面用過(guò)赡盘,使用過(guò)程還是比較順利号枕。
3.性能不是太差,而且有熱更新的能力。
4.對(duì)現(xiàn)在的原生項(xiàng)目侵入小陨享,我可以直接使用cocopods來(lái)導(dǎo)入cordova插件到我現(xiàn)在的項(xiàng)目中葱淳。不需要建立一個(gè)cordova項(xiàng)目。如果以后換成其他技術(shù)方案也很容易抛姑。
雖然說(shuō)技術(shù)比較成熟了赞厕,但是cordova確實(shí)有點(diǎn)老了。網(wǎng)上的資料也不是太多定硝。所以開(kāi)發(fā)中還是遇到了很多坑皿桑。以下就是我在開(kāi)發(fā)中遇到的一些坑。
坑1.cordova項(xiàng)目建立
如我前面提到的蔬啡,在這個(gè)項(xiàng)目中我不是建立的一個(gè)cordova項(xiàng)目诲侮。而是使用cocopods導(dǎo)入的cordova第三方庫(kù)。cocopods項(xiàng)目的建立網(wǎng)上有很多就不贅述了箱蟆。下面是Podfile文件中cordova文件導(dǎo)入的代碼沟绪,第一個(gè)是cordova的框架,其他的都是我項(xiàng)目中需要的cordova插件空猜,這些插件提供了對(duì)應(yīng)的原生功能如果設(shè)備信息绽慈、網(wǎng)絡(luò)情況、文件訪問(wèn)等辈毯。p-1
導(dǎo)入后 直接在終端中執(zhí)行pod install命令就可以把cordova添加到現(xiàn)在的原生項(xiàng)目中了坝疼。如果是學(xué)習(xí)或者第一次使用cordova的朋友 建議你一定導(dǎo)入 “ pod 'phonegap-ios-template' ” 這個(gè)東東到項(xiàng)目中。他會(huì)導(dǎo)入一個(gè)完整的cordova項(xiàng)目谆沃。還有對(duì)應(yīng)的實(shí)例钝凶、www文件、config.xml等管毙。你可以在這個(gè)文件上參考修改腿椎。用cocopods來(lái)導(dǎo)入cordova 雖然方便桌硫,但是其他方面相對(duì)直接建立一個(gè)cordova項(xiàng)目有以下弊端:
1.cocopods 上在我寫(xiě)這篇文章時(shí)支持的cordova最高版本是4.5.4夭咬。我在github上看到的cordova最新版本在5.0.1啃炸。4.5.4是在2017年發(fā)布的。我也沒(méi)去詳細(xì)了解相對(duì)于5.0.X的版本卓舵,4.5.4有哪些功能欠缺南用。但是在準(zhǔn)備做熱更新時(shí)發(fā)現(xiàn)。是需要5.0.X版本來(lái)支持的掏湾。
2.cocopods 支持的cordova插件數(shù)比較少但是基本滿(mǎn)足日常開(kāi)發(fā),如果你確實(shí)需要一些cocopods不支持的插件你可以手動(dòng)導(dǎo)入裹虫。手動(dòng)導(dǎo)入插件我們?cè)谙旅嬖诒怼D憧梢允褂胮od search cordova 來(lái)查看 插件基本都是以cordova-plugin-* 來(lái)命名的 很好識(shí)別融击。?p-2
cocopods導(dǎo)入cordova的弊端在我這個(gè)項(xiàng)目中主要就是以上2個(gè)點(diǎn)筑公。相對(duì)于cocopods導(dǎo)入的優(yōu)點(diǎn)來(lái)說(shuō)。我還是推薦使用cocopods來(lái)導(dǎo)入尊浪。比較符合我們ios的正常開(kāi)發(fā)匣屡。
坑2.swift自定義cordova插件
自定義插件涉及到4個(gè)文件的編輯。分別是1.swift類(lèi)提供具體功能拇涤。2.config.xml文件需要把你自定義的swift類(lèi)添加進(jìn)去捣作。3.cordova_plugins.js文件也是需要你自己把添加的自定義類(lèi)加入進(jìn)去。這個(gè)文件主要是讓cordova可以去查找對(duì)應(yīng)的js對(duì)象鹅士。4.js文件券躁,js文件主要是調(diào)用swift方法。你需要在js類(lèi)中調(diào)用swift方法掉盅。
在網(wǎng)上查到的大部分都是基于oc來(lái)開(kāi)發(fā)的也拜。但是我這個(gè)項(xiàng)目是swift。在自定義插件時(shí)遇到的一個(gè)坑就是函數(shù)命名了趾痘、swift類(lèi)名慢哈、js代碼函數(shù)的命名了。以下我用一個(gè)簡(jiǎn)單例子來(lái)說(shuō)明扼脐。這個(gè)例子的作用很簡(jiǎn)單設(shè)置當(dāng)前viewcontroller的title岸军。
1.編寫(xiě)swift代碼。如p-3
注意點(diǎn)1. class前面需要用 @objc(類(lèi)名) 來(lái)修飾? 瓦侮。
注意點(diǎn)2. 插件類(lèi)需要繼承自CDVPlugin 類(lèi)艰赞。CDVPlugin類(lèi)是自定義插件必須繼承的類(lèi)。
注意點(diǎn)3. 方法名需要用@objc 修飾肚吏。
注意點(diǎn)4. 參數(shù)必須是CDVInvokedUrlCommand 類(lèi)型方妖。前端傳過(guò)來(lái)的參數(shù)都是通過(guò)CDVInvokedUrlCommand中的arguments來(lái)獲取》E剩可以看到cordova中對(duì)這個(gè)對(duì)象的定義 p-4
1._callbackId 為網(wǎng)頁(yè)回調(diào)方法的id?
2._className 插件的類(lèi)名党觅。在我這個(gè)例子中雌澄,就是"A"
3.js調(diào)用的swift代碼的方法名。在我這個(gè)例子中 他就是”setTitle“杯瞻。但是需要注意的是在js代碼中調(diào)用時(shí)不能寫(xiě)成"setTitle" 而需要傳遞“setTitleWithCommand”? 需要加上 “WithCommand”镐牺。
4._arguments 這個(gè)參數(shù)是一個(gè)數(shù)組。js想傳遞參數(shù)都可以放在這個(gè)數(shù)組中魁莉。
2.config.xml中添加對(duì)應(yīng)的swift類(lèi)
在config.xml中添加如果xml節(jié)點(diǎn)? 如圖p-5
放在其他feature節(jié)點(diǎn)后面即可睬涧。
3.cordova_plugins.js文件的添加
如果你是使用cocopods導(dǎo)入的。那么在www文件下有一個(gè)cordova_plugins.js文件旗唁。