使用Cordova开发iOS App -- 环境搭建

2016-09-20 本文已影响5758人 CatchZeng

一、简介

Cordova大家可能比较陌生，但肯定听过 PhoneGap ，Cordova 就是 PhoneGap 被 Adobe 收购后所改的名字。它是一个可以让 JS 与原生代码互相通信的一个库，并且提供了一系列的插件类（如 JS 直接操作本地数据库的插件类）。

Cordova优缺点

优点: 降低开发成本一次开发多平台套用，版本更新容易可动态更新。

缺点: cordova其实就是在原生app上加了一个webView,并提供一套JS与原生代码交互的类库。交互效果一般，且访问原生控件时受限,常常无法满足业务需求。

Cordova插件

为了解决Cordova的缺点，就出现了cordova插件的概念。即由各个平台的开发者实现webView中无法实现的功能，并打包成插件供前端开发人员调用，这样来优化cordova app的体验问题。

二、文章安排

本系列文章主要围绕Cordova for iOS部分讲解，主要分为如下几个部分：
1.环境搭建
2.开发iOS插件
3.打包插件及JS脚本

三、环境搭建

1.检测是否安装了node.js

打开终端输入npm --version，若无打印版本则需先安装node.js

node.js

2.命令行安装cordova

npm install -g cordova

3.创建项目

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工程运行结果

result

5.Cordova开发体验

修改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.