Ionic系列——环境配置和项目搭建

安稳与你 提交于 2019-11-28 10:10:08

1、环境介绍

    Java jdk: 开发环境

    Android ADT: Ionic Android开发环境

    IOS Xcode: Ionic Ios开发环境

    ANT: Cordova编译工具

    Node: 开发环境

    Git: 源码拉取下载

    Bower: 包管理工具

    Grunt: node项目构建工具

2、环境配置

2.1、Java  jdk环境

    下载安装Java jdk环境, 并添加到环境变量 JAVA_HOME  中

    配置JAVA的环境变量: http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html

2.2、操作平台环境

2.2.1、Android ADT(Android Development Tools)环境

    下载安装ADT 并添加到环境变量  ANDROID_HOME  中

    如何设置Android环境变量:http://jingyan.baidu.com/article/22a299b51c59d69e19376af8.html

   

    ①首先下载android sdk tools并安装

    Android工具下载网址:http://www.androiddevtools.cn/

                                        www.androiddevtools.cn若跳转失败请手动复制到浏览器中打开

    ②我在安装ionic的时候他说需要安装最新的sdk,就是android22所以需要越狱下载   

     Android 5.1 API 22 所有sdk文件下载地址  http://www.oschina.net/question/1539302_227672

    ③搭建android  AVD模拟环境一直没搞通

    如何新建安卓AVD虚拟模拟器  http://jingyan.baidu.com/article/a681b0ded7e7573b1943465b.html

2.2.2、IOS xcode环境

 暂时只搞了android的,稍后完善!在windows上面安装ios和在ios上添加android环境都比较麻烦。

    但如果你是苹果笔记本,你开发Ionic只需要安装一个Node环境就可以开发了。

2.3、ANT环境

    下载安装ANT 并添加到环境变量 ANT_HOME  中

    ANT的安装和环境变量配置: http://jingyan.baidu.com/article/90808022c5eed8fd91c80f90.html 

    ANT官网下载地址:http://ant.apache.org/

    有的时候需要用管理员打开,可能涉及权限问题。(这句话忘了说什么了,先放着)

2.4、Node环境

    下载安装Node

    Node官网下载地址:https://nodejs.org/download/

2.5、Git环境

    下载安装Git 并添加到环境变量中

    git的安装和配置:http://jingyan.baidu.com/article/9f7e7ec0b17cac6f2815548d.html

    Node官网下载地址:https://nodejs.org/download/

2.6、Bower和Grunt

     之后我会在另一篇博客中完善bower的使用,下载配置,忽略文件等的使用。

npm install -g bower
npm install -g grunt

3、Ionic项目创建

3.1、安装ionic和cordova

    添加的时候最好用cmd的管理员身份运行

npm install -g cordova ionic

3.2、创建项目

$ ionic start myproject  开始第一个项目,默认是tab
$ ionic start webApp blank
$ ionic start webApp tabs
$ ionic start webApp sidemenu


3.3、打包项目运行

    android在项目中打开cmd命令窗口:

 ionic platform add android(添加android平台,在项目中只需要运行一次)
 ionic build android(生成androidapk)
 
 ionic run android
 ionic emulate android(在android模拟器或真机中模拟)这是在虚拟中运行

 ionic serve可自动打开浏览器直接在浏览器测试

    Ios在项目中打开cmd命令窗口:

$ ionic platform add ios
$ ionic build ios(这样生成的是app格式,还需要加ios证书变成ipa格式)
$ ionic emulate ios

3.4、ng-cordova的使用

    Ionic系列——使用ng-cordova插件:http://my.oschina.net/u/1416844/blog/484693

4、项目介绍

    介绍项目中文件夹的意义和作用,忽略哪些上传,刚拉取下来需要进行的操作,稍后完善!

5、错误处理

5.1 、在运行ionic build android的时候报错

    [Error: ANDROID_HOME is not set and "android" command not in your PATH. You

    这个时候要这样设置

    ANDROID_HOME:C:\environment\adt-bundle-windows-x86-20130917\sdk

    在path中写:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

5.2、node在添加-ng-cordova的时候存在跨磁盘移动的问题

    Error: EXDEV, cross-device link not permitted 'C:\Users\shiguoqing\AppData\Local \Temp\git\1435225811973\plugin.xml'

    我目前想到的解决办法是把项目弄到node的安装磁盘,然后在给弄回来,我现在项目挪到c盘去了。

5.3、创建AVD(安卓模拟器)报的错误

    ①首先是这个问题,这是没有安装英特尔硬件加速执行管理器,要手动安装一下。如果是自动安装的androidSDK他已经集成在里面了,但也需要手动安装一下。可以看下面的文章。

英特尔硬件加速执行管理器(英特尔 HAXM)是一款硬件辅助虚拟引擎(管理程序)安装:  http://www.cnblogs.com/csulennon/p/4178404.html


    ②这个问题Stack Overflow上给了一些解释

    屏幕尺寸影响,多个虚拟机影响,摄像头影响等

    emulator window was out of view and was recentred    这个是屏幕的尺寸选的有问题

    emulator: Failed to sync vcpu reg
    emulator: Failed to sync HAX vcpu context
    网上说这两个问题,arm可以打开,intel的打不开了,加速器关了又能打开了,先在主板上打开Virtual tech,硬件加速才能用,另外,只有intel支持VT的CPU才行,我的电脑是acer4741g,说是默认开启,但是bios中没法设置。但是这两个问题一直没有解决,所以模拟器也没有跑起来,各位大神有什么办法?

    http://stackoverflow.com/questions/17024538/how-do-i-fix-failed-to-sync-vcpu-reg-error


③这个是问题是在环境变量配置的PATH中要添加上C:\Windows\System32

④我有一次从新装机,一直遇到这个问题,找不到build-tools

折腾了半天,发现解决的办法很简单就是


 http://blog.csdn.net/langyuewu/article/details/46729985






易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!