构建移动网站与APP:ionic移动开发入门与实践

目 录 第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 继承@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 第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