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工程的目录结构:
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的行为。
如上,是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>
最后我们看一看这个www
文件夹:
默认的web程序入口文件是index.html
,一切交互事件的入口文件是js/index.js
。
4.运行你的app
1 | $ cordova run ios |
需要提前安装Xcode,Xcode会自动携带模拟器,运行完毕。你会看到Xcode的启动界面。类似如下:
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