ionic开发——环境搭建

时间:2022-12-11 21:52:06

1.准备工作


a.下载 Node.js(下载包https://nodejs.org/en/

    查看node.js是否安装

          Node  -v

b.安装python(https://www.python.org/downloads/)

c.WebStormIDE,编写代码,浏览器调试)

d.JDKwebstorm 运行环境)

e.Android SDK (Android编译)

 

2.配置环境变量:

      计算机→属性→高级系统设置→高级→环境变量

   A.JDK环境变量

     a.系统变量→新建 JAVA_HOME 变量 。

        变量值填写jdk的安装目录( E:\Java\jdk1.7.0)

    b.系统变量→寻找 Path 变量→编辑

        在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

       (注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码)

    c.系统变量→新建 CLASSPATH 变量

        变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)

     d.检验是否配置成功 运行cmd 输入 java -version (java 和 -version 之间有空格)

       若显示版本信息则说明安装和配置成功。


   B.SDK环境变量

     a.系统变量→新建 ANDROID_HOME 变量 。

        变量值填写sdk的安装目录( E:\sdk)

     b.系统变量→寻找 Path 变量→编辑

        在变量值最后输入 %ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

       (注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码)


3.安装ionic等,运行命令提示符(管理员) 输入


    将cordova和ionic包安装到全局环境中(可供命令行使用):

    npm install -g cordova ionic  

  *注:由于GFW,很多插件下载不下来,我们可以使用淘宝镜像来解决这个问题:

npm install -g cnpm --registry=https://registry.npm.taobao.org  

   安装完成后,以后所有的插件都使用cnpm这个命令来进行安装。

   cnpm install -g ionic cordova

  *注:安装速度取决于你的网速,未出现ERR的错误提示说明安装成功。


4.查看cordova和ionic是否安装成功


    cordova -v  

         ionic -v

   出现版本号说明安装成功。


5.创建项目

   a.进入你要创建项目的路径:

       1.D:

       2.cd D:\project  

    b.创建一个名为myApp的还有tabs的项目(ionic start <project-name>  <optional-template>) 可选模板为sidemenu侧滑、tabs底部tab切换、blank空白。

       ionic start myApp tabs  

c.myApp就为项目名称,进入myApp这个文件夹:

        cd myApp  

d.添加android平台:

        ionic platform add android  

e.生成androidapk:

        ionic build android  

   *:如果提示build successful则表示安装成功。通常会出现以下情况

       1.比如它会提醒需要platform for android-22sdk,这时候就需要在网上搜索android-22sdk然后解压放在你的sdk目录里面在sdk\plantforms\然后把android-22解压后放到里面

        2.可能出现的问题是build-tools版本问题,我这个给的信息提示是必须要19.1.0以上的版本,我就装了一个的21.0.0版本的,结果报了一堆看不懂的错误,最后还是找了一个19.1.0版本的build-tools才成功安装,在build-tools版本网上搜索然后解压到你的sdk\build-tools文件夹里就可以构建完成了

f.android模拟器或真机中模拟:

        ionic emulate android  

其中f和g可以合并为:

        ionic run android  

即生成apk,并在模拟器或真机中模拟。

此时搭建就已经完成了,在eclipse或者Android studio中导入文件就可以使用了。

6.更新ionic等

    a.更新cordova及ionic包

         npm update -g cordova ionic  

   b.更新已建ionic项目中的js类库,命令行中先进入项目所在目录,然后运行:

        ionic lib update  

7.展现ionic项目结果(显示在ios和android上的样式)

       ionic serve --lab