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,创建一个模拟器,如图
图中的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开发环境的搭建的更多相关文章
- 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo
目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...
- Apache Cordova开发环境搭建(二)VS Code
原文:Apache Cordova开发环境搭建(二)VS Code 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u011127019/articl ...
- Apache Cordova开发环境搭建(一)-Visual Studio
原文:Apache Cordova开发环境搭建(一)-Visual Studio 一.使用Visual Studio开发Apache Cordova手机App 1.版本要求,Visual Studio ...
- Android Studio 0.4 + PhoneGap 3.3 开发环境的搭建
最近在尝试HTML5移动平台下的开发 由于安卓的方便性,首先开始了安卓的试验 现在安卓下的开发工具首选 Android Studio (写这文章的时候,是0.4) 而跨平台的HTML5 App比较出名 ...
- 搭建phonegap开发环境,搭建安卓开发环境
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 总结:Mac前端开发环境的搭建(配置)
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
- Idea开发环境中搭建Maven并且使用Maven打包部署程序
1.配置Maven的环境变量 a.首先我们去maven官网下载Maven程序,解压到安装目录,如图所示: b.配置M2_HOME的环境变量,然后将该变量添加到Path中 备注:必须要有JAVA_HOM ...
- Linux学习心得之 Linux下命令行Android开发环境的搭建
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Linux学习心得之 Linux下命令行Android开发环境的搭建 1. 前言2. Jav ...
- Java开发环境的搭建以及使用eclipse从头一步步创建java项目
一.java 开发环境的搭建 这里主要说的是在windows 环境下怎么配置环境. 1.首先安装JDK java的sdk简称JDK ,去其官方网站下载最近的JDK即可..http://www.orac ...
随机推荐
- OracleGateway11gR2访问异构数据库(MSSQL)配置文档(转)
1.前提条件 1. 准备工作 软件名称 操作系统 IP地址 端口 用户 密码 版本 状态 Oracle数据库 Windows localhost 1521 scott scott win32 Orac ...
- hdu 4635 Strongly connected 强连通缩点
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4635 题意:给你一个n个点m条边的图,问在图不是强连通图的情况下,最多可以向图中添多少条边,若图为原来 ...
- python 发送邮件函数模块
发送邮件函数功能 #!/usr/bin/env python # -*- coding:utf-8 -*- import smtplib from email.mime.text import MIM ...
- phpcms v9 下拉菜单 二级 三级子栏目调用方法
很多网站的导航栏可以实现下拉二级菜单,三级菜单等效果,今天我们就来分享phpcms v9 支持下拉菜单的方法,可以支持无限子栏目调用,具体写法如下: <ul> {pc:content ac ...
- 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 ...
- uva 839 not so mobile——yhx
Not so Mobile Before being an ubiquous communications gadget, a mobile was just a structure made of ...
- jquery模拟下拉框单选框复选Select,Checkbox,Radio
在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...
- leetcode-Spiral Matrix II 螺旋矩阵2之python大法好,四行就搞定,你敢信?
Spiral Matrix II 螺旋矩阵 Given an integer n, generate a square matrix filled with elements from 1 to n2 ...
- HDU 4419 Colourful Rectangle --离散化+线段树扫描线
题意: 有三种颜色的矩形n个,不同颜色的矩形重叠会生成不同的颜色,总共有R,G,B,RG,RB,GB,RGB 7种颜色,问7种颜色每种颜色的面积. 解法: 很容易想到线段树扫描线求矩形面积并,但是如何 ...
- man 在线手册
http://man7.org/linux/man-pages/man3/fwrite.3.html