ionic在window7和ubuntu164下的环境配置.docx
- 文档编号:3275654
- 上传时间:2023-05-05
- 格式:DOCX
- 页数:14
- 大小:721.72KB
ionic在window7和ubuntu164下的环境配置.docx
《ionic在window7和ubuntu164下的环境配置.docx》由会员分享,可在线阅读,更多相关《ionic在window7和ubuntu164下的环境配置.docx(14页珍藏版)》请在冰点文库上搜索。
ionic在window7和ubuntu164下的环境配置
1、Ubuntu安装方法
1、Ubuntu
安装关联程序:
sudoapt-getinstallgit-corecurlbuild-essentialopenssllibssl-dev
因为androidsdk是32位的但是我们的系统是64位所以要安装32位的运行库:
sudoapt-getinstalllib32z1lib32ncurses5
安装Javasdk:
whereisjava 查看路径(/usr/bin/java)
InstallingdefaultJRE/JDK
sudoapt-getupdate
sudoapt-getinstalldefault-jre
sudoapt-getinstalldefault-jdk
InstallingOracleJDK(选择安装版本)
sudoapt-getinstallpython-software-properties
sudoadd-apt-repositoryppa:
webupd8team/java
sudoapt-getupdate
sudoapt-getinstalloracle-java6-installer#OracleJDK6(旧版本)
sudoapt-getinstalloracle-java7-installer#OracleJDK7(较新的稳定版本)建议选7
sudoapt-getinstalloracle-java8-installer#OracleJDK8(最新预览版本)
配置
sudoupdate-alternatives--configjava
//出现 直接回车选择默认值
*0/usr/lib/jvm/java-7-oracle/jre/bin/java1072自动模式
1/usr/lib/jvm/java-7-openjdk-amd64/jre/bin/java1071手动模式
2/usr/lib/jvm/java-7-oracle/jre/bin/java1072手动模式
sudoupdate-alternatives--configjavac//同上操作
配置JAVA_HOME环境
sudoupdate-alternatives--configjava //查看配置路径path为"/usr/lib/jvm/java-7-oracle"
sudovim/etc/environment
//在文件最后加上保存退出
JAVA_HOME="/usr/lib/jvm/java-8-openjdk-amd64/"
java-version//查看是否配置成功
安装ant、npm、node:
sudoapt-getinstallant npmnodejsnodejs-legacy node-express-generator
查看ant、npm、node版本分别为:
ant-v、 npm-v、 node-v
安装androidsdk:
android-sdk-linux.tgz:
或 wget-Oandroid-sdk.tgz
$sudotar -zxvf /home/guer168/android-sdk.tgz
$ sudomv/home/guer168/android-sdk-linux /usr/lib/android-sdk
$ sudochown-Rroot:
root/usr/lib/android-sdk
$sudochmod-R777 /usr/lib/android-sdk
打开AndroidSDKManager:
$sudoandroid-v 或 $sudo /usr/lib/android-sdk/tools/android
设置代理
填入端口80
并勾选“Forcehttps:
//...sourcestobefetchedusinghttp:
//...单击Close关闭”
这里千万注意只需要勾选3个AndroidSDKPlatform-tools、AndroidSDKBuild-tools、API23下的SDKPlatform(编译的时候会提示你需要的api版本,目前是API23)
附加:
项目集成Crosswalk需要勾选Extras下的AndroidSupportRepository和GoogleRepository否则会报错
编辑~/.bashrc 加入AndroidSDKtoolspath
$sudo vim ~/.bashrc
在最后面加入
export PATH=${PATH}:
/usr/lib/android-sdk/tools
export PATH=${PATH}:
/usr/libandroid-sdk/platform-tools
$ sudo vim /etc/environment
//在文件最后加上保存退出
ANDROID_HOME="/usr/lib/android-sdk"
创建一个AVD(建议使用Genymotion,原装的太太太卡),运行 $sudo /usr/lib/android-sdk/tools/monitor
查看版本:
android-version 或android-h
调出AndroidSDKManager:
android-v
安装ant、phonegap、cordova、ionic、cordova-plugin-console express:
$npminstall-gphonegapcordovaioniccordova-plugin-consolecordova-plugin-whitelist
查看构建环境是否正确:
cordovarequirementsandroid
2、Window安装方法
安装java-sdk:
java-jdk-8u111-windows-x64.exe:
新建->变量名"JAVA_HOME",变量值"C:
\ProgramFiles\Java\jdk1.8.0_111"(即JDK的安装路径)
新建->变量名“CLASSPATH”,变量“.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar”
编辑->变量名"Path",在原变量值的最后面加上";%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;"
查看版本:
javac-version或java-version
安装ant:
apache-ant-1.9.7-bin.zip:
新建->变量名"ANT_HOME",变量值"C:
\ProgramFiles\Java\apache-ant-1.9.7"
编辑->变量名"Path",在原变量值的最后面加上";C:
\ProgramFiles\Java\apache-ant-1.9.7\bin"
查看版本:
ant-v
安装androidsdk:
androidsdk.rar:
新建->变量名“ANDROID_HOME”,变量“C:
\ProgramFiles\Java\androidsdk”
编辑->变量名"Path",在原变量值的最后面加上";%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools"
查看版本:
android-version 或android-h
调出AndroidSDKManager:
android-v
配置AndroidSDK国内无法访问google服务器所以列表是空的需要配置镜像
选择Tools-Options打开设置界面
填入端口80
并勾选“Forcehttps:
//...sourcestobefetchedusinghttp:
//...单击Close关闭”
依次选择Packages-Reload(或者重新打开)
这里千万注意只需要勾选3个AndroidSDKPlatform-tools、AndroidSDKBuild-tools、API23下的SDKPlatform(编译的时候会提示你需要的api版本,目前是API23)
如果你勾选了其它的,可能要下载2、30G的东西。
像我这样选只需要下载200M
附加:
项目集成Crosswalk需要勾选Extras下的AndroidSupportRepository和GoogleRepository否则会报错
接受-安装
安装完的列表新版ionic只需装23,如果编译遇到错误就安装API22的platform
安装ant、phonegap、cordova、ionic、cordova-plugin-console express:
npm install -gantphonegapcordovaionicexpresscordova-plugin-consolecordova-plugin-whitelist
更新:
npmupdate-gphonegapcordovaionicexpresscordova-plugin-console...
cordovapluginaddcordova-plugin-whitelist (解决打包后加载数据失败)
ionic plugin add cordova-plugin-whitelist
查看构建环境是否正确:
cordovarequirementsandroid
3.新建一个Ionic项目
ionic start myApp tabs
cdmyApp
ionicpluginadd cordova-plugin-whitelist (解决打包后加载数据失败)
ionicresourcesandroid/ios --save
ionicplatformaddandroid/ios
#ionicplatformrmandroid / ionicplatformremoveandroid
ionicbuildandroid/ios (cordovabuildandroid----ant)
ionicemulateandroid/ios 或真机运行ionicrun
ionic serve
常用命令:
npminstall-gcnpm--registry=https:
//registry.npm.taobao.org(npm镜像源指向淘宝)
cnpminstall-gcordovaionic(安装cordovaionic)
cnpmupdate-gcordovaionic(更新cordovaionic)
ionic-help(查看帮助)
ionic-v(查看版本)
cordovarequirementsandroid(命令查看构建环境)
ionicstartmyAppblank(空项目)
ionicstartmyApptabs(带导航条)
ionicstartmyAppsidemenu(带侧滑菜单)
ionicplatformaddandroid(添加android平台)
ionicplatformremoveandroid(移除android平台)
ionicbuildandroid(编译项目apk)
ionicemulateandroid(运行项目apk手机连接在手机运行模拟器连接在模拟器运行)
ionicrunandroid(相当于build+emulate)
ionicserve(开启服务调试)
4.常见错误:
如果出现"ios-simwasnotfound."错误,可以执行以下命令:
npm install -g ios-sim
如果出现"Ionicbug:
Error:
Sourcepathdoesnotexist:
resources/ios/icon/icon-40@3x.png"错误:
1.可以执行以下命令:
ionicresources如果找不到icon-40@3x.png可以实行步骤2
2.下载原始myapp:
复制res和 resources目录到项目中
如果出现"Failed to install 'cordova-plugin-console':
Error:
cmd:
Command failed with exit
code 1"错误:
下载一个新的gradle压缩包进行替换,建议下载比原来目录版本高的如果出错 官方下载地址:
http:
//gradle.android-studio.org/ 网盘下载gradle-3.0-all.zip:
将我们下载的gradle.zip存放在本地路径:
yourproject/platforms/android/gradle
根据此目录找到配置文件:
yourproject/platforms/android/cordova/lib/builders/GradleBuilder.js
修改distributionUrl变量:
var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'http\\:
//services.gradle.org/distributions/gradle-2.2.1-al.zip';
修改为:
var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || '../gradle-3.0-all.zip';
完成后直接build项目即可
如果出现ls:
nosuchfileordirectory:
/var/www/app/myapp/res/mipmap-* 错误:
npmlinkcordova
npmlinkionic
cordova plugin add https:
//git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ionic window7 ubuntu164 环境 配置
![提示](https://static.bingdoc.com/images/bang_tan.gif)