一、簡介

Cordova大家可能比較陌生，但肯定聽過 PhoneGap ，Cordova 就是 PhoneGap 被 Adobe 收購后所改的名字。它是一個可以讓 JS 與原生代碼互相通信的一個庫，并且提供了一系列的插件類（如 JS 直接操作本地數(shù)據(jù)庫的插件類）。

Cordova優(yōu)缺點

優(yōu)點: 降低開發(fā)成本一次開發(fā)多平臺套用，版本更新容易可動態(tài)更新。

缺點: cordova其實就是在原生app上加了一個webView,并提供一套JS與原生代碼交互的類庫。交互效果一般，且訪問原生控件時受限,常常無法滿足業(yè)務(wù)需求。

Cordova插件

為了解決Cordova的缺點，就出現(xiàn)了cordova插件的概念。即由各個平臺的開發(fā)者實現(xiàn)webView中無法實現(xiàn)的功能，并打包成插件供前端開發(fā)人員調(diào)用，這樣來優(yōu)化cordova app的體驗問題。

二、文章安排

本系列文章主要圍繞Cordova for iOS部分講解，主要分為如下幾個部分：
1.環(huán)境搭建
2.開發(fā)iOS插件
3.打包插件及JS腳本

三、環(huán)境搭建

1.檢測是否安裝了node.js

打開終端輸入npm --version，若無打印版本則需先安裝node.js

node.js

2.命令行安裝cordova

npm install -g cordova

3.創(chuàng)建項目

cordova create testCordovaProject com.catchzeng.testCordova testCordova

create

• testCordovaProject: 項目文件夾名稱
• com.catchzeng.testCordova: 項目的bundleID
• testCordova:項目名稱

4.添加平臺

cd testCordovaProject/
sudo cordova platform add ios

add platform

添加成功后可在項目的platforms文件夾中看到ios文件夾,進入后就可以看到ios工程了。

iOS project

iOS工程運行結(jié)果

result

5.Cordova開發(fā)體驗

修改Staging->www->index.html

屏幕快照 2016-09-20 下午9.16.57.png

<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>

再次運行項目，可以看到界面上顯示了HI，iOSDeveloper.

result

至此，環(huán)境搭建完畢。下一篇將講解為Cordova開發(fā)iOS插件。