目录

• 说明
• 环境搭建
• 起始一个ionic项目
• angular（操作数据）在项目中常用到的点，以及与jq（操作dom）思维方式的不同
• 我惠项目目录结构
• 插件小解

说明

ionic 它是在cordova的基础上增加了 ionic UI ，angular.js，还有一些强大的cli工具，以及一些前端自动化构建的知识，以用来开发单页面app的一个前端框架，所以想要用它开发app,我们必须了解下上面提到的东西

1. ionic ui： 它提供了app开发基本的样式，如选项卡组件(ionTab)，导航组件（ionic-nav-view），列表组件，它提供了两种选择，一种是基于css的组件，一种的基于js组件（在angular里面叫做指令），【注意】：导航，内容包裹，下拉刷新，上啦加载等时一般使用js组件
2. angular.js： 就是一个基于mvc模式将项目划分并且具有双向绑定特点的用于开发单页面应用（spa）的js框架
3. cordova: 提供了一系列插件用来访问系统设备，以及打包的工具

1 环境搭建

一个ionic项目所需要的环境有

• node
• ionic&cordova命令行环境(cli)
• jdk
• android sdk（安卓开发工具包，用来打包安卓应用）
• xcode(打包苹果应用，调试工具)

安装nodejs

前往node.js官网https://nodejs.org/zh-cn/下载最新稳定版本的安装包安装即可，安装完成之后
node -v 查看node版本【注】我的版本为v7.10.0
npm -v 查看npm版本 【注】4.2.0

安装cnpm

因为npm服务区在国外，有的包下载可能被墙，导致下载不下来报错，比如头疼我很久的node-sass，所以我强烈建议在安装ionic跟cordova命令行之前先安装国内的淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成之后 cnpm -v查看版本信息【注】5.1.1

安装Codova && ionic

cnpm install -g cordova ionic
安装完成之后，输入cordova -v ,ionic -v,能显示版本号则表示安装成功
【注】cordova 7.1.0 && ionic 3.12.0(每次会让你升级，建议不要升)

安装gulp

cnpm install -g gulp
【gulp】任务流形式的前端自动化构建工具

安装jdk

参考www.jianshu.com/p/b9757a5bcb07，很简单这里不再赘述，注意配置环境变量

安装sdk

Android提供了两个选项：Android studio或者 Android的独立sdk开发工具，我建议只安装SDk,如果您的电脑配置好的话，建议还是a s
http://tools.android-studio.org/index.php/sdk/
【注】：当下载下来android sdk之后，配置完环境变量，要以管理员身份运行cmd，输入安卓下载对应的包，不然下载的时候回报错，很大，建议wifi环境下载...

xCode 最新版

2 起始一个ionic 项目

• ionic start myApp tabs（创建一个带底部切换tab的ionic应用，当然你也可以选择创建一个空模板）

• 创建安卓应用

• cd myApp
• ionic serve (浏览器环境查看)
• ionic platform add android （添加安卓设备）
• 添加完成之后，通过数据线连接电脑（打开开发者选项，usb调试），ionic run android --device

创建 ios应用一样

• ios模拟器查看： ionic emulate ios -l -c(热重载功能)

三 angular（操作数据）在项目中常用到的点，以及与jq（操作dom）思维方式的不同

• 现在你要思考的是页面布局在发生一些动作后会产生变化（显示/隐藏，比如购物车页面，当你的购物车里面有数据的时候会显示你要买的东西，那如果没有呢？则显示一段文案/或者图片，购物车空空如也。）
• 我们可以把整个程序看作是一个状态机（

初始状态-----------------------------------随着用户的操作状态不断变化

我们通常用一些列变量（数组/对象）来标识状态，比如播放视频的初始状态是什么呢?

• 是否正在播放
• 是否播放结束了
• 播放进度的初始值
• ........
  当用户进行了操作，点击播放按钮等等，从而改变这些状态的值，（从而实现播放视频）
  还比如一个列表数据（数组），初始的状态为空数组，在我们请求到服务器数据后，对初始数组做变化（状态即数据），也可以再加载过来之前显示一个正在加载的动画

四 打包app

ionic platform add android

我在添加安卓平台的时候出现了一个错误，The platform command has been renamed. To find out more, run:

ionic cordova platform --help
其实是ionic cli的版本过高，建议降级到ionic cli 2.x版本
执行ionic info可以查看当前的ionic相关的环境变量，我的如下

Your system information:
ordova CLI: 7.1.0
Ionic Framework Version: 3.9.2
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 3.1.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v8.9.1
Xcode version: Not installed

另外，你要使用高版本cli创建ionic1.x的项目，请使用

ionic start myApp blank --type=ionic1 创建一个空白的app项目

ionic start myApp tabs --type=ionic1 创建一个带有tabs项目

ionic start myApp sidemenu --type=ionic1 创建一个带有滑动的项目

解决方案：
确定你当前系统上ionic cli的版本，ionic -v,如果不是2.x版本，使用下面命令降级

npm uninstall -g ionic
npm cache clean
npm install -g ionic@2

ionic start you-project blank
如果出现: Error: Cannot find module 'q'的错误，本地下载安装对应模块即可，
【注】：--save --save-dev的区别，前者是向package.json里面添加项目发布所依赖的模块，后者是添加自动化构建，转译等所要依赖的模块

1 打debug包

在工程目录下执行cordova build android， 会在xxx\platforms\android\build\outputs\apk下生成android-debug.apk
这种命令生成的apk是用于调试的。
【出现的问题】：grade相关错误
【解决方法】：添加环境变量 _JAVA_OPTIONS = -Xmx512M
安装到手机
2 连接手机或者打开模拟器，在xxx\platforms\android\build\outputs\apk下打开命令窗口执行adb install android-debug.apk就能将apk安装在手机或者模拟器上了。

2 两种打包的版本

一种是debug调试版，一种是release发布版

1 打包debug调试版

在工程目录下执行ionic build android，生成的apk就是debug调试版本

2 打包release发布版

在工程目录下执行ionic build andorid --release，生成的apk就是release发布版本。
如果没有配置签名文件则默认只生成android-release-unsigned.apk，没有签名的apk。release版本是必须有签名才能在手机上运行。

3 生成签名

keytool -genkey -v -keystore name.jks -alias alias_name -keyalg RSA -keysize 2048 -validity 10000  

name.jks，name可以自定义，jks是Android studio生成的签名文件的后缀，这里默认使用jks也可以；
alias_name是别名，也是自定义的
具体访问：http://www.jianshu.com/p/dfd98ad47af1

四 出现的问题总结

1 ## 执行ionic build android (或cordova build android)打包时报错的解决方案

错误如下：

Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

解决方案：

• 1、手动下载gradle

gradle-x.x-bin.zip （x.x代表版本）

根据需要下载某一版本

地址：

(https://services.gradle.org/distributions)

• 2、添加环境变量

    PATH=C:\Program Files\gradle-x.x\bin

• 3、关闭cmd或powershell窗口
• 4、重新打开，输入gradle -v，查看gradle安装成功与否
• 5、重新build
  2 ##
  https://stackoverflow.com/questions/44263477/failed-to-fetch-platform-cordova-android6-2-2

ionic serve 报【ionic-app-scripts' 不是内部或外部命令 】问题解决

1、cd至项目路径 输入命令：npm install @ionic/app-scripts@latest --save-dev

运行后，继续报错，下拉查看错误信息后,有提示 “This usually happens because your environment has changed since running 'npm install'. Run 'npm rebuild node-sass' to build the binding for your current environment.”

2、按提示 在项目路径下输入：npm rebuild node-sass

3、重试ionic serve，成功！问题解决！

2

它提示的很明显了：npm WARN Invalid name: "lockeroots的手记"，无效的name字符，不要用中文