Ionic + cordova开发Android App环境配置

创建时间:2017/1/8 21:26:30
关键字:Ionic cordava hybrid,ionic,codava,混合app

1.安装与配置

1.1 jdk下载地址:

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

下载完毕安装即可

1.2 环境变量配置

1.2.1 系统变量增加:JAVA_HOME

把jdk的安装路径复制即可

1.2.2 系统变量增加:classpath值为

 .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

注意开头的一个点

1.2.3 在Path变量值中添加

;%JAVA_HOME%\bin;

命令javac正常运行即可

2.Android环境变量配置

2.1 下载SDK Tools

http://developer.android.com/sdk/index.html#Other

2.2 下载完毕,安装或者解压后,在相应目录下找到并打开

 

SDK Manager默认勾选了一些选项,直接点击Install packages安装即可

如果安装过慢,可以用国内的镜像,或者分包下载

http://www.androiddevtools.cn/

找到相应的包下载即可:

http://mirrors.opencas.cn/android/repository/

2.3 Android环境变量配置:

注意变量值不要多空格,多一个空格会导致不成功

2.3.1 找到SDK Manager所在目录

上面下载的包都在同一目录下

2.3.2 新建系统变量:Android 

把platform-tools和tools这两个文件夹的路径添加到变量值里面

2.3.3 在Path中系统变量的后面增加;%Android%;%Android_Tools%

2.3.4 命令adb正常运行即可

3.安装ionic和cordova

3.1 node nvm环境安装

1.下载:nvm-windows,解压到一个全英文路径。

2.将 settings.txt 中

root 配置为当前 nvm.exe 所在目录

path 配置为 node 快捷方式所在的目录

arch 配置为当前操作系统的位数(32/64)

proxy 不用配置

3.配置环境变量

NVM_HOME = 当前 nvm.exe 所在目录

NVM_SYMLINK = node 快捷方式所在的目录

PATH = %NVM_HOME%;%NVM_SYMLINK%;

4.测试环境

    cmd命令提示符界面运行以下命令,正常则安装成功。

    nvm

    nvm ls

3.2 node npm环境安装

1.配置node.exe和npm.cmd的环境变量

NODE_HOME = C:\Node\nvm\v5.7.0

PATH = %NODE_HOME%;

2.配置npm的全局安装路径

进入命令模式,输入npm config set prefix "C:\Node\nvm\v5.7.0\node_modules\npm"回车

继续在命令中输入: npm install npm -g 回车后会下载npm包,在C:\Node\nvm\v5.7.0\node_modules\npm目录中可以看到下载中的文件(也可以将提前下好的文件复制到该目录下)。

为这个npm配置环境变量:

NPM_HOME=C:\Node\nvm\v5.7.0\node_modules\npm

PATH = %NPM_HOME%;  

注意这个%NPM_HOME%;一定要添加到%NVM_SYMLINK%;的前面。

3. 设置项目文件夹 Run: npm install -d

3.测试环境 npm -v

3.3 通过npm全局安装ionic cordova

1.运行命令 npm install -g ionic

npm install -g cordova

2.测试是否成功安装

ionic -version

cordova -version

3.ionic config set prefix "C:\Node\nvm\v5.7.0\node_modules\npm\node_modules\ionic"

 

4.npm install -g ionic 没反应python 3.5.2 不支持

解决,安装多个版本的python设定一个符合的一个版本

You can use --python option to npm like so:

npm install --python=python2.7

or set it to be used always:

npm config set python python2.7

Npm will in turn pass this option to node-gyp when needed.

(note: I'm the one who opened an issue on Github to have this included in the docs, as there were so many questions about it ;-) )

不使用代理安装,即可

npm install -g gulp -no-proxy

4.创建项目、打包、发布

4.1 创建ionic项目

4.1.1 创建步骤

切换到要保存项目的目录,执行ionic start appName。

如G:\技术资料\web前端和移动开发>ionic start appName

或者G:\技术资料\传智播客web前端和移动开发>ionic start appName -no-proxy

创建过程会问是否创建ionic.io账号,n即可

4.1.2 依赖组件的安装

警告1:gulp

(1)npm WARN deprecated gulp-minify-css@0.3.13: Please use gulp-clean-css

(2)npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

(1)安装gulp :执行命令npm install -g gulp  (未解决)

(2)更新npm :执行更新命令 npm update -g minimatch@3.0.2

警告2:graceful-fs

(1)npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

安装graceful-fs最新版本:执行安装命令 npm install -g graceful-fs graceful-fs@4.1.3 

警告3:supports-color

(1)npm WARN deprecated has-color@0.1.7: Renamed to supports-color. If you're using chalk, upgrade to the latest version. https://github.com/chalk/supports-color

安装命令:npm install --save supports-color  npm install supports-color

(2)npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\kl\package.json'

npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\kl\package.json'

有可能grunt版本太低  卸载重新装试

npm uninstall -g grunt 

npm install -g grunt-cli

4.1.3 网络连接问题处理

Error with start Error: connect ETIMEDOUT 192.30.253.113:443

网络不好时,可以设置代理后,再执行:ionic start appName

设置代理命令:npm config set proxy http://server:port

  npm config set https-proxy http://server:port

使用淘宝镜像方式:

通过config命令 npm config set registry https://registry.npm.taobao.org

命令行指定npm --registry https://registry.npm.taobao.org info underscore

网络好时,可以使用非代理模式:ionic start appName -no-proxy

4.1.4 node-gyp(及Python和C 环境

问题1 安装新的node-gyp版本

gyp verb `which` failed     at G:\..\shoppingMall\node_modules\isexe\windows.js:29:5

gyp verb `which` failed     at getNotFoundError (G\..\shoppingMall\node_modules\which\which.js:13:12)

gyp verb `which` failed     at F (G:\..\shoppingMall\node_modules\which\which.js:68:19)

gyp verb `which` failed     at E (G:\..\node_modules\which\which.js:80:29)

gyp verb `which` failed     at G:\..\shoppingMall\node_modules\which\which.js:89:16

gyp verb `which` failed     at G:\..\shoppingMall\node_modules\isexe\index.js:44:5

gyp verb `which` failed     at G:\..\shoppingMall\node_modules\isexe\windows.js:29:5

(1)安装gyp:执行命令 npm install -g node-gyp

npm WARN prefer global node-gyp@3.4.0 should be installed with -g

npm install -g node-gyp node-gyp@3.4.0

(2)安装isexe: 执行命令npm install -g isexe

     安装which: 执行命令npm install -g which

 

问题2 安装Python环境

Node.js的源码主要由C 代码和JavaScript代码构成,但是却用gyp工具(http://code.google.com/p/gyp/ )来做源码的项目管理,该工具采用Python语言写成的。

Python(Node.js建议使用2.6或更高版本,不推荐3.0),可以从这里(http://python.org/)获取。

gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:82:15)

gyp verb `which` failed  python { [Error: not found: python] code: 'ENOENT' }

gyp verb could not find "python". checking python launcher

gyp verb could not find "python". guessing location

gyp verb ensuring that file exists: C:\Python27\python.exe

python安装而不是命令行,所以我们首先要在Python的官方主页上面下载最新的Python安装包。下载地址是:https://www.python.org/downloads/

这里安装Python27版本。

 

问题3 安装C 编译环境

在Windows平台上,Node.js采用gyp来生成Visual Studio Solution文件,最终通过VC 的编译器将其编译为二进制文件。VC 编译器,包含在Visual Studio 2015中,VS2015可以从这里(http://msdn.microsoft.com/en-us/vstudio/hh388567)找到。

verbose stack Error: node-sass@3.11.3 postinstall: `node scripts/build.js`

error argv "C:\\Node\\nodejs\\node.exe" "C:\\Node\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"

error Failed at the node-sass@3.11.3 postinstall script 'node scripts/build.js'

gyp ERR! stack Error: `C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe` failed with exit

Make sure you have the sufficient permissions by running:

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force

then run:

1npm install -g windows-build-tools

C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140\Microsoft.CppCommon.targets(356,5): error MSB6006: “CL.exe”已退出,代码为 5。 [G:\app3\node_modules\node-sass\build\src\libsass.vcxproj]

已完成生成项目“G:\app3\node_modules\node-sass\build\src\libsass.vcxproj”(默认目标)的操作 - 失败。

已完成生成项目“G:\app3\node_modules\node-sass\build\binding.vcxproj.metaproj”(默认目标)的操作 - 失败。

已完成生成项目“G:\app3\node_modules\node-sass\build\binding.sln”(默认目标)的操作 - 失败。

(2)vs2015默认不安装C ,启动vs安装包选择“修改”模式,勾选在编程语言下C ,重新安装

最后重新执行ionic start appName -no-proxy,成功!

Run your app in the browser (great for initial development):ionic serve

Run on a device or simulator:

  ionic run ios[android,browser]

测试

可能遇到的问题:Couldn't find ionic.config.json file. Are you in an Ionic project?

发现少了:

platforms

plugins

resources

ionic.config.json

这三个目录和一个json文件:

从能运行的那个项目中把这三个目录和一个json文件夹拷贝到报错的那个项目中就行了

cd appName

ionic serve

输入2 效果如下:

  

一些待处理的警告:

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

npm WARN deprecated has-color@0.1.7: Renamed to supports-color. If you're using chalk, upgrade to the latest version. https://github.com/chalk/supports-color

4.2 增加android平台

进入创建好的项目目录下,执行ionic platform add android 或ionic platform add android -no-proxy

(注:ionic3.5 下 命令改为:cordova platfrom add andrioid,同时需要将gradle的bin目录路径添加到系统环境变量的Path中

可能报错:connect ETIMEDOUT 192.30.253.113:443

关闭npm的https,会快一些

npm config set strict-ssl false

npm config set registry https://registry.npm.taobao.org

然后执行ionic platform add android

成功增加后会在项目下增加一个platforms的文件夹

4.3 Android打包

在项目下用命令:ionic build android 打包下载的过程会比较久,可能超过1个小时。并且中途可能因为网络不好下载失败而中止,可以重新执行ionic build android,直到完成。

(ionic3.5下改为)

A problem occurred configuring root project 'android'.

> Could not resolve all dependencies for configuration ':classpath'.

   > Could not download gradle-core.jar (com.android.tools.build:gradle-core:2.2.0)

      > Could not get resource 'https://repo1.maven.org/maven2/com/android/tools/build/gradle-core/2.2.0/gradle-core-2.2.0.jar'.

         > Premature end of Content-Length delimited message body (expected: 1802990; received: 364765

成功打包后,会在platforms/android下增加一个build文件夹

打包好的apk在platforms/android/build/outputs/下,可以拷贝到手机上安装了

4.4 直接通过usb数据线在手机上安装

ionic run android

a-用数据线连上手机,输入adb devices命令,测试手机是否成功连接

b-运行ionic run android直接安装打过包的apk到手机上

c-真机演示效果

 

但是在chrome浏览器的虚拟手机中和IOS手机中,tabs是在下面的

 

解决方案如下:

在www/js/app.js中,对配置config的匿名函数增加一个参数,并在函数内增加一段代码即可

参考网址:http://bbs.phonegap100.com/thread-1495-1-1.html

5.连接失败timedout处理

ionic start  etimedout

 

1.通过config命令
npm config set registry https://registry.npm.taobao.org 
npm info underscore (如果上面配置正确这个命令会有字符串response)

2.命令行指定
npm --registry https://registry.npm.taobao.org info underscore 

3.编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

4、使用cnpm(强烈建议)
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后所有的npm可用cnpm代替,如:cnpm install ionic

搜索镜像: https://npm.taobao.org

建立或使用镜像,参考: https://github.com/cnpm/cnpmjs.org

 

首先,我们的npm包无所谓安全性,所以不要使用性能和效率更慢的https,转而使用http,相关命令如下:

1、关闭npm的https

    npm config set strict-ssl false

2、设置npm的获取地址

npm config set registry "http://registry.npmjs.org/"

清除npm的代理命令如下:

    npm config delete http-proxy

    npm config delete https-proxy

如果设置了proxy,加一个–no-proxy参数试试。ionic start app2 -no-proxy