构建移动网站与APP：ionic移动开发入门与实战

构建移动网站与APP：ionic移动开发入门与实战
作者：秦超 著
出版时间： 2017年版
内容简介
　　Ionic是目前集流行与成熟两个特点于一身的跨平台移动开发框架。本书以实例驱动讲解的方式，让仅有简单网页制作基础知识的读者，也能轻松掌握Ionic下的移动应用开发。本书分为5篇，第1篇是移动开发准备篇，介绍了Ionic、Phonegap、Cordova、HTML5和移动开发的一些基础知识；第2篇是Ionic基础知识准备与常用库篇，介绍了配置开发Ionic环境所依赖的AngularJS、SASS、Gulp、lodash等业内主流库和工具；第3篇是Ionic组件完全解析篇，对Ionic内置的CSS样式类和JavaScript组件类进行完整解析；第4篇是APP项目实战篇，介绍了如何按照业内通行实践的策划、设计、开发过程完成2个使用Ionic开发的完整APP。第5篇是发布和推广应用篇，介绍了在开发完成之后，如何为Android和iOS两大移动平台发布和推广更新自己的APP。本书内容详尽、实例丰富，是广大HTML 5爱好者、移动互联网创业者、移动开发人员必备的参考书，同时也非常适合大中专院校师生学习阅读，也可作为高等院校计算机及相关专业教材。
目录
第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/JavaScript 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为JavaScript实现了模块化 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模块与JavaScript文件 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 [email protected] 82
4.1.5 [email protected]@include 83
4.1.6 颜色计算 85
4.1.7 [email protected] 86
4.1.8 [email protected]@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
第10章 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
第11章 借助插件接近无限可能 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
第12章 后端服务器模拟环境搭建准备 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
第13章 项目实战：逍遥游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
第14章 项目实战：销售掌中宝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
第15章 应用的生成与发布更新 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