正版现货：构建移动网站与APP:ionic移动开发入门与实战(跨平台移动开发丛书)978730246百度网盘pdf下载
作者:
简介:正版现货：构建移动网站与APP:ionic移动开发入门与实战(跨平台移动开发丛书)978730246
出版社：
出版时间：2017-03
pdf下载价格：0.00￥
免费下载
书籍下载
内容介绍
基本信息
- 商品名：正版现货：构建移动网站与APP:ionic移动开发入门与实战(跨平台移动开发丛书)978730246
- ISBN：9787302462019
- 定价：79.00
- 出版社：清华大学出版社
- 作者：秦超
参考信息（以实物为准）
- 出版时间：2017-03-01
- 印刷时间：2017-03-01
- 版次：1
- 印次：1
- 包装：平装
- 开本：16开
- 用纸：胶版纸
- 页数：471
- 字数：780000
产品特色
编辑推荐
对于只有一些网页开发基础知识的读者来说，ionic目前也许是这个星球上*适合你的跨平台移动开发技术框架了。从新手入门学习便捷性、功能快速扩充迭代与重构支持、团队模块化分工协作支持、应用前台性能优化、跨平台支持、开源免费和社区生态成熟度各项指标来看，业界已基本公认ionic都在开发速度、插件功能、组件成熟度以及背后开发团队的专业性上达到了比较完美的平衡。相比其他跨平台方案，ionic优势明显，而且其背后的框架主力开发商有长远的升级路线图。本书以实例驱动讲解的方式，让移动开发零基础读者也能轻松掌握移动应用开发的技术，跟上目前的万众创新、全面移动化乃至工业4.0的热潮。
内容简介
Ionic是目前集流行与成熟两个特点于一身的跨平台移动开发框架。本书以实例驱动讲解的方式，让仅有简单网页制作基础知识的读者，也能轻松掌握Ionic下的移动应用开发。
本书分为5篇，□□篇是移动开发准备篇，介绍了Ionic、Phonegap、Cordova、HTML5和移动开发的一些基础知识；第2篇是Ionic基础知识准备与常用库篇，介绍了配置开发Ionic环境所依赖的AngularJS、SASS、Gulp、lodash等业内主流库和工具；第3篇是Ionic组件完全解析篇，对Ionic内置的CSS样式类和组件类进行完整解析；第4篇是APP项目实战篇，介绍了如何按照业内通行实践的策划、设计、开发过程完成2个使用Ionic开发的完整APP。第5篇是发布和推广应用篇，介绍了在开发完成之后，如何为Android和iOS两大移动平台发布和推广更新自己的APP。
本书内容详尽、实例丰富，是广大HTML 5爱好者、移动互联网创业者、移动开发人员必备的参考书，同时也非常适合大中专院校师生学习阅读，也可作为高等院校计算机及相关专业教材。
本书分为5篇，□□篇是移动开发准备篇，介绍了Ionic、Phonegap、Cordova、HTML5和移动开发的一些基础知识；第2篇是Ionic基础知识准备与常用库篇，介绍了配置开发Ionic环境所依赖的AngularJS、SASS、Gulp、lodash等业内主流库和工具；第3篇是Ionic组件完全解析篇，对Ionic内置的CSS样式类和组件类进行完整解析；第4篇是APP项目实战篇，介绍了如何按照业内通行实践的策划、设计、开发过程完成2个使用Ionic开发的完整APP。第5篇是发布和推广应用篇，介绍了在开发完成之后，如何为Android和iOS两大移动平台发布和推广更新自己的APP。
本书内容详尽、实例丰富，是广大HTML 5爱好者、移动互联网创业者、移动开发人员必备的参考书，同时也非常适合大中专院校师生学习阅读，也可作为高等院校计算机及相关专业教材。
前言序言
Ionic是一个开源免费、技术先进，并获得业内广泛认可的跨平台的移动开发框架。它是基于主流技术HTML 5和AngularJS的快速开发工具，在极大地解放开发创业者的时间和学习成本的同时又融合了成熟的前端工程技术实践的成果。遗憾的是，由于Ionic涉及了前端技术界各种先进技术并不断演进，目前网络上为初学者采纳的Ionic的中文资料不仅散乱不成体系，而且很多内容与Ionic的官方资料有较大的出入，也没有较好的开源项目可以借鉴。国内的初学者想要短时间完全掌握并成功上手开发出一个可用的APP需要走很多弯路。因此作者结合自己的学习与开发经验，在本书以学习Ionic开发的前置基础知识如AngularJS框架、SASS、Gulp等技术面为起点，阐述了Ionic框架的所有组件使用方法之后，辅以两个涵盖前后端实现的Ionic项目完整解析来引导学习者*终掌握Ionic框架及其周边技术。本书的目的是力求通过官方*资料，理论与实战项目相结合使读者在练习与模仿中熟练掌握利用Ionic快速开发跨平台移动APP的方法，并能够真实地将技术转化为经济利益和创业成果。本书的定位就是为想在移动应用领域找工作或创业的人士提供加速器。
本书是一本与众不同的书
1．以练带学
本书采用实例驱动的方式介绍Ionic框架下的APP开发。在介绍书中重要的知识点如AngularJS、应用的页面导航、调用移动设备的硬件功能等后，紧接着就有实例来验证与解释如何应用，*后还通过两个中型项目来复习和巩固所学知识点。
2．跨平台
本书开发的项目是跨平台应用，因此书中对Windows和Mac两种开发环境下如何配置、生成与发布Android和iOS移动APP应用都做了解析。
3．案例涵括Internet和企业应用
本书的项目案例从其业务领域到功能点设置都参考了目前市面上流行的Internet与企业移动应用，同时也提供了读者进一步优化和打造自己产品的建议与外部参考资源。
4．低门槛、浅阅读，轻轻松松就能学会
为使本书更加详尽易懂，每写完一章，笔者邀请了想要跨专业入门移动开发的大学在校生阅读并提出意见，通过它们快速分析出被遗漏的知识点和讲解不清的技术点，使本书更方便初学者入门。
本书的知识结构
本书共5篇15章，主要章节规划如下。
*篇（□□~2章）移动开发准备
跨平台的框架有很多， Ionic的独特优势在哪里导致它的风行？决定选择它后，又如何为它搭建开发与测试环境，并开发*个Hello World应用？一个Ionic的应用如何使用浏览器、模拟器和实体机测试？如何打包应用到实体机上？使用何种开发工具加速开发进程？这些都是本篇要介绍的内容。
第二篇（第3~4章）Ionic基础知识准备与常用库
Ionic构建于目前先进的前端技术框架与工具集之上，不了解这些背景知识点是无法正确理解和应用Ionic框架的强大功能的。因此本篇介绍了配置开发Ionic环境所依赖的AngularJS、SASS、Gulp、lodash等这些业内主流的库和工具，以及Ionic CLI。*后以一个完整的Ionic项目模板的目录文件结构解析帮助读者了解一个Ionic应用的构成元素与结构。
第三篇（第5~11章）完整解析Ionic框架的官方组件
本篇基于Ionic官方文档和笔者在实际项目中的经验，对Ionic内置的CSS样式类和组件类进行完整解析，并通过丰富的代码与效果案例介绍其使用场景与定制途径。此外本篇也说明了常用的Cordova插件和安装使用方法，使APP应用能够使用手机硬件设备专有功能如照相、地理定位、震动，分享到其他社交应用等。
第四篇（□□2~14章）APP项目前后端实战篇
本篇是关键的综合实战篇，详细介绍了如何依照业内通行的敏捷过程来进行设计、开发，从而完成2个使用Ionic开发的APP应用。除了综合使用了前文介绍的Ionic组件外，还详述了如何配置与测试后端服务的API、集成高德地图、百度ECharts图表等技术，这都是在实际的APP项目中常常会遇到的需求功能点。
第五篇（□□5章）发布和推广更新APP应用
内容不多，却是一个APP走向市场和客户的*终一步。本篇讲述了将使用Ionic框架开发的跨平台应用为Android和iOS两大平台打包的完整过程。此外还介绍了发布和更新应用的方法，使读者能真正将开发的应用转化为经济效益。
本书面向的读者
? HTM 5入门者与HTML 5爱好者
? 移动互联网创业者
? 基于HTML 5的开发人员
? 各种平台下的移动开发人员
? 从其他开发语言转行做移动开发的人员
? 前端开发人员和前端设计人员
? Ionic入门学习者
? 大中专院校的学生
? 可作为各种移动应用培训学校的入门教程
代码下载
本书由秦超主笔，其他参与创作的人员还有宋士伟、张倩、周敏、魏星、邹瑛、王铁民、殷龙、李春城、张兴瑜、胡松涛、李柯泉、林龙、赵殿华、牛晓云。
编 者
2017年1月
本书是一本与众不同的书
1．以练带学
本书采用实例驱动的方式介绍Ionic框架下的APP开发。在介绍书中重要的知识点如AngularJS、应用的页面导航、调用移动设备的硬件功能等后，紧接着就有实例来验证与解释如何应用，*后还通过两个中型项目来复习和巩固所学知识点。
2．跨平台
本书开发的项目是跨平台应用，因此书中对Windows和Mac两种开发环境下如何配置、生成与发布Android和iOS移动APP应用都做了解析。
3．案例涵括Internet和企业应用
本书的项目案例从其业务领域到功能点设置都参考了目前市面上流行的Internet与企业移动应用，同时也提供了读者进一步优化和打造自己产品的建议与外部参考资源。
4．低门槛、浅阅读，轻轻松松就能学会
为使本书更加详尽易懂，每写完一章，笔者邀请了想要跨专业入门移动开发的大学在校生阅读并提出意见，通过它们快速分析出被遗漏的知识点和讲解不清的技术点，使本书更方便初学者入门。
本书的知识结构
本书共5篇15章，主要章节规划如下。
*篇（□□~2章）移动开发准备
跨平台的框架有很多， Ionic的独特优势在哪里导致它的风行？决定选择它后，又如何为它搭建开发与测试环境，并开发*个Hello World应用？一个Ionic的应用如何使用浏览器、模拟器和实体机测试？如何打包应用到实体机上？使用何种开发工具加速开发进程？这些都是本篇要介绍的内容。
第二篇（第3~4章）Ionic基础知识准备与常用库
Ionic构建于目前先进的前端技术框架与工具集之上，不了解这些背景知识点是无法正确理解和应用Ionic框架的强大功能的。因此本篇介绍了配置开发Ionic环境所依赖的AngularJS、SASS、Gulp、lodash等这些业内主流的库和工具，以及Ionic CLI。*后以一个完整的Ionic项目模板的目录文件结构解析帮助读者了解一个Ionic应用的构成元素与结构。
第三篇（第5~11章）完整解析Ionic框架的官方组件
本篇基于Ionic官方文档和笔者在实际项目中的经验，对Ionic内置的CSS样式类和组件类进行完整解析，并通过丰富的代码与效果案例介绍其使用场景与定制途径。此外本篇也说明了常用的Cordova插件和安装使用方法，使APP应用能够使用手机硬件设备专有功能如照相、地理定位、震动，分享到其他社交应用等。
第四篇（□□2~14章）APP项目前后端实战篇
本篇是关键的综合实战篇，详细介绍了如何依照业内通行的敏捷过程来进行设计、开发，从而完成2个使用Ionic开发的APP应用。除了综合使用了前文介绍的Ionic组件外，还详述了如何配置与测试后端服务的API、集成高德地图、百度ECharts图表等技术，这都是在实际的APP项目中常常会遇到的需求功能点。
第五篇（□□5章）发布和推广更新APP应用
内容不多，却是一个APP走向市场和客户的*终一步。本篇讲述了将使用Ionic框架开发的跨平台应用为Android和iOS两大平台打包的完整过程。此外还介绍了发布和更新应用的方法，使读者能真正将开发的应用转化为经济效益。
本书面向的读者
? HTM 5入门者与HTML 5爱好者
? 移动互联网创业者
? 基于HTML 5的开发人员
? 各种平台下的移动开发人员
? 从其他开发语言转行做移动开发的人员
? 前端开发人员和前端设计人员
? Ionic入门学习者
? 大中专院校的学生
? 可作为各种移动应用培训学校的入门教程
代码下载
本书由秦超主笔，其他参与创作的人员还有宋士伟、张倩、周敏、魏星、邹瑛、王铁民、殷龙、李春城、张兴瑜、胡松涛、李柯泉、林龙、赵殿华、牛晓云。
编 者
2017年1月
目录
□□章 欢迎进入移动开发的世界 1
1.1 移动互联网行业的浪潮 1
1.2 跨平台移动开发框架 2
1.2.1 什么是跨平台移动开发框架 2
1.2.2 为什么选择跨平台移动开发框架 3
1.2.3 可选的跨平台移动开发框架简介 4
1.2.4 什么是PhoneGap / Cordova / Ionic 8
1.3 初识Ionic v1.x 8
1.3.1 为什么选择Ionic 9
1.3.2 基于Web技术HTML 5/CSS 3/ 10
1.3.3 基于AngularJS框架 11
1.3.4 接近原生APP应用的炫丽界面组件 11
1.3.5 自适应（Responsive）布局 12
1.3.6 支持个（任）性定制 13
1.3.7 Ionic的缺点 13
1.3.8 Ionic的商业案例 14
1.3.9 Ionic的开源案例 15
1.3.10 Ionic的未来——Ionic v2.0 & AngularJS v2.0 16
1.4 学习完本书找工作与创业 17
1.4.1 从本书的项目实战开始准备技术作品 17
1.4.2 Ionic 助力实现你的创业梦想 18
1.5 小结 18
第2章 Ionic 的开发调试环境安装 19
2.1 Ionic 快速上手环境安装 19
2.1.1 安装Node.js和NPM 19
2.1.2 安装Git 21
2.1.3 安装Gulp和Bower 23
2.1.4 安装Ionic CLI与Cordova 24
2.1.5 安装设置Chrome浏览器（推荐） 25
2.1.6 Hello Ionic项目 27
2.1.7 使用浏览器验证开发环境自动重载特性 28
2.2 Windows下安装Android开发平台 29
2.2.1 安装Android开发环境 29
2.2.2 为测试项目增加Android平台支持 34
2.2.3 连接Android实体机设备测试APP 34
2.2.4 不使用Android模拟器的说明 36
2.3 Apple OS X下安装iOS与Android 开发平台 36
2.3.1 安装Xcode 37
2.3.2 为测试项目增加iOS平台支持 37
2.3.3 连接iOS模拟器测试APP 37
2.3.4 低成本连接iOS实体机设备测试APP 38
2.3.5 安装Android开发环境 40
2.3.6 为测试项目增加Android平台支持 45
2.3.7 连接Android实体机设备测试APP 45
2.4 安装开发工具Sublime Text 3（推荐） 47
2.4.1 安装开发工具Sublime Text 3 47
2.4.2 安装Ionic辅助编码插件 48
2.5 小结 49
第3章 AngularJS v1.x入门初步 50
3.1 AngularJS整体结构概述 50
3.1.1 AngularJS实现了M.V.VM模式 51
3.1.2 AngularJS为实现了模块化 52
3.1.3 AngularJS实现了声明式界面 52
3.1.4 AngularJS实现了双向数据绑定 52
3.2 代码模块与依赖注入 54
3.2.1 定义模块与组件 54
3.2.2 使用模块与组件依赖注入 55
3.2.3 AngularJS模块与文件 56
3.3 数据作用域与控制器 56
3.3.1 在控制器内初始化作用域对象 56
3.3.2 使用作用域对象 57
3.3.3 控制器与作用域的反模式 59
3.4 指令和过滤器 59
3.4.1 指令Directive是什么 60
3.4.2 自定义指令及使用 60
3.4.3 使用过滤器Filter 62
3.5 服务类组件 63
3.5.1 Provider服务组件详解 64
3.5.2 Factory服务组件详解 65
3.5.3 Service服务组件简介 66
3.5.4 服务类组件特性总结 67
3.6 一个简单的AngularJS项目：实时自选股行情页 67
3.7 小结 76
第4章 其他基础知识与Ionic项目结构 77
4.1 SASS 入门 77
4.1.1 变量与计算 78
4.1.2 样式嵌套 79
4.1.3 单行注释 // 81
4.1.4 继承@extend 82
4.1.5 混入@mixin与@include 83
4.1.6 颜色计算 85
4.1.7 引入文件@import 86
4.1.8 条件语句@if和@else 87
4.2 lodash（可选学） 87
4.2.1 使用场景 87
4.2.2 引入到项目 88
4.2.3 进一步学习指南 88
4.3 Gulp使用简介（可选学） 89
4.3.1 Gulp主文件gulpfile.js的执行原理 89
4.3.2 获取流函数src 90
4.3.3 写文件函数dest 91
4.3.4 监视文件变化函数watch 92
4.3.5 定义任务函数task 93
4.3.6 解析Ionic项目Gulp主文件 94
4.4 Ionic项目模板目录结构简介 95
4.4.1 常用工作目录 www 96
4.4.2 常用工作目录scss 96
4.4.3 常用工作目录 resources 97
4.4.4 重要文件package.json 97
4.4.5 重要文件config.xml 97
4.4.6 其他目录与文件简介 98
4.5 小结 98
第5章 Ionic内置CSS样式 99
5.1 栅格布局解析 100
5.1.1 基本行与列CSS类 101
5.1.2 指定列宽比例与自定义 102
5.1.3 指定列相对偏移比例 105
5.1.4 纵轴对齐方式 107
5.1.5 响应式栅格 109
5.1.6 示例：表情包图片库浏览页 111
5.2 固定标题栏 113
5.2.1 固定标题条 114
5.2.2 固定顶栏 114
5.2.3 固定底栏 115
5.3 按钮 116
5.3.1 普通按钮与配色结合 116
5.3.2 按钮尺寸、宽度样式 118
5.3.3 无填充色按钮与文本型按钮 119
5.3.4 图标按钮 120
5.3.5 标题栏按钮 121
5.3.6 按钮条 123
5.4 列表容器 124
5.4.1 分割条式列表项 125
5.4.2 列表项内图标 126
5.4.3 列表项内按钮 127
5.4.4 列表项内头像 128
5.4.5 列表项内缩略预览图 129
5.4.6 有边距的列表 130
5.5 展示卡 131
5.5.1 普通卡 132
5.5.2 增加标题栏装饰效果 133
5.5.3 卡列表 134
5.5.4 卡内图片 134
5.5.5 Facebook型展示卡 135
5.6 表单控件样式 137
5.6.1 输入字段名提示 137
5.6.2 输入控件图标 140
5.6.3 有边距的输入表单 141
5.6.4 输入控件单独设置边距 141
5.6.5 标题栏上放置文本输入控件 142
5.7 开关类组件 142
5.8 范围选择组件 144
5.9 选择框组件 145
5.10 选项卡栏 146
5.10.1 普通文本型选项卡 147
5.10.2 图标型选项卡 148
5.10.3 图标置顶或置左型选项卡 149
5.10.4 选项卡指示条 151
5.11 自定义主题颜色 152
5.12 可用图标集 154
5.13 内边距微调 155
5.14 小结 155
第6章 Ionic内置JS组件概述 156
6.1 Ionic内置JS组件 156
6.1.1 组件分类与前后缀说明 156
6.1.2 Ionic内置JS组件与CSS样式类集成 157
6.1.3 Ionic内置JS组件与AngularJS 集成 157
6.2 使用JS组件的常见问题解决办法 158
6.2.1 交互调试部署到Android设备上的Ionic应用 158
6.2.2 设备上显示白屏幕错误问题调试 159
6.2.3 使用Batarang进行性能分析 160
6.3 小结 161
第7章 Ionic内置布局类组件 162
7.1 固定标题栏 162
7.2 内容显示相关组件 164
7.2.1 内容展示容器 164
7.2.2 内容滚动容器 167
7.2.3 内容容器对象滚动服务 169
7.2.4 加载新内容滚动触发器 169
7.2.5 下拉刷新组件 171
7.3 小结 173
第8章 Ionic内置导航类组件 174
8.1 导航框架相关组件 175
8.1.1 导航视图容器与视图 175
8.1.2 定制顶部导航栏 179
8.1.3 浏览历史服务 182
8.2 选项卡相关组件 183
8.2.1 选项卡栏与选项卡 183
8.2.2 选项卡服务 188
8.3 侧栏菜单相关组件 189
8.3.1 侧栏菜单框架 189
8.3.2 侧栏菜单显示设置 194
8.3.3 侧栏菜单服务 194
8.4 导航应用综合实战：个人电子简历APP框架 195
8.5 小结 201
第9章 Ionic内置数据展示与操作组件 202
9.1 列表相关组件 202
9.1.1 列表容器与列表项定制 202
9.1.2 列表服务 205
9.1.3 列表高性能显示优化 206
9.2 表单输入相关组件 208
9.3 对话框类相关组件 209
9.3.1 模态框 209
9.3.2 浮动框 211
9.3.3 弹出框 213
9.3.4 上拉菜单 216
9.3.5 背景幕布 218
9.3.6 对话框类组件综合示例 218
9.4 加载中提示相关组件 226
9.4.1 加载中指示器 226
9.4.2 加载中指示服务 227
9.5 轮播组件 229
9.6 手势事件与服务组件 232
9.6.1 Ionic手势事件类型 232
9.6.2 手势事件 232
9.7 键盘组件 233
9.7.1 键盘插件 233
9.7.2 悬浮底栏指令 234
9.8 小结 234
□□0章 Ionic内置基础服务组件与设备平台客制化 235
10.1 平台服务组件 235
10.2 其他工具 237
10.2.1 应用基础配置 237
10.2.2 设备信息与基本操作 238
10.2.3 DOM信息与基本操作 240
10.2.4 DOM元素位置信息 240
10.2.5 事件管理 241
10.3 设备平台客制化 242
10.3.1 设备平台CSS样式类 242
10.3.2 使用AngularJS客制化平台风格示例 244
10.4 小结 246
□□1章 借助插件接近无限可能 247
11.1 Cordova插件 247
11.1.1 搜索可用的插件 247
11.1.2 插件管理（安装、删除、显示已装插件） 248
11.1.3 cordova-plugin-battery-status插件使用示例 249
11.1.4 cordova-plugin-whitelist插件说明 251
11.2 ngCordova插件集 253
11.2.1 安装ngCordova插件集 253
11.2.2 ngCordova插件使用步骤概要 254
11.2.3 插件$cordovaDevice使用示例 257
11.2.4 插件$cordovaToast使用示例 258
11.2.5 插件$cordovaContacts使用示例 259
11.2.6 插件$cordovaLocalNotification使用示例 260
11.2.7 插件$cordovaGeolocation使用示例 260
11.2.8 插件$cordovaVibration使用示例 262
11.2.9 插件$cordovaCamera使用示例 262
11.2.10 插件$cordovaSocialSharing使用示例 264
11.2.11 插件$cordovaNetwork使用示例 265
11.2.12 插件$cordovaSQLite使用示例 266
11.3 小结 267
□□2章 后端服务器模拟环境搭建准备 268
12.1 MongoDB安装与测试 268
12.2 Postman安装与使用示例 271
12.3 使用Express初始化创建API示例 274
12.4 使用Mongoose完善数据持久化示例 282
12.5 使用Passport加入用户验证示例 287
12.6 小结 296
□□3章 项目实战：逍遥游APP v0.1(UGC+B2C应用) 297
13.1 项目和代码说明 297
13.1.1 项目说明 297
13.1.2 随书代码运行说明 298
13.2 功能设计 298
13.2.1 界面与功能概述 300
13.2.2 服务端API接口概述 303
13.3 功能实现 303
13.3.1 准备工作：部署服务器端环境 304
13.3.2 初始化项目设置与目录结构 305
13.3.3 实现总体界面导航与路由 306
13.3.4 实现侧栏菜单功能集 312
13.3.5 实现旅友行踪功能集 321
13.3.6 实现我的足迹功能集 332
13.3.7 实现预约旅游产品功能集 351
13.3.8 实现设置功能集 363
13.3.9 定制启动屏与APP图标 371
13.4 小结与作业练习 371
□□4章 项目实战：销售掌中宝v0.1 （企业应用） 373
14.1 项目和代码说明 373
14.1.1 项目说明 374
14.1.2 随书代码运行说明 374
14.2 功能设计 375
14.2.1 界面与业务功能概述 375
14.2.2 服务端API接口概述 378
14.3 功能实现 379
14.3.1 准备工作：部署服务器端环境 379
14.3.2 初始化项目设置与目录结构 381
14.3.3 完成总体界面导航与路由 382
14.3.4 实现侧栏菜单与登录/退出功能 387
14.3.5 实现商机业务功能集 391
14.3.6 实现拜访业务功能集 404
14.3.7 实现客户业务功能集 420
14.3.8 实现订单业务功能集 434
14.3.9 实现报表显示与初步配置 446
14.4 小结与作业练习 455
□□5章 应用的生成与发布更新 456
15.1 生成发布Android平台的应用包 456
15.1.1 生成发布版的apk文件 456
15.1.2 生成用于签名的私钥 457
15.1.3 对apk文件签名 457
15.1.4 优化apk文件并改名 458
15.1.5 发布Android应用 459
15.2 生成发布iOS平台的应用 459
15.2.1 使用开发者账户连接Xcode 460
15.2.2 签名 460
15.2.3 设置应用的标识名 461
15.2.4 开始应用上架登记 462
15.2.5 尝试编译生成正式发布版的应用 465
15.2.6 使用Xcode打包APP应用 465
15.2.7 创建应用的发布档 466
15.2.8 完成应用上架登记 467
15.3 更新应用 470
15.4 小结 471
1.1 移动互联网行业的浪潮 1
1.2 跨平台移动开发框架 2
1.2.1 什么是跨平台移动开发框架 2
1.2.2 为什么选择跨平台移动开发框架 3
1.2.3 可选的跨平台移动开发框架简介 4
1.2.4 什么是PhoneGap / Cordova / Ionic 8
1.3 初识Ionic v1.x 8
1.3.1 为什么选择Ionic 9
1.3.2 基于Web技术HTML 5/CSS 3/ 10
1.3.3 基于AngularJS框架 11
1.3.4 接近原生APP应用的炫丽界面组件 11
1.3.5 自适应（Responsive）布局 12
1.3.6 支持个（任）性定制 13
1.3.7 Ionic的缺点 13
1.3.8 Ionic的商业案例 14
1.3.9 Ionic的开源案例 15
1.3.10 Ionic的未来——Ionic v2.0 & AngularJS v2.0 16
1.4 学习完本书找工作与创业 17
1.4.1 从本书的项目实战开始准备技术作品 17
1.4.2 Ionic 助力实现你的创业梦想 18
1.5 小结 18
第2章 Ionic 的开发调试环境安装 19
2.1 Ionic 快速上手环境安装 19
2.1.1 安装Node.js和NPM 19
2.1.2 安装Git 21
2.1.3 安装Gulp和Bower 23
2.1.4 安装Ionic CLI与Cordova 24
2.1.5 安装设置Chrome浏览器（推荐） 25
2.1.6 Hello Ionic项目 27
2.1.7 使用浏览器验证开发环境自动重载特性 28
2.2 Windows下安装Android开发平台 29
2.2.1 安装Android开发环境 29
2.2.2 为测试项目增加Android平台支持 34
2.2.3 连接Android实体机设备测试APP 34
2.2.4 不使用Android模拟器的说明 36
2.3 Apple OS X下安装iOS与Android 开发平台 36
2.3.1 安装Xcode 37
2.3.2 为测试项目增加iOS平台支持 37
2.3.3 连接iOS模拟器测试APP 37
2.3.4 低成本连接iOS实体机设备测试APP 38
2.3.5 安装Android开发环境 40
2.3.6 为测试项目增加Android平台支持 45
2.3.7 连接Android实体机设备测试APP 45
2.4 安装开发工具Sublime Text 3（推荐） 47
2.4.1 安装开发工具Sublime Text 3 47
2.4.2 安装Ionic辅助编码插件 48
2.5 小结 49
第3章 AngularJS v1.x入门初步 50
3.1 AngularJS整体结构概述 50
3.1.1 AngularJS实现了M.V.VM模式 51
3.1.2 AngularJS为实现了模块化 52
3.1.3 AngularJS实现了声明式界面 52
3.1.4 AngularJS实现了双向数据绑定 52
3.2 代码模块与依赖注入 54
3.2.1 定义模块与组件 54
3.2.2 使用模块与组件依赖注入 55
3.2.3 AngularJS模块与文件 56
3.3 数据作用域与控制器 56
3.3.1 在控制器内初始化作用域对象 56
3.3.2 使用作用域对象 57
3.3.3 控制器与作用域的反模式 59
3.4 指令和过滤器 59
3.4.1 指令Directive是什么 60
3.4.2 自定义指令及使用 60
3.4.3 使用过滤器Filter 62
3.5 服务类组件 63
3.5.1 Provider服务组件详解 64
3.5.2 Factory服务组件详解 65
3.5.3 Service服务组件简介 66
3.5.4 服务类组件特性总结 67
3.6 一个简单的AngularJS项目：实时自选股行情页 67
3.7 小结 76
第4章 其他基础知识与Ionic项目结构 77
4.1 SASS 入门 77
4.1.1 变量与计算 78
4.1.2 样式嵌套 79
4.1.3 单行注释 // 81
4.1.4 继承@extend 82
4.1.5 混入@mixin与@include 83
4.1.6 颜色计算 85
4.1.7 引入文件@import 86
4.1.8 条件语句@if和@else 87
4.2 lodash（可选学） 87
4.2.1 使用场景 87
4.2.2 引入到项目 88
4.2.3 进一步学习指南 88
4.3 Gulp使用简介（可选学） 89
4.3.1 Gulp主文件gulpfile.js的执行原理 89
4.3.2 获取流函数src 90
4.3.3 写文件函数dest 91
4.3.4 监视文件变化函数watch 92
4.3.5 定义任务函数task 93
4.3.6 解析Ionic项目Gulp主文件 94
4.4 Ionic项目模板目录结构简介 95
4.4.1 常用工作目录 www 96
4.4.2 常用工作目录scss 96
4.4.3 常用工作目录 resources 97
4.4.4 重要文件package.json 97
4.4.5 重要文件config.xml 97
4.4.6 其他目录与文件简介 98
4.5 小结 98
第5章 Ionic内置CSS样式 99
5.1 栅格布局解析 100
5.1.1 基本行与列CSS类 101
5.1.2 指定列宽比例与自定义 102
5.1.3 指定列相对偏移比例 105
5.1.4 纵轴对齐方式 107
5.1.5 响应式栅格 109
5.1.6 示例：表情包图片库浏览页 111
5.2 固定标题栏 113
5.2.1 固定标题条 114
5.2.2 固定顶栏 114
5.2.3 固定底栏 115
5.3 按钮 116
5.3.1 普通按钮与配色结合 116
5.3.2 按钮尺寸、宽度样式 118
5.3.3 无填充色按钮与文本型按钮 119
5.3.4 图标按钮 120
5.3.5 标题栏按钮 121
5.3.6 按钮条 123
5.4 列表容器 124
5.4.1 分割条式列表项 125
5.4.2 列表项内图标 126
5.4.3 列表项内按钮 127
5.4.4 列表项内头像 128
5.4.5 列表项内缩略预览图 129
5.4.6 有边距的列表 130
5.5 展示卡 131
5.5.1 普通卡 132
5.5.2 增加标题栏装饰效果 133
5.5.3 卡列表 134
5.5.4 卡内图片 134
5.5.5 Facebook型展示卡 135
5.6 表单控件样式 137
5.6.1 输入字段名提示 137
5.6.2 输入控件图标 140
5.6.3 有边距的输入表单 141
5.6.4 输入控件单独设置边距 141
5.6.5 标题栏上放置文本输入控件 142
5.7 开关类组件 142
5.8 范围选择组件 144
5.9 选择框组件 145
5.10 选项卡栏 146
5.10.1 普通文本型选项卡 147
5.10.2 图标型选项卡 148
5.10.3 图标置顶或置左型选项卡 149
5.10.4 选项卡指示条 151
5.11 自定义主题颜色 152
5.12 可用图标集 154
5.13 内边距微调 155
5.14 小结 155
第6章 Ionic内置JS组件概述 156
6.1 Ionic内置JS组件 156
6.1.1 组件分类与前后缀说明 156
6.1.2 Ionic内置JS组件与CSS样式类集成 157
6.1.3 Ionic内置JS组件与AngularJS 集成 157
6.2 使用JS组件的常见问题解决办法 158
6.2.1 交互调试部署到Android设备上的Ionic应用 158
6.2.2 设备上显示白屏幕错误问题调试 159
6.2.3 使用Batarang进行性能分析 160
6.3 小结 161
第7章 Ionic内置布局类组件 162
7.1 固定标题栏 162
7.2 内容显示相关组件 164
7.2.1 内容展示容器 164
7.2.2 内容滚动容器 167
7.2.3 内容容器对象滚动服务 169
7.2.4 加载新内容滚动触发器 169
7.2.5 下拉刷新组件 171
7.3 小结 173
第8章 Ionic内置导航类组件 174
8.1 导航框架相关组件 175
8.1.1 导航视图容器与视图 175
8.1.2 定制顶部导航栏 179
8.1.3 浏览历史服务 182
8.2 选项卡相关组件 183
8.2.1 选项卡栏与选项卡 183
8.2.2 选项卡服务 188
8.3 侧栏菜单相关组件 189
8.3.1 侧栏菜单框架 189
8.3.2 侧栏菜单显示设置 194
8.3.3 侧栏菜单服务 194
8.4 导航应用综合实战：个人电子简历APP框架 195
8.5 小结 201
第9章 Ionic内置数据展示与操作组件 202
9.1 列表相关组件 202
9.1.1 列表容器与列表项定制 202
9.1.2 列表服务 205
9.1.3 列表高性能显示优化 206
9.2 表单输入相关组件 208
9.3 对话框类相关组件 209
9.3.1 模态框 209
9.3.2 浮动框 211
9.3.3 弹出框 213
9.3.4 上拉菜单 216
9.3.5 背景幕布 218
9.3.6 对话框类组件综合示例 218
9.4 加载中提示相关组件 226
9.4.1 加载中指示器 226
9.4.2 加载中指示服务 227
9.5 轮播组件 229
9.6 手势事件与服务组件 232
9.6.1 Ionic手势事件类型 232
9.6.2 手势事件 232
9.7 键盘组件 233
9.7.1 键盘插件 233
9.7.2 悬浮底栏指令 234
9.8 小结 234
□□0章 Ionic内置基础服务组件与设备平台客制化 235
10.1 平台服务组件 235
10.2 其他工具 237
10.2.1 应用基础配置 237
10.2.2 设备信息与基本操作 238
10.2.3 DOM信息与基本操作 240
10.2.4 DOM元素位置信息 240
10.2.5 事件管理 241
10.3 设备平台客制化 242
10.3.1 设备平台CSS样式类 242
10.3.2 使用AngularJS客制化平台风格示例 244
10.4 小结 246
□□1章 借助插件接近无限可能 247
11.1 Cordova插件 247
11.1.1 搜索可用的插件 247
11.1.2 插件管理（安装、删除、显示已装插件） 248
11.1.3 cordova-plugin-battery-status插件使用示例 249
11.1.4 cordova-plugin-whitelist插件说明 251
11.2 ngCordova插件集 253
11.2.1 安装ngCordova插件集 253
11.2.2 ngCordova插件使用步骤概要 254
11.2.3 插件$cordovaDevice使用示例 257
11.2.4 插件$cordovaToast使用示例 258
11.2.5 插件$cordovaContacts使用示例 259
11.2.6 插件$cordovaLocalNotification使用示例 260
11.2.7 插件$cordovaGeolocation使用示例 260
11.2.8 插件$cordovaVibration使用示例 262
11.2.9 插件$cordovaCamera使用示例 262
11.2.10 插件$cordovaSocialSharing使用示例 264
11.2.11 插件$cordovaNetwork使用示例 265
11.2.12 插件$cordovaSQLite使用示例 266
11.3 小结 267
□□2章 后端服务器模拟环境搭建准备 268
12.1 MongoDB安装与测试 268
12.2 Postman安装与使用示例 271
12.3 使用Express初始化创建API示例 274
12.4 使用Mongoose完善数据持久化示例 282
12.5 使用Passport加入用户验证示例 287
12.6 小结 296
□□3章 项目实战：逍遥游APP v0.1(UGC+B2C应用) 297
13.1 项目和代码说明 297
13.1.1 项目说明 297
13.1.2 随书代码运行说明 298
13.2 功能设计 298
13.2.1 界面与功能概述 300
13.2.2 服务端API接口概述 303
13.3 功能实现 303
13.3.1 准备工作：部署服务器端环境 304
13.3.2 初始化项目设置与目录结构 305
13.3.3 实现总体界面导航与路由 306
13.3.4 实现侧栏菜单功能集 312
13.3.5 实现旅友行踪功能集 321
13.3.6 实现我的足迹功能集 332
13.3.7 实现预约旅游产品功能集 351
13.3.8 实现设置功能集 363
13.3.9 定制启动屏与APP图标 371
13.4 小结与作业练习 371
□□4章 项目实战：销售掌中宝v0.1 （企业应用） 373
14.1 项目和代码说明 373
14.1.1 项目说明 374
14.1.2 随书代码运行说明 374
14.2 功能设计 375
14.2.1 界面与业务功能概述 375
14.2.2 服务端API接口概述 378
14.3 功能实现 379
14.3.1 准备工作：部署服务器端环境 379
14.3.2 初始化项目设置与目录结构 381
14.3.3 完成总体界面导航与路由 382
14.3.4 实现侧栏菜单与登录/退出功能 387
14.3.5 实现商机业务功能集 391
14.3.6 实现拜访业务功能集 404
14.3.7 实现客户业务功能集 420
14.3.8 实现订单业务功能集 434
14.3.9 实现报表显示与初步配置 446
14.4 小结与作业练习 455
□□5章 应用的生成与发布更新 456
15.1 生成发布Android平台的应用包 456
15.1.1 生成发布版的apk文件 456
15.1.2 生成用于签名的私钥 457
15.1.3 对apk文件签名 457
15.1.4 优化apk文件并改名 458
15.1.5 发布Android应用 459
15.2 生成发布iOS平台的应用 459
15.2.1 使用开发者账户连接Xcode 460
15.2.2 签名 460
15.2.3 设置应用的标识名 461
15.2.4 开始应用上架登记 462
15.2.5 尝试编译生成正式发布版的应用 465
15.2.6 使用Xcode打包APP应用 465
15.2.7 创建应用的发布档 466
15.2.8 完成应用上架登记 467
15.3 更新应用 470
15.4 小结 471
内页插图
精彩书摘
第 4 章
其他基础知识与Ionic项目结构
本书第3章介绍的AngularJS技术是一个结构复杂庞大、组件配合紧密的框架，熟练掌握了AngularJS就已经基本上跨过了Ionic开发的门槛。不过除了提供AngularJS功能组件外，Ionic还为前端组件定制了美观的样式，并使用业内流行的前端工具整合了自动化的项目开发工具链。
因此在全面介绍Ionic的组件和开发前，安排了本章介绍掌握Ionic开发需要了解的SASS样式开发和构建工具Gulp。*后将Ionic项目的整体目录文件结构做一个说明，这样读者未来在需要开发或是阅读调试代码时，就知道该到什么位置去查看了，而不是漫无目的地凭直觉瞎找。
本章的主要知识点包括：
? SASS基础知识
? lodash库简单说明
? Gulp原理与常用模块介绍
? Ionic项目模板目录结构解析
4.1 SASS 入门
SASS是一种对CSS进行了扩充的开发工具，它提供了许多便利的写法，使得CSS的开发变得简单和可维护，大大节省了样式设计者尤其是有编程背景的样式设计者的时间。符合SASS语法的文件就是普通的文本文件，里面可以直接使用CSS语法。SASS文件后缀名是.scss，意思为Sassy CSS。因此有时候SASS和SCSS两个词是可以混用的。
Ionic提供的样式文件就是基于SASS开发的。考虑到部分读者从未接触过SASS，本书将重点介绍Ionic涉及的SASS语法，并不打算变成一个完整的SASS说明文档。有通读需要的读者可以到SASS的官方网站学习SASS的更多特性和样例：http://sass-lang.com/documentation/file.SASS_REFERENCE.html。
编写完成的SASS文件需要经过编译处理转换成浏览器可以识别的CSS代码，在Ionic里有本章4.3节介绍的Gulp调用相关模块完成编译。在开发者日常编写调试时，可以使用一个在线SASS服务网站（http://www.sassmeister.com/）的即时编译转换功能获得CSS代码，如图4.1所示。
图4.1 使用在线网站（http://www.sassmeister.com/）的即时编译转换功能获得CSS代码
4.1.1 变量与计算
SASS允许定义变量，变量需要冠以$前缀，如：
$period : 1s;
$effect : ease-in;
$trans_property : all;
a {
-moz-transition: $trans_property $period $effect;
-webkit-transition: $trans_property $period $effect;
-o-transition: $trans_property $period $effect;
transition: $trans_property $period $effect;
}
经转换后的CSS代码为：
a {
-moz-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
【代码解析】从代码上看似乎使用SASS变量的源代码更长，但是有了变量遇到以后的调整变化时，就只需要在变量定义的地方变更值，而不用通过全文搜索去替换。相信有过网站维护经验的读者能够体会SASS变量的好处。这也是Ionic在定义CSS样式类使用的*常见模式。
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中，如：
$side : left;
$default_radius : 5px;
.rounded {
border-#{$side}-radius: $default_radius;
}
经转换后的CSS代码为：
.rounded {
border-left-radius: 5px;
}
【代码解析】这种字符串替换经常被使用在组合型的CSS属性名上。
SASS允许在代码中使用计算表达式，如：
$var : 2;
$more_px : 10px;
body {
margin: (16px/2);
□□□: □00px + 5 * $more_px;
right: $var * 10%;
}
经转换后的CSS代码为：
body {
margin: 8px;
□□□: □50px;
right: 20%;
}
【代码解析】变量也可以出现在计算表达式中，这样就更灵活了。
4.1.2 样式嵌套
标准的CSS只能支持单层的选择器{}块结构，对于习惯了开发的人来说无疑是值得改进的一个地方。而经SASS扩展，可以允许无限层的选择器嵌套，如：
$default_font_size: 100%;
.container {
h1 {
color:red;
font-size: $default_font_size * 2;
}
h2 {
color:blue;
font-size: $default_font_size * 1.5;
}
}
经转换后的CSS代码为：
.container h1 {
color: red;
font-size: 200%;
}
.container h2 {
color: blue;
font-size: 150%;
}
【代码解析】从代码可以看到，生成后的CSS代码是松散的平面结构，而SASS的代码明显更有逻辑性。
CSS属性名也可以嵌套生成，如：
div.container {
border: {
color: green;
}
border-left: {
color: red;
}
}
经转换后的CSS代码为：
div.container {
border-color: green;
border-left-color: red;
}
【代码解析】从代码可以看到，在border和border-left后分别加上冒号后，生成的CSS会使用-号来连接生成*终的属性名。
在嵌套的代码块内，可以使用&占位符表示引用父元素。如：
a {
&:link { color: blue; }
&:visited { color: green; }
&:active { color: blue; }
&:hover {
color: red;
font-weight: bold;
}
}
经转换后的CSS代码为：
a:link {
color: blue;
}
a:visited {
color: green;
}
a:active {
color: blue;
}
a:hover {
color: red;
font-weight: bold;
}
【代码解析】从本示例代码的里可以看出使用SASS的深层嵌套在属性较多时有可能可以减少编写的代码量，代码结构也更具有可读性。
4.1.3 单行注释 //
SASS是CSS的超集，因此标准的CSS注释 /* comment */ ，会保留到编译后生成的文件。而为了方便开发人员的调试，SASS支持了类似的单行注释符//，如：
/*
这是单行注释，将被保留
*/
p{
color: red; // 单行注释示例
font-size: 10px; /* CSS原生注释风格示例 */
}
经转换后的CSS代码为：
/*
这是单行注释，将被保留
*/
p {
color: red;
font-size: 10px;
/* CSS原生注释风格示例 */
}
【代码解析】*终在生成的CSS代码里，标准的CSS注释被保留，单行注释符//被忽略省去，出于保护目的不愿把内部注释发布到网上的开发者也可以考虑使用这个方法。
4.1.4 继承@extend
SASS允许一个选择器继承另一个选择器，如：
.classParent1{
border: 1px solid #ddd;
}
.classParent2{
color: red;
text-align: center;
}
.classChild {
@extend .classParent1;
@extend .classParent2;
font-size:120%;
}
p {
@extend .classParent1;
@extend .classParent2;
font-size:120%;
}
经转换后的CSS代码为：
.classParent1, .classChild, p {
border: 1px solid #ddd;
}
.classParent2, .classChild, p {
color: red;
text-align: center;
}
.classChild {
font-size: 120%;
}
p {
font-size: 120%;
}
【代码解析】这里可以看到SASS跟CSS代码相比的好处是既通过@extend继承了父CSS类的样式属性，又把相关的声明都放在子CSS类或子元素声明里，这样的代码结构可阅读可维护性明显更佳。
此处的通过@extend只能继承CSS类，即父类只能是CSS类，而不能是元素。
4.1.5 混入@mixin与@include
*早的SASS是用Ruby开发的，因此该语言的作者引入了一些类似Ruby的语言结构，其中就有用于实现多重继承的混入（Mixin）。混入有点像C语言的宏，是可以定义以后在被引入的地方展开而达到重用的代码块。
首先需要使用@mixin命令，定义一个代码块，随后再使用@include命令，调用这个混入代码块使之原地展开，如：
$border-width : 1px;
@mixin left-setting {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: $border-width;
}
div {
@include left-setting;
}
经转换后的CSS代码为：
div {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: 1px;
}
【代码解析】如代码所示，混入定义本身并不生成CSS代码，它类似于静态库被嵌入，当一个元素或者CSS类引入了多个混入代码块，则就相当于实现了多重继承的概念了。
此处变量$border-width的定义位置需要在名为left-setting的混入之前，否则将无法获取该变量的值。这种要求是SASS编译器本身的限制导致的。
混入还可以指定参数和默认值，既像C语言的宏又强于它，如：
@mixin left-setting($border-width: 3px) {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: $border-width;
}
div {
@include left-setting;
}
div.special{
@include left-setting(5px);
}
经转换后的CSS代码为：
div {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: 3px;
……
其他基础知识与Ionic项目结构
本书第3章介绍的AngularJS技术是一个结构复杂庞大、组件配合紧密的框架，熟练掌握了AngularJS就已经基本上跨过了Ionic开发的门槛。不过除了提供AngularJS功能组件外，Ionic还为前端组件定制了美观的样式，并使用业内流行的前端工具整合了自动化的项目开发工具链。
因此在全面介绍Ionic的组件和开发前，安排了本章介绍掌握Ionic开发需要了解的SASS样式开发和构建工具Gulp。*后将Ionic项目的整体目录文件结构做一个说明，这样读者未来在需要开发或是阅读调试代码时，就知道该到什么位置去查看了，而不是漫无目的地凭直觉瞎找。
本章的主要知识点包括：
? SASS基础知识
? lodash库简单说明
? Gulp原理与常用模块介绍
? Ionic项目模板目录结构解析
4.1 SASS 入门
SASS是一种对CSS进行了扩充的开发工具，它提供了许多便利的写法，使得CSS的开发变得简单和可维护，大大节省了样式设计者尤其是有编程背景的样式设计者的时间。符合SASS语法的文件就是普通的文本文件，里面可以直接使用CSS语法。SASS文件后缀名是.scss，意思为Sassy CSS。因此有时候SASS和SCSS两个词是可以混用的。
Ionic提供的样式文件就是基于SASS开发的。考虑到部分读者从未接触过SASS，本书将重点介绍Ionic涉及的SASS语法，并不打算变成一个完整的SASS说明文档。有通读需要的读者可以到SASS的官方网站学习SASS的更多特性和样例：http://sass-lang.com/documentation/file.SASS_REFERENCE.html。
编写完成的SASS文件需要经过编译处理转换成浏览器可以识别的CSS代码，在Ionic里有本章4.3节介绍的Gulp调用相关模块完成编译。在开发者日常编写调试时，可以使用一个在线SASS服务网站（http://www.sassmeister.com/）的即时编译转换功能获得CSS代码，如图4.1所示。
图4.1 使用在线网站（http://www.sassmeister.com/）的即时编译转换功能获得CSS代码
4.1.1 变量与计算
SASS允许定义变量，变量需要冠以$前缀，如：
$period : 1s;
$effect : ease-in;
$trans_property : all;
a {
-moz-transition: $trans_property $period $effect;
-webkit-transition: $trans_property $period $effect;
-o-transition: $trans_property $period $effect;
transition: $trans_property $period $effect;
}
经转换后的CSS代码为：
a {
-moz-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
【代码解析】从代码上看似乎使用SASS变量的源代码更长，但是有了变量遇到以后的调整变化时，就只需要在变量定义的地方变更值，而不用通过全文搜索去替换。相信有过网站维护经验的读者能够体会SASS变量的好处。这也是Ionic在定义CSS样式类使用的*常见模式。
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中，如：
$side : left;
$default_radius : 5px;
.rounded {
border-#{$side}-radius: $default_radius;
}
经转换后的CSS代码为：
.rounded {
border-left-radius: 5px;
}
【代码解析】这种字符串替换经常被使用在组合型的CSS属性名上。
SASS允许在代码中使用计算表达式，如：
$var : 2;
$more_px : 10px;
body {
margin: (16px/2);
□□□: □00px + 5 * $more_px;
right: $var * 10%;
}
经转换后的CSS代码为：
body {
margin: 8px;
□□□: □50px;
right: 20%;
}
【代码解析】变量也可以出现在计算表达式中，这样就更灵活了。
4.1.2 样式嵌套
标准的CSS只能支持单层的选择器{}块结构，对于习惯了开发的人来说无疑是值得改进的一个地方。而经SASS扩展，可以允许无限层的选择器嵌套，如：
$default_font_size: 100%;
.container {
h1 {
color:red;
font-size: $default_font_size * 2;
}
h2 {
color:blue;
font-size: $default_font_size * 1.5;
}
}
经转换后的CSS代码为：
.container h1 {
color: red;
font-size: 200%;
}
.container h2 {
color: blue;
font-size: 150%;
}
【代码解析】从代码可以看到，生成后的CSS代码是松散的平面结构，而SASS的代码明显更有逻辑性。
CSS属性名也可以嵌套生成，如：
div.container {
border: {
color: green;
}
border-left: {
color: red;
}
}
经转换后的CSS代码为：
div.container {
border-color: green;
border-left-color: red;
}
【代码解析】从代码可以看到，在border和border-left后分别加上冒号后，生成的CSS会使用-号来连接生成*终的属性名。
在嵌套的代码块内，可以使用&占位符表示引用父元素。如：
a {
&:link { color: blue; }
&:visited { color: green; }
&:active { color: blue; }
&:hover {
color: red;
font-weight: bold;
}
}
经转换后的CSS代码为：
a:link {
color: blue;
}
a:visited {
color: green;
}
a:active {
color: blue;
}
a:hover {
color: red;
font-weight: bold;
}
【代码解析】从本示例代码的里可以看出使用SASS的深层嵌套在属性较多时有可能可以减少编写的代码量，代码结构也更具有可读性。
4.1.3 单行注释 //
SASS是CSS的超集，因此标准的CSS注释 /* comment */ ，会保留到编译后生成的文件。而为了方便开发人员的调试，SASS支持了类似的单行注释符//，如：
/*
这是单行注释，将被保留
*/
p{
color: red; // 单行注释示例
font-size: 10px; /* CSS原生注释风格示例 */
}
经转换后的CSS代码为：
/*
这是单行注释，将被保留
*/
p {
color: red;
font-size: 10px;
/* CSS原生注释风格示例 */
}
【代码解析】*终在生成的CSS代码里，标准的CSS注释被保留，单行注释符//被忽略省去，出于保护目的不愿把内部注释发布到网上的开发者也可以考虑使用这个方法。
4.1.4 继承@extend
SASS允许一个选择器继承另一个选择器，如：
.classParent1{
border: 1px solid #ddd;
}
.classParent2{
color: red;
text-align: center;
}
.classChild {
@extend .classParent1;
@extend .classParent2;
font-size:120%;
}
p {
@extend .classParent1;
@extend .classParent2;
font-size:120%;
}
经转换后的CSS代码为：
.classParent1, .classChild, p {
border: 1px solid #ddd;
}
.classParent2, .classChild, p {
color: red;
text-align: center;
}
.classChild {
font-size: 120%;
}
p {
font-size: 120%;
}
【代码解析】这里可以看到SASS跟CSS代码相比的好处是既通过@extend继承了父CSS类的样式属性，又把相关的声明都放在子CSS类或子元素声明里，这样的代码结构可阅读可维护性明显更佳。
此处的通过@extend只能继承CSS类，即父类只能是CSS类，而不能是元素。
4.1.5 混入@mixin与@include
*早的SASS是用Ruby开发的，因此该语言的作者引入了一些类似Ruby的语言结构，其中就有用于实现多重继承的混入（Mixin）。混入有点像C语言的宏，是可以定义以后在被引入的地方展开而达到重用的代码块。
首先需要使用@mixin命令，定义一个代码块，随后再使用@include命令，调用这个混入代码块使之原地展开，如：
$border-width : 1px;
@mixin left-setting {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: $border-width;
}
div {
@include left-setting;
}
经转换后的CSS代码为：
div {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: 1px;
}
【代码解析】如代码所示，混入定义本身并不生成CSS代码，它类似于静态库被嵌入，当一个元素或者CSS类引入了多个混入代码块，则就相当于实现了多重继承的概念了。
此处变量$border-width的定义位置需要在名为left-setting的混入之前，否则将无法获取该变量的值。这种要求是SASS编译器本身的限制导致的。
混入还可以指定参数和默认值，既像C语言的宏又强于它，如：
@mixin left-setting($border-width: 3px) {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: $border-width;
}
div {
@include left-setting;
}
div.special{
@include left-setting(5px);
}
经转换后的CSS代码为：
div {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: 3px;
……
作者简介
秦超，毕业于华东理工大学。从事IT行业20年，互联网技术的项目开发10年。近年曾参与传统企业应用与移动APP的结合和互联网金融等多个项目的开发工作。