Ziv小威

Cordova开发环境的搭建

Ziv小威 发表于2015-11-23 Node.js Javascript

原文地址:http://imziv.com/blog/article/read.htm?id=66

Cordova为目前做混合式开发中比较受欢迎的一个解决方案了,并且拥有比较丰富的插件资源。本文介绍了Cordova开发的环境搭建过程。 由于Cordova命令行工具发布在了npm包管理平台上,npm为nodejs内置的包管理工具,所以安装cordova前需要先确认你是否已经安装过Nodejs。

Nodejs安装

打开Nodejs官网下载页,根据自己当前的操作系统平台,选择对应的nodejs版本,下载完后直接点击安装程序,下一步完成即可。测试nodejs安装,打开控制台,输入:

$ node -v // 查看node版本
$ npm -v // 查看npm版本

如果控制台成功输出当前程序安装的版本,那么你已经安装成功了。

Nodejs版本管理工具(Nvm)

由于Nodejs目前的更迭速度很快,有时候项目组人员的版本可能各不相同,为了避免出现不必要的问题,尽量统一管理node的版本,所以我们需要nvm这样一个版本管理工具,来轻松的达到自由切换nodejs和npm版本的问题。

Linux平台,Mac安装和更新

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

或者

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

打开控制台输

nvm --version // 查看nvm版本

如果成功输出,那么nvm就安装成功了。更多的nvm可以在控制台通过nvm --help查看。

当然如果发现控制台找不到nvm这个全局变量的话,那么我们可以尝试手动添加的方式。

打开~/.bashrc~/.profile~/.bash_profile , 或者~/.zshrcc文件,在文件后面添加变量环境导出的代码:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

同样的,进行完变量导出后,可通过上面的nvm --version查看安装结果。

windows安装

nvm提供了windows上的安装器,可以在这里下载, 然后直接点击安装即可。

Cordova安装

好了,搭建完这些基本工具后,终于可以安装cordova了。

在OSX或者Linux平台:

$ sudo npm install -g cordova

Windows平台:

C:\>npm install -g cordova

同样的,安装完成后,可以通过

$ cordova -v

命令查看安装结果。成功输出当前的cordova版本,那么你就安装成功了。

创建Cordova项目和模拟器运行

切换到你的workspace目录,执行

$ cordova create hello com.example.hello HelloWorld

这个命令会帮我们自动在workspace目录下创建一个名为hello(即第一个参数)的文件夹,里面会包含几个子文件目录,第二个参数com.example.hello即为项目包的一个标识符,就像java项目中的某个包名一样。当然你可以在创建的时候就添加上去,如果不添加,cordova会帮你自动生成,而你之后可以在根目录下的config.xml下手动去更改这个项目标识名称。最后一个HelloWord为程序显示的标题名称。同样如果不写cordova会自动生成,也可以在config.xml下手动配置。创建完后,我们一个可以看到workspace下为我们生成的这个项目目录以及相关初始化文件。

添加运行平台:

$ cordova platform add android // 安卓
$ cordova platform add ios    // 苹果
$ cordova platform add wp8    // wp8

查看添加的运行平台:

$ cordova platform ls

构建命令:

$ cordova build // 自动构建所以你添加的平台
$ cordova build platformName // 根据平台名称构建
$ cordova build android // 构建安卓平台

在模拟器运行安卓(这里假设你电脑装了安卓SDK的环境)

$ cordova emulate android

另外,你也可以直接连上你的手机直接测试,运行:

$ cordova run android

运行命令后,程序会自动构建初始化,并打开模拟器,然后运行当前的程序。

安装安卓SDK

上面的运行示例中直接假设你已经安装好了安卓的运行环境,如果没有安装的话,那么可以参考下面的教程。

下载安装

打开安卓SDK安装的页面,当然如果你没有使用Android Studio的话,那么就直接点击下载SDK, 下载完后直接解压到一个例如andoid-sdk的目录下面即可。

解压完后,我们可以切换到解压文件下android-sdk/tools目录下,我们可以通过./android命令运行SDK程序,运行后,应该就会打开一个SDK管理界面,然后根据所需下载相应版本的SDK。由于谷歌被墙,所以如果你身边的同事已经有安卓开发环境的话,最好直接从他们那边拷贝环境即可,不然这个非常难下载。

配置SDK环境变量

上面我们安装完后,可以在tools目录下通过命令直接打开SDK管理工具,但是为了更方便的全局访问,我们给它添加全局变量。在OSX或者Linux下,我们打开或者创建~/.bash_profile文件,然后添加如下代码:

export PATH=${PATH}:/Users/ziv/Documents/development-android/android-sdk/platforms:/Users/ziv/Documents/development-android/android-sdk/tools

以上是我电脑上面配置的实例代码。配置好后,在控制台直接输入:android命令,如果成功打开SDK管理工具,那么就成功了。至于windows的环境变量配置,这里就不多说了。

创建模拟器

成功安装完SDK管理工具后,我们需要创建一个模拟器:

  1. 运行android命令,打开包管理工具
  2. 选择菜单上面的tools -> Manage AVDs
  3. 在模拟器管理界面选择create
  4. 根据你所要的SDK版本,设备,硬件参数来创建一个模拟器
  5. 填写完毕后点击OK即可

配置好这一切后,我们再用cordova emulate android命令启动模拟器。模拟器如果成功启动,则会直接打开我们的这个HelloWorld应用。在使用途中我们会发现,安卓SDK自带的模拟器相当的卡顿,反应异常慢,所要跟安卓同事交流后,他们推荐我使用Genymotion.

Genymotion模拟器的安装使用

打开genymotion的下载页面,这里我们需要下载个人版本的genymotion, 因为其他版本需要收费,另外你要先在这个网站注册一个账号。

下载Genymotion完并安装后,点击运行发现出现了无法运行的情况,提示你需要安装VirtualBox,因为Genymotion依赖VirtualBox虚拟机, 所以我们打开VirtualBox, 找到下载按钮点击下载安装包程序,下载完成后直接点击安装即可。

安装完成后,运行Genymotion, 然后点击add,创建一个模拟器,如图

图中的Custom Phone则为我已经创建好的。创建好后,点击start即可。如果发现启动时VirtualBox出现无法启动并抛出类似权限异常的情况下,我们可以通过如下命令赋权:

$ sudo chmod -R 777 /Applications
$ sudo chmod -R 777 /Applications/VirtualBox.app

然后重新启动。正常情况下,genymotion会打你之前添加的模拟器,然后在cordova中运行genymotion模拟器,直接通过运行如下命令:

$ cordova run android

程序会自动在genymotion中运行起来。

参考

https://nodejs.org/en/download/
https://github.com/creationix/nvmhttp://cordova.apache.org/docs/en/latest/guide/cli/index.html

http://developer.android.com/sdk/installing/index.html?pkg=tools

https://www.genymotion.com/#!/developers/user-guide

Ziv小威 · Node.js · Javascript

让美的事情发生

 
comments powered by Disqus