Ionic + cordova开发Android 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:
(1)npm 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