Cordova | 01.使用Cordova创建应用

Cordova的目标是使用一份代码构建多个平台,形式是使用HTML,CSS和JS构建移动应用。

1.安装cordova

Cordova的命令行是运行在Node.js上的,并且在npm上是可用的。第一步是安装cordova框架:

1
$ npm install -g cordova

2.创建工程

导航到你想要创建工程的目录:

1
$ cordova create CordovaApp

3.添加一个平台

导航到工程目录,你需要添加一个平台,这里以iOS为例

1
2
$ cd CordovaApp
$ cordova platform add ios

以下是工程创建之后的目录,这是一份web工程的目录结构:
Alt text
package-lock.json:
我实在不知道如何介绍它,自己看好了npm-package-lock.json
package.json:

  • 包含你工程的依赖包,比如Cordova下载的官方插件
  • 指定了你工程的包的版本,默认初始值为:1.0.0,该命名符合语言版本的规则
  • 这个文件使你的构建是可复制的,因此你可以很容易的分享给你的开发者

node_modules: node安装包
plugins:所安装的插件
platforms:发布的平台,如iOS,Android
www:web源码所在的文件
hooks:配置脚本命令的地方
config.xml: 全局配置文件,控制Cordova的行为。

Alt text
如上,是platforms的文件夹,我们刚刚添加了iOS这一个平台。这里面有几个重要的文件夹:
build:构建文件包
HelloCordova:编译出来的Objective-C代码
www:每次编译之后会被外层的www文件夹覆盖更新
HelloCordova.xcodeproj:是Xcode的入口打开文件,安装cocoapods之后,入口文件改为HelloCordova.xcworkspace, cocoapods使用同层的podfile文件管理你的第三方库,相关文件还包括pods.json,pods-release-xcconfig,pods-debug.xcconfig
platform_www:平台安装的插件所在.
cordova: Cordova在iOS平台下的构建运行时环境
CordovaLib:Cordova的库文件
iOS.json:iOS平台的配置文件
frameworks.json:iOS平台的框架配置文件

接下来我们看一下HelloCordova文件,为编译出来的Objective-C代码,不了解的同学可以了解一下:
main.m: 程序的入口文件
config.xml:内含iOS程序的一切配置信息
HelloCordova-Prefix.pch:桥接文件,内含程序引入的库信息头
HelloCordova-Info.plist: iOS程序的权限信息配置文件,比如你想使用相机,就在这里配置权限
Scripts:Cordova程序的构建编译脚本
Plugins.h.m结尾的插件文件
Images.xcassets:图片资源,存放比如程序的图标,启动图等图片
Entilements-Release.plist: 发布包的信息配置文件
Entilements-Debug.plist:开发调试包的信息配置文件
Classes:Objective-C 源代码,目前包含AppDelegate和主页文件,由配对的.h.m文件组成
CDLaunchScreen.storyboad:用于配置程序的启动图
Bridging-Header.h:桥接头文件,目前导入了#import <Cordova.h>

Alt text
最后我们看一看这个www文件夹:
默认的web程序入口文件是index.html,一切交互事件的入口文件是js/index.js

4.运行你的app

1
$ cordova run ios

需要提前安装Xcode,Xcode会自动携带模拟器,运行完毕。你会看到Xcode的启动界面。类似如下:
Alt text

5. 测试你的应用

1
$ corodva emulate ios

以上命令可以在模拟器上重建你的应用,来测试交互。

6.添加插件

我们可以使用标准的web技术修改默认App,但如果想访问设备级别的功能,我们需要插件。

插件为原生的SDK功能提供了一个JS接口。

npm上有一些插件,你可以搜索他们,Apache Cordova提供了一些核心插件API。

可以使用如下命令搜索这些插件

1
cordova plugin search camera

可以使用npm上的包名安装插件:

1
cordova plugin add cordova-plugin-camera

插件也可以使用目录或git repo安装

可以使用plugin ls查看安装的插件:

1
2
3
4
5
$ cordova plugin ls
cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-contacts 3.0.1 "Contacts"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-whitelist 1.3.4 "Whitelist"

7.更新Cordova和你的工程

查看当前Cordova版本

1
$ cordova -v

查看npm上Cordova的最新版本

1
$ npm info cordova version

更新cordova的版本

1
sudo npm update -g cordova

安装特定的Cordova版本

1
sudo npm update -g cordova@6.14.5

参考:
create your first app