寫在前邊
將cordova框架導(dǎo)入到已有的工程,是一種比較常見的操作,我遇到的場景是,之前有一個cordova框架編寫的頁面,當(dāng)然是h5寫的,現(xiàn)在想把他集成到已有的app中,就需要將h5的頁面放到工程中,再向工程中導(dǎo)入cordova環(huán)境.由此可以看到,導(dǎo)入cordova項(xiàng)目到已有工程中,包括的是兩部分,一部分是h5的頁面部分,一部分是cordova環(huán)境.
我遇到的問題比較特別,我拿到的cordova項(xiàng)目只有h5頁面,沒有cordova環(huán)境,需要自己搞定cordova環(huán)境.這種情況,導(dǎo)入的方法也有兩種,一種是新建cordova框架的Demo,然后將Demo的環(huán)境導(dǎo)入到已有項(xiàng)目中,再導(dǎo)入h5頁面.另一種方法是,使用cocoapods 向已有項(xiàng)目中導(dǎo)入cordova環(huán)境,導(dǎo)入后再導(dǎo)入h5頁面.
這篇文章將介紹這兩種方法.
方法一:將Cordova的demo導(dǎo)入到已有項(xiàng)目中去
1. 拷貝文件夾
將cordova的Demo中的以下文件拷貝到已有項(xiàng)目中去.
文件包括cordova, cordovaLib, www, config.xml
導(dǎo)入后的文件結(jié)構(gòu)如圖二.
2. 導(dǎo)入到項(xiàng)目
將config.xml導(dǎo)入到項(xiàng)目中
將www文件夾導(dǎo)入到項(xiàng)目中,記得是勾選Create folder references
CordovaLib文件夾中的CordovaLib.xcodeproj 導(dǎo)入到項(xiàng)目中,如圖三:
導(dǎo)入后項(xiàng)目的目錄結(jié)構(gòu)如圖四:
3. 配置Build Settings
選擇工程的Build Settings->Other Links, 設(shè)置-Objc -all_load
4. 配置Build Phases
4.1 選擇Build Phases->Target Dependencies,
添加CordovaLib
4.2 選擇Build Phases->Link Binary With Librarys,
添加libCordova.a, MobileCoreServices,AssetsLibrary
4.3 選擇Build Phases->New Run Script Phase，
將新增New Run Script Phase命名為copy www directory
并添加以下配置信息:
NODEJS_PATH=/usr/local/bin; NVM_NODE_PATH=~/.nvm/versions/node/`nvm version 2>/dev/null`/bin; N_NODE_PATH=`find /usr/local/n/versions/node/* -maxdepth 0 -type d 2>/dev/null | tail -1`/bin; XCODE_NODE_PATH=`xcode-select --print-path`/usr/share/xcs/Node/bin; PATH=$NODEJS_PATH:$NVM_NODE_PATH:$N_NODE_PATH:$XCODE_NODE_PATH:$PATH && node cordova/lib/copy-www-build-step.js
5. 創(chuàng)建用來顯示網(wǎng)頁的控制器
新建一個類,繼承CDVViewController,我起名叫做CordovaViewController.
在viewController頁面添加一個按鈕,添加按鈕.點(diǎn)擊按鈕跳轉(zhuǎn)到CordovaViewController頁面.
編譯運(yùn)行,點(diǎn)擊按鈕后跳轉(zhuǎn)到新的頁面,這個頁面就是Cordova的Demo的那個頁面.
看到這個頁面說明集成成功了.
方法二:通過cocoapods向已有項(xiàng)目導(dǎo)入Cordova環(huán)境
1.確定已經(jīng)裝上cocoa pods,如果沒裝上,去度娘查查怎么裝.(太惡心了,裝不裝的上,完全看運(yùn)氣)(算了,文章結(jié)尾附上cocoapods的安裝和基本使用方法)
2.在Podfile文件中寫: pod 'Cordova', '~> 3.6'
3.新建一個UIViewController類,把繼承類由UIViewController改為CDVViewController.
4.在該控制器(繼承自CDVViewController)的loadView方法中,使用以下方法可以更改html頁面.
![]()
代碼2.png
