Cordova开发环境的搭建
Cordova开发环境的搭建
原文地址: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管理工具后,我们需要创建一个模拟器:
- 运行
android
命令,打开包管理工具 - 选择菜单上面的
tools -> Manage AVDs
- 在模拟器管理界面选择
create
- 根据你所要的SDK版本,设备,硬件参数来创建一个模拟器
- 填写完毕后点击
OK
即可
配置好这一切后,我们再用cordova emulate android
命令启动模拟器。模拟器如果成功启动,则会直接打开我们的这个HelloWorld
应用。在使用途中我们会发现,安卓SDK自带的模拟器相当的卡顿,反应异常慢,所要跟安卓同事交流后,他们推荐我使用Genymotion.
Genymotion模拟器的安装使用
打开genymotion的下载页面,这里我们需要下载个人版本的genymotion, 因为其他版本需要收费,另外你要先在这个网站注册一个账号。
下载Genymotion完并安装后,点击运行发现出现了无法运行的情况,提示你需要安装VirtualBox,因为Genymotion依赖VirtualBox虚拟机, 所以我们打开VirtualBox, 找到下载按钮点击下载安装包程序,下载完成后直接点击安装即可。
安装完成后,运行Genymotion, 然后点击add,创建一个模拟器,如图
![](https://images2015.cnblogs.com/blog/443914/201511/443914-20151123135305123-1679377528.png)
图中的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.htmlhttp://developer.android.com/sdk/installing/index.html?pkg=toolshttps://www.genymotion.com/#!/developers/user-guide
作者:Ziv小威
出处:http://imziv.com/
关于作者:专注于Java技术的程序员一枚,此外对JS开发保持着较高的兴趣。爱好音乐,阅读,FM等等。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
如有问题,可以邮件:wewoor@foxmail.com
微博:Ziv小威