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管理工具后,我们需要创建一个模拟器:

  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.htmlhttp://developer.android.com/sdk/installing/index.html?pkg=toolshttps://www.genymotion.com/#!/developers/user-guide

Cordova开发环境的搭建的更多相关文章

  1. 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

    目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...

  2. Apache Cordova开发环境搭建(二)VS Code

    原文:Apache Cordova开发环境搭建(二)VS Code 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u011127019/articl ...

  3. Apache Cordova开发环境搭建(一)-Visual Studio

    原文:Apache Cordova开发环境搭建(一)-Visual Studio 一.使用Visual Studio开发Apache Cordova手机App 1.版本要求,Visual Studio ...

  4. Android Studio 0.4 + PhoneGap 3.3 开发环境的搭建

    最近在尝试HTML5移动平台下的开发 由于安卓的方便性,首先开始了安卓的试验 现在安卓下的开发工具首选 Android Studio (写这文章的时候,是0.4) 而跨平台的HTML5 App比较出名 ...

  5. 搭建phonegap开发环境,搭建安卓开发环境

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. 总结:Mac前端开发环境的搭建(配置)

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  7. Idea开发环境中搭建Maven并且使用Maven打包部署程序

    1.配置Maven的环境变量 a.首先我们去maven官网下载Maven程序,解压到安装目录,如图所示: b.配置M2_HOME的环境变量,然后将该变量添加到Path中 备注:必须要有JAVA_HOM ...

  8. Linux学习心得之 Linux下命令行Android开发环境的搭建

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Linux学习心得之 Linux下命令行Android开发环境的搭建 1. 前言2. Jav ...

  9. Java开发环境的搭建以及使用eclipse从头一步步创建java项目

    一.java 开发环境的搭建 这里主要说的是在windows 环境下怎么配置环境. 1.首先安装JDK java的sdk简称JDK ,去其官方网站下载最近的JDK即可..http://www.orac ...

随机推荐

  1. OracleGateway11gR2访问异构数据库(MSSQL)配置文档(转)

    1.前提条件 1. 准备工作 软件名称 操作系统 IP地址 端口 用户 密码 版本 状态 Oracle数据库 Windows localhost 1521 scott scott win32 Orac ...

  2. hdu 4635 Strongly connected 强连通缩点

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4635 题意:给你一个n个点m条边的图,问在图不是强连通图的情况下,最多可以向图中添多少条边,若图为原来 ...

  3. python 发送邮件函数模块

    发送邮件函数功能 #!/usr/bin/env python # -*- coding:utf-8 -*- import smtplib from email.mime.text import MIM ...

  4. phpcms v9 下拉菜单 二级 三级子栏目调用方法

    很多网站的导航栏可以实现下拉二级菜单,三级菜单等效果,今天我们就来分享phpcms v9 支持下拉菜单的方法,可以支持无限子栏目调用,具体写法如下: <ul> {pc:content ac ...

  5. Flume practices and sqoop hive 2 oracle

    #receive the file flume-ng agent --conf conf --conf-file conf1.conf --name a1 flume-ng agent --conf ...

  6. uva 839 not so mobile——yhx

    Not so Mobile  Before being an ubiquous communications gadget, a mobile was just a structure made of ...

  7. jquery模拟下拉框单选框复选Select,Checkbox,Radio

    在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...

  8. leetcode-Spiral Matrix II 螺旋矩阵2之python大法好,四行就搞定,你敢信?

    Spiral Matrix II 螺旋矩阵 Given an integer n, generate a square matrix filled with elements from 1 to n2 ...

  9. HDU 4419 Colourful Rectangle --离散化+线段树扫描线

    题意: 有三种颜色的矩形n个,不同颜色的矩形重叠会生成不同的颜色,总共有R,G,B,RG,RB,GB,RGB 7种颜色,问7种颜色每种颜色的面积. 解法: 很容易想到线段树扫描线求矩形面积并,但是如何 ...

  10. man 在线手册

    http://man7.org/linux/man-pages/man3/fwrite.3.html