Web前端技术丛书IONIC 移动开发入门与实战(第2版)

目 录 **篇 移动开发准备 第1章 欢迎进入移动开发的世界 3 1.1 移动互联网行业的浪潮 3 1.2 跨平台移动开发框架 4 1.2.1 什么是跨平台移动开发框架 4 1.2.2 为什么选择跨平台移动开发框架 5 1.2.3 可选的跨平台移动开发框架简介 6 1.2.4 什么是PhoneGap / Cordova / Ionic 9 1.3 初识Ionic v3.x 10 1.3.1 为什么选择Ionic 10 1.3.2 基于Web技术HTML 5/CSS 3/JavaScript 11 1.3.3 基于Angular框架 12 1.3.4 接近原生App应用的绚丽界面组件 13 1.3.5 自适应（Responsive）布局 14 1.3.6 支持个（任）性定制 14 1.3.7 Ionic的缺点 14 1.3.8 Ionic的商业案例 15 1.3.9 Ionic的开源案例 17 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 25 2.1.5 安装设置Chrome浏览器（推荐） 27 2.1.6 Hello Ionic项目 29 2.1.7 使用浏览器验证开发环境自动重载特性 30 2.2 Windows下安装Android开发平台 31 2.2.1 安装Android开发环境 31 2.2.2 为测试项目增加Android平台支持 36 2.2.3 连接Android实体机设备测试App 36 2.2.4 不使用Android模拟器的说明 37 2.3 Mac OS下安装iOS与Android开发平台 37 2.3.1 安装Xcode 38 2.3.2 为测试项目增加iOS平台支持 38 2.3.3 连接iOS模拟器测试App 38 2.3.4 低成本连接iOS实体机设备测试App 39 2.3.5 安装Android开发环境 40 2.3.6 为测试项目增加Android平台支持 45 2.3.7 连接Android实体机设备测试App 45 2.4 安装开发工具Visual Studio Code（推荐） 46 2.4.1 安装开发工具Visual Studio Code 46 2.4.2 安装Ionic辅助编码插件 47 2.5 小结 48 第二篇 Ionic基础知识准备与常用库 第3章 Angular入门初步 51 3.1 AngularCLI安装与使用 51 3.1.1 AngularCLI的安装 52 3.1.2 使用AngularCLI创建项目 52 3.1.3 使用AngularCLI启动开发服务器 53 3.2 Angular整体结构概述 54 3.2.1 Angular与TypeScript 54 3.2.2 Angular实现了M.V.VM模式 55 3.2.3 Angular实现了模块化 55 3.2.4 Angular实现了声明式界面 56 3.2.5 Angular实现了双向数据绑定 56 3.3 模块与依赖注入 57 3.3.1 根模块 57 3.3.2 使用模块与组件依赖注入 58 3.4 组件与模板 59 3.4.1 Angular中的组件 59 3.4.2 Angular中的模板和元数据 59 3.5 指令与服务 60 3.5.1 指令是什么 60 3.5.2 指令的使用 61 3.6 服务类组件 63 3.7 一个简单的Angular项目：实时自选股行情页 64 3.8 小结 70 第4章 其他基础知识与Ionic项目结构 71 4.1 SASS 入门 71 4.1.1 变量与计算 72 4.1.2 样式嵌套 73 4.1.3 单行注释 // 75 4.1.4 继承@extend 76 4.1.5 混入@mixin与@include 77 4.1.6 颜色计算 79 4.1.7 引入文件@import 80 4.1.8 条件语句@if和@else 81 4.2 lodash（可选学） 81 4.2.1 使用场景 82 4.2.2 引入到项目 82 4.2.3 进一步学习指南 82 4.3 Gulp使用简介（可选学） 83 4.3.1 Gulp主文件gulpfile.js的执行原理 83 4.3.2 获取流函数src 84 4.3.3 写文件函数dest 85 4.3.4 监视文件变化函数watch 86 4.3.5 定义任务函数task 87 4.3.6 解析Ionic项目Gulp主文件 88 4.4 Ionic项目模板目录结构简介 89 4.4.1 常用工作目录src 90 4.4.2 常用工作目录scss 91 4.4.3 常用工作目录 resources 91 4.4.4 重要文件package.json 91 4.4.5 重要文件config.xml 91 4.4.6 其他目录与文件简介 92 4.5 小结 92 第三篇 Ionic组件完全解析 第5章 Ionic常用内置组件 95 5.1 选项卡栏 95 5.2 导航栏 99 5.2.1 单层标题导航栏 99 5.2.2 多层标题导航栏 100 5.2.3 导航栏的页面跳转 101 5.3 按钮 105 5.3.1 按钮颜色设置 105 5.3.2 按钮尺寸与形状 106 5.3.3 无填充色按钮 107 5.3.4 图标按钮 108 5.3.5 标题栏按钮 110 5.4 列表容器 112 5.4.1 列表头、普通列表和箭头列表 115 5.4.2 图标列表 116 5.4.3 图片列表 116 5.4.4 侧滑列表 116 5.5 展示卡 117 5.5.1 普通卡片 118 5.5.2 列表卡片 119 5.5.3 社交类卡片 119 5.6 输入框 121 5.6.1 普通输入框 122 5.6.2 带图标输入框 122 5.6.3 有边距的输入框 123 5.6.4 其他输入框效果 123 5.6.5 导航栏放置输入框 124 5.7 开关类组件 125 5.8 范围选择组件 127 5.9 选择框组件 128 5.10 自定义主题颜色 130 5.11 可用图标集 130 5.12 小结 131 第6章 Ionic内置TypeScript组件概述 132 6.1 Ionic内置TypeScript组件 132 6.1.1 组件分类与前后缀说明 132 6.1.2 使用Ionic内置服务组件 133 6.1.3 Ionic内置TypeScript组件与Angular 集成 134 6.2 使用TypeScript组件的常见问题解决办法 134 6.2.1 交互调试部署到Android设备上的Ionic应用 134 6.2.2 设备上显示白屏幕错误问题调试 135 6.2.3 交互调试部署到iOS设备上的Ionic应用 136 6.3 小结 137 第7章 Ionic内置布局类组件 138 7.1 内容显示相关组件 140 7.1.1 内容展示容器 141 7.1.2 内容滚动容器 143 7.2 内容刷新相关组件 144 7.2.1 加载新内容滚动触发器 144 7.2.2 下拉刷新组件 146 7.3 小结 149 第8章 Ionic内置导航类组件 150 8.1 导航框架相关组件 151 8.1.1 生命周期钩子 151 8.1.2 页面跳转 153 8.1.3 页面间传值 157 8.2 选项卡相关组件 163 8.2.1 ion-tabs指令组件 163 8.2.2 ion-tab指令组件 163 8.3 侧栏菜单相关组件 165 8.4 导航应用综合实战：个人电子简历App框架 169 8.5 小结 177 第9章 Ionic内置数据展示与操作组件 178 9.1 对话框类相关组件 178 9.1.1 浮动框 178 9.1.2 弹出框 182 9.1.3 上拉菜单 186 9.2 加载中提示相关组件 188 9.2.1 加载中指示器 189 9.2.2 加载中指示服务 190 9.3 轮播组件 192 9.4 键盘组件 195 9.5 抽签应用练习 196 9.6 小结 209 第10章 Ionic内置基础服务组件与设备平台客制化 210 10.1 平台服务组件介绍 210 10.2 平台服务组件使用 212 10.2.1 获取设备相关信息 212 10.2.2 处理Android硬件返回键 213 10.3 设备平台客制化 216 10.3.1 重写SCSS样式类 216 10.3.2 使用Angular客制化平台风格示例 217 10.4 小结 219 第11章 借助插件接近无限可能 220 11.1 Cordova插件 220 11.1.1 搜索可用的插件 220 11.1.2 插件管理（安装、删除、显示已装插件） 221 11.1.3 cordova-plugin-battery-status插件使用示例 223 11.1.4 cordova-plugin-telerik-imagepicker插件说明 225 11.2 Ionic Native插件使用 226 11.2.1 安装Ionic Native插件 226 11.2.2 Ionic Native插件使用步骤概要 227 11.2.3 插件Device使用示例 229 11.2.4 插件Toast使用示例 230 11.2.5 插件ActionSheet使用示例 231 11.2.6 插件AppVersion使用示例 232 11.2.7 插件Vibration使用示例 233 11.2.8 插件SocialSharing使用示例 233 11.2.9 插件Network使用示例 234 11.2.10 插件NativeStorage使用示例 235 11.2.11 插件Keyboard使用示例 236 11.2.12 插件TouchID使用示例 237 11.3 小结 238 第12章 后端服务器模拟环境搭建准备 239 12.1 MongoDB安装与测试 240 12.2 Postman安装与使用示例 243 12.3 使用Express初始化创建API示例 245 12.4 使用Mongoose完善数据持久化示例 253 12.5 使用Passport加入用户验证示例 258 12.6 小结 268 第四篇 App项目实战和发布推广 第13章 项目实战：逍遥游App v0.1(UGC B2C应用) 271 13.1 项目和代码说明 271 13.1.1 项目说明 271 13.1.2 随书代码运行说明 272 13.2 功能设计 273 13.2.1 界面与功能概述 274 13.2.2 服务端API接口概述 277 13.3 功能实现 277 13.3.1 准备工作：部署服务器端环境 277 13.3.2 初始化项目设置与目录结构 279 13.3.3 实现总体界面导航与路由 281 13.3.4 实现侧栏菜单功能集 293 13.3.5 实现旅友行踪功能集 302 13.3.6 实现我的足迹功能集 316 13.3.7 实现预约旅游产品功能集 337 13.3.8 实现设置功能集 356 13.3.9 定制启动屏与App图标 365 13.4 小结与作业练习 365 第14章 应用的生成与发布更新 367 14.1 生成发布Android平台的应用包 367 14.1.1 生成发布版的apk文件 367 14.1.2 生成用于签名的私钥 368 14.1.3 对apk文件签名 368 14.1.4 优化apk文件并改名 369 14.1.5 发布Android应用 370 14.2 生成发布iOS平台的应用 370 14.2.1 使用开发者账户连接Xcode 371 14.2.2 签名 371 14.2.3 设置应用的标识名 372 14.2.4 开始应用上架登记 373 14.2.5 尝试编译生成正式发布版的应用 376 14.2.6 使用Xcode打包App应用 376 14.2.7 创建应用的发布档 377 14.2.8 完成应用上架登记 378 14.3 更新应用 381 14.4 小结 382