Fork me on GitHub

HybridApp__ionic的环境配置及使用步骤

发表于 | 分类于 |

1.ionic环境安装以及配置

1.1. 安装ionic 与 cordova

  • npm install -g ionic cordova
    • npm install -g ionic
      • 是基于cordova的封装，提供一些额外的组件以及集成了angular
    • npm install -g cordova
      • 作用实现对html项目的打包
  • 检测是否安装成功
    • 执行命令:ionic -v
    • cordova -v 如果能够输出版本信息，则表示安装成功
  • 安装的时候注意网络问题. 可以使用淘宝的镜像源。
  • 如果不成功多试几次。

    1.2. jdk

    • java运行需要环境(混合app的壳需求环境)
    • 检查安装是否成功，在cmd中输入:java
    • 配置环境变量：
  • 计算机·属性·->高级系统设置->环境变量->新建->
    • 添加变量名：JAVA_HOME 变量值: C:\Program Files\Java\jdk1.8.0_91\bin
  • 还要在path中添加%JAVA_HOM%;
  • 之后检查在cmd中输入javac看是否能通过（目的：将java代码编译成二进制文件）

1.3. sdk单独下载需要科学上网:android Studio

  • 配置环境：
  • 设置ANDROID_HOME变量名,变量值是sdk的路径:C:\Users\isc(计算机名)\AppData\Local\Android\sdk

  • 在PATH中追加 %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\build-tools;

  • 在命令行(cmd)中使用adb命令验证

1.4. node,git,vs2015

  • 配置环境的目的是为了打包

2. ionic的使用

2.1. 使用ionic初始化一个移动App的项目

  • ionic start [项目名] [项目模板]
    • 示例: ionic start myApp sidemenu
    • [项目名] 不能够是中文,并且项目默认是我们app安装后的名字
    • [项目模板]有3种值 : blank, tabs ,sidemenu
    • 注意:项目名不能是中文，模板名称，有3个可选先项tabs 、menu、blank
    • 注意整个项目所在目录不能有中文,并且项目的文件名也不能够有中文
    • 在www目录中写我们前端的代码。// 默认也是以index.html为入口文件。
      • 到这一步我们就可以像往常一样进行开发了,只不过是在www目录下开发。

2.2. 添加不同平台的源码，使之能够运行与各个平台

当项目完成之后，在项目文件夹中，打开cmd,执行命令：

  • ionic platform add android
  • ionic platform add ios
  • 上面两个命令人在当前项目目录生成一个platforms文件夹，文件夹中是我们ionic对应不同平台的源码。

2.3. 现在就可以编译打包我们的代码

  • ionic build android
  • 或者 : ionic build ios
  • 最终会生成相应平台的安装包
  • 以上两个命令什么将源码生成相应平台的安装包
  • 只要是做ios开发，都需要mac系统。xcode,mac系统下也能开发安卓

注意

  • 若第一次打包的话会下载一个东西在C:\Users\lenovo.gradle\wrapper\dists\gradle-2.13-all\7hsc6vr6mi3i6i5m7q9hj4ci1q
  • 看是否有gradle-2.13-all.zip(不要压缩，ionic会自己压缩)，若没有自己根据命令行中所给的连接
  • 链接，在浏览器中下载压缩包放在这个目录中，再用ionic build android编译一下，会自动解压的
  • 除了文件内容之后，不要有中文，即文件名不能有中文.
  • 容易丢包的问题,(下载的项目可能会有文件丢失)

2.4.在手机一键安装：用谷歌的共享手机插件(vysor)，打开开发者模式

  • 在cmd中使用命令：ionic run android -l -c -s //连接手机，修改文件，自动刷新（run包含build执行代码）
    adb devices //可以查看手机是否连接在电脑上
  • 小知识：
    • 检查是不是原生App的方法：在手机设置->辅助功能->开发者模式->显示布局边界(点开)，若有
      许多边框出现，则是原生App
      注意
      • 有的手机上的开发模式没有显示出来，android手机版本4.0以上都有开发者模式，可以用打开
      • 手机按键输入：##7777##就可以调出开发者选项了。还有一种办法就是在手机设置中找到手机内核版本
      • 连续点击(共7次)，就可以激活开发者模式了。

分区助手

-------------本文结束感谢您的阅读-------------