一掺栅、簡介
Cordova大家可能比較陌生陕习,但肯定聽過 PhoneGap 膊升,Cordova 就是 PhoneGap 被 Adobe 收購后所改的名字法焰。它是一個可以讓 JS 與原生代碼互相通信的一個庫秧荆,并且提供了一系列的插件類(如 JS 直接操作本地?cái)?shù)據(jù)庫的插件類)。
Cordova優(yōu)缺點(diǎn)
優(yōu)點(diǎn): 降低開發(fā)成本一次開發(fā)多平臺套用埃仪,版本更新容易可動態(tài)更新乙濒。
缺點(diǎn): cordova其實(shí)就是在原生app上加了一個webView,并提供一套JS與原生代碼交互的類庫。交互效果一般卵蛉,且訪問原生控件時(shí)受限,常常無法滿足業(yè)務(wù)需求颁股。
Cordova插件
為了解決Cordova的缺點(diǎn),就出現(xiàn)了cordova插件的概念毙玻。即由各個平臺的開發(fā)者實(shí)現(xiàn)webView中無法實(shí)現(xiàn)的功能豌蟋,并打包成插件供前端開發(fā)人員調(diào)用,這樣來優(yōu)化cordova app的體驗(yàn)問題桑滩。
二梧疲、文章安排
本系列文章主要圍繞Cordova for iOS部分講解,主要分為如下幾個部分:
1.環(huán)境搭建
2.開發(fā)iOS插件
3.打包插件及JS腳本
三运准、環(huán)境搭建
1.檢測是否安裝了node.js
打開終端輸入npm --version
幌氮,若無打印版本則需先安裝node.js
2.命令行安裝cordova
npm install -g cordova
3.創(chuàng)建項(xiàng)目
cordova create testCordovaProject com.catchzeng.testCordova testCordova
參數(shù)說明:
- testCordovaProject: 項(xiàng)目文件夾名稱
- com.catchzeng.testCordova: 項(xiàng)目的bundleID
- testCordova:項(xiàng)目名稱
4.添加平臺
cd testCordovaProject/
sudo cordova platform add ios
添加成功后可在項(xiàng)目的platforms文件夾中看到ios文件夾,進(jìn)入后就可以看到ios工程了。
iOS工程運(yùn)行結(jié)果
5.Cordova開發(fā)體驗(yàn)
修改Staging->www->index.html
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
<h1 align="center">
HI胁澳,iOSDeveloper.
</h1>
</div>
</div>
再次運(yùn)行項(xiàng)目该互,可以看到界面上顯示了HI,iOSDeveloper.
至此韭畸,環(huán)境搭建完畢宇智。下一篇將講解為Cordova開發(fā)iOS插件蔓搞。