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

构建移动网站与APP : ionic移动开发入门与实战 pdf epub mobi txt 电子书 下载 2025

秦超 著
图书标签:
  • Ionic
  • 移动开发
  • APP开发
  • 移动网站
  • 前端开发
  • HTML5
  • JavaScript
  • CSS3
  • 混合开发
  • Angular
想要找书就要到 静流书站
立刻按 ctrl+D收藏本页
你会得到大惊喜!!
出版社: 清华大学出版社
ISBN:9787302462019
版次:1
商品编码:12149372
包装:平装
开本:16开
出版时间:2017-03-01
用纸:胶版纸
页数:471
字数:780000
正文语种:中文

具体描述

产品特色

编辑推荐

对于只有一些网页开发基础知识的读者来说,ionic目前也许是这个星球上*适合你的跨平台移动开发技术框架了。从新手入门学习便捷性、功能快速扩充迭代与重构支持、团队模块化分工协作支持、应用前台性能优化、跨平台支持、开源免费和社区生态成熟度各项指标来看,业界已基本公认ionic都在开发速度、插件功能、组件成熟度以及背后开发团队的专业性上达到了比较完美的平衡。相比其他跨平台方案,ionic优势明显,而且其背后的框架主力开发商有长远的升级路线图。本书以实例驱动讲解的方式,让移动开发零基础读者也能轻松掌握移动应用开发的技术,跟上目前的万众创新、全面移动化乃至工业4.0的热潮。

内容简介

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爱好者、移动互联网创业者、移动开发人员必备的参考书,同时也非常适合大中专院校师生学习阅读,也可作为高等院校计算机及相关专业教材。

作者简介

秦超,毕业于华东理工大学。从事IT行业20年,互联网技术的项目开发10年。近年曾参与传统企业应用与移动APP的结合和互联网金融等多个项目的开发工作。

内页插图

目录

第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

精彩书摘

第 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);
top: 100px + 5 * $more_px;
right: $var * 10%;
}
经转换后的CSS代码为:
body {
margin: 8px;
top: 150px;
right: 20%;
}
【代码解析】变量也可以出现在计算表达式中,这样就更灵活了。
4.1.2 样式嵌套
标准的CSS只能支持单层的选择器{}块结构,对于习惯了JavaScript开发的人来说无疑是值得改进的一个地方。而经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支持了类似JavaScript的单行注释符//,如:
/*
这是单行注释,将被保留
*/
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是一个开源免费、技术先进,并获得业内广泛认可的跨平台的移动开发框架。它是基于主流技术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章,主要章节规划如下。
*篇(第1~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样式类和JavaScript组件类进行完整解析,并通过丰富的代码与效果案例介绍其使用场景与定制途径。此外本篇也说明了常用的Cordova插件和安装使用方法,使APP应用能够使用手机硬件设备专有功能如照相、地理定位、震动,分享到其他社交应用等。
第四篇(第12~14章)APP项目前后端实战篇
本篇是关键的综合实战篇,详细介绍了如何依照业内通行的敏捷过程来进行设计、开发,从而完成2个使用Ionic开发的APP应用。除了综合使用了前文介绍的Ionic组件外,还详述了如何配置与测试后端服务的API、集成高德地图、百度ECharts图表等技术,这都是在实际的APP项目中常常会遇到的需求功能点。
第五篇(第15章)发布和推广更新APP应用
内容不多,却是一个APP走向市场和客户的*终一步。本篇讲述了将使用Ionic框架开发的跨平台应用为Android和iOS两大平台打包的完整过程。此外还介绍了发布和更新应用的方法,使读者能真正将开发的应用转化为经济效益。
本书面向的读者
? HTM 5入门者与HTML 5爱好者
? 移动互联网创业者
? 基于HTML 5的开发人员
? 各种平台下的移动开发人员
? 从其他开发语言转行做移动开发的人员
? 前端开发人员和前端设计人员
? Ionic入门学习者
? 大中专院校的学生
? 可作为各种移动应用培训学校的入门教程
代码下载
本书由秦超主笔,其他参与创作的人员还有宋士伟、张倩、周敏、魏星、邹瑛、王铁民、殷龙、李春城、张兴瑜、胡松涛、李柯泉、林龙、赵殿华、牛晓云。
编 者
2017年1月

书名:构建响应式Web应用:前端技术栈解析与实践 内容简介: 在数字化浪潮汹涌而来的今天,如何构建既能适应不同设备尺寸,又能提供流畅用户体验的Web应用,已成为前端开发的核心命题。本书将带领您深入探索构建现代响应式Web应用的方方面面,从基础概念到高级实践,全面解析驱动这一过程的关键技术栈。 第一部分:响应式设计的基石——HTML5与CSS3深度解析 本部分将回归Web应用开发的根本,深入剖析HTML5和CSS3这两个构成网页骨架与样式的核心技术。我们将不仅仅停留在语法层面,而是着重于如何利用它们构建灵活、可伸缩的布局。 HTML5:语义化与新特性 语义化HTML的重要性: 学习如何使用`header`, `nav`, `main`, `article`, `section`, `aside`, `footer`等语义化标签,不仅能提升网页的可访问性和SEO表现,更能使代码结构更清晰,易于维护。我们将通过实际案例演示,如何摆脱陈旧的`div`嵌套,拥抱更具表达力的HTML5结构。 多媒体与交互新元素: 深入讲解`audio`, `video`标签的灵活应用,以及`canvas`和`SVG`在动态图形和可视化方面的潜力。探讨`form`元素的增强,如新的输入类型(`email`, `number`, `date`等)和属性(`required`, `pattern`等),以及它们如何简化用户输入和前端验证。 Web Components初探: 介绍Web Components的概念,包括Custom Elements, Shadow DOM, HTML Imports(尽管部分已被弃用,但理解其思想有助于理解组件化),以及它们如何在不依赖框架的情况下实现组件化开发。 CSS3:响应式布局的魔法 Flexbox布局(弹性盒子模型): 详细讲解Flexbox的核心概念:容器(flex container)与项目(flex item),主轴(main axis)与交叉轴(cross axis),以及`justify-content`, `align-items`, `flex-grow`, `flex-shrink`, `flex-basis`等属性。通过丰富的实战示例,演示如何利用Flexbox轻松实现单行或多行布局的对齐、分布和伸缩,解决传统float布局的痛点。 CSS Grid布局: 深入理解CSS Grid的强大之处,包括定义网格容器、网格项、行(rows)和列(columns),以及`grid-template-rows`, `grid-template-columns`, `grid-gap`, `grid-area`等属性。本书将重点展示Grid如何在二维空间上创建复杂且灵活的页面布局,轻松实现响应式导航、卡片式布局、主内容区域与侧边栏的划分等,甚至可以实现“所见即所得”的布局方式。 媒体查询(Media Queries): 详细介绍媒体查询的语法和应用场景。讲解如何基于屏幕宽度、设备方向、分辨率等媒体特性,为不同设备尺寸应用不同的CSS样式,从而实现真正的响应式设计。我们将展示如何构建“Mobile First”或“Desktop First”的策略,以及如何使用断点(breakpoints)进行精细化控制。 响应式排版与图片: 探讨如何使用相对单位(`em`, `rem`, `%`, `vw`, `vh`)创建随屏幕尺寸缩放的字体大小和元素尺寸。讲解`max-width`, `object-fit`等属性如何优化图片在不同容器中的显示效果,以及``元素和`srcset`属性在提供响应式图片加载方案中的作用。 第二部分:现代前端框架与工具链——提升开发效率与应用性能 掌握了基础的HTML5和CSS3,我们还需要强大的前端框架和高效的工具链来构建复杂、可维护且性能卓越的Web应用。本部分将聚焦于当前主流的前端技术生态。 JavaScript的进化与现代实践 ES6+新特性: 深入解析`let`与`const`、箭头函数(arrow functions)、模板字符串(template literals)、解构赋值(destructuring assignment)、类(classes)、模块(modules)、Promise、async/await等ES6+带来的重要特性,以及它们如何使JavaScript代码更简洁、更易读、更强大。 异步编程模型: 详细阐述JavaScript的事件循环(event loop)机制,以及如何利用Promise和async/await优雅地处理异步操作,避免回调地狱,提升代码的可读性和可维护性。 面向对象与函数式编程范式: 探讨在JavaScript中应用面向对象编程(OOP)和函数式编程(FP)思想,理解类、继承、封装,以及纯函数、高阶函数、不可变性等概念,并说明它们如何帮助我们构建更健壮、更可测试的代码。 主流前端框架(以React为例,但不局限于此) 组件化思想: 详细讲解组件化开发的核心理念,即如何将UI拆分成独立、可复用的组件。通过实例演示,理解组件的生命周期、props(属性)和state(状态),以及它们如何实现数据的流动和组件间的通信。 虚拟DOM(Virtual DOM)与Diff算法: 解释虚拟DOM的概念,以及框架如何通过比对虚拟DOM树来高效地更新真实DOM,从而提升应用的渲染性能。 状态管理: 探讨单向数据流的概念,以及在复杂应用中如何有效地管理组件状态。本书将介绍一些常用的状态管理模式(如Context API,以及可选的Redux/Vuex等框架的原理介绍),并讲解如何将状态提升、事件处理等与组件协同工作。 路由管理: 介绍在单页面应用(SPA)中如何实现客户端路由,使URL变化与页面内容渲染同步,提供类似原生应用的导航体验。 Hooks API(针对React): 深入讲解React Hooks(如`useState`, `useEffect`, `useContext`等)如何使函数组件拥有状态和生命周期方法,以及如何进行自定义Hooks的编写,进一步提升组件的复用性和代码组织。 构建工具与包管理器 Webpack/Vite深入解析: 详细介绍现代前端构建工具(如Webpack或Vite)的核心概念:模块打包、代码分割、热模块替换(HMR)、代码压缩、资源优化等。讲解如何配置构建工具以满足项目需求,提高开发效率和应用性能。 包管理器(npm/Yarn/pnpm): 介绍npm、Yarn、pnpm等包管理器的使用,如何安装、管理项目依赖,以及理解`package.json`和`package-lock.json`的作用。 Linting与Formatting(ESLint/Prettier): 强调代码规范的重要性,讲解ESLint和Prettier如何帮助我们统一代码风格、检测潜在错误,保持代码库的一致性和可读性。 第三部分:构建高性能与可访问的Web应用 除了功能的实现,高性能和良好的用户体验是衡量现代Web应用质量的重要标准。本部分将聚焦于这些关键方面。 性能优化策略 代码优化: 讲解如何通过代码分割(Code Splitting)、懒加载(Lazy Loading)等技术,减少初始加载的JavaScript体积,提升首屏加载速度。 资源优化: 探讨图片压缩、字体优化、HTTP/2和HTTP/3协议的优势,以及如何利用CDN(内容分发网络)加速资源加载。 缓存策略: 理解浏览器缓存(HTTP缓存、Service Workers)的作用,以及如何通过合理的缓存策略减少重复请求,提高应用响应速度。 性能监控与分析: 介绍使用浏览器开发者工具(Performance Tab)以及Lighthouse等工具进行性能分析,识别瓶颈并进行针对性优化。 Web可访问性(Accessibility, a11y) ARIA(Accessible Rich Internet Applications): 深入理解ARIA的角色(roles)、状态(states)和属性(properties),以及如何利用它们来增强非标准UI控件的可访问性,确保屏幕阅读器用户能够理解和操作复杂的Web界面。 语义化HTML与可访问性: 回顾并强调语义化HTML在可访问性中的关键作用,以及如何使用`alt`属性、`title`属性、`aria-label`等提供足够的信息。 键盘导航: 讲解如何确保所有交互元素都能通过键盘进行导航和操作,以及`tabindex`属性的正确使用。 颜色对比度与字体设计: 探讨高对比度色彩方案的重要性,以及如何选择易于阅读的字体和字号,满足不同用户的视觉需求。 可访问性测试工具: 介绍使用Wave、AXE等工具进行可访问性扫描,识别并修复潜在的a11y问题。 渐进式Web应用(Progressive Web Apps, PWAs) Service Workers: 深入讲解Service Workers的工作原理,包括离线缓存、后台同步、推送通知等功能,以及如何利用它们为Web应用提供类似原生应用的体验。 Web App Manifest: 介绍`manifest.json`文件的作用,如何定义应用的图标、启动画面、显示模式等,使其能够添加到主屏幕,并以独立应用的形式启动。 离线支持与可靠性: 探讨如何设计Web应用以应对网络不稳定或离线环境,提升用户在各种网络条件下的使用体验。 第四部分:实战项目演练——从零开始构建响应式Web应用 理论结合实践是掌握技术最好的方式。本部分将通过一个或多个贯穿全书的实战项目,将前面所学的知识融会贯通。 项目需求分析与技术选型: 引导读者理解如何根据项目需求选择合适的技术栈和工具。 项目结构设计与组件化开发: 演示如何规划项目目录,设计可复用的UI组件。 响应式布局的实现: 在实际项目中应用Flexbox和Grid,创建适应不同屏幕的页面布局。 状态管理与路由配置: 在项目中实现复杂的UI交互和页面导航。 性能优化与可访问性改进: 在开发过程中和上线前对项目进行性能调优和可访问性检查。 构建与部署: 学习如何使用构建工具打包项目,并将其部署到服务器。 本书旨在为读者提供一个全面、深入且实用的前端开发指南。通过阅读本书,您将能够自信地构建出功能强大、体验流畅、性能卓越且易于维护的现代响应式Web应用,为您的技术生涯添砖加瓦。

用户评价

评分

作为一名有一定 Web 开发基础的开发者,我之前对 Ionic 的疑虑在于它能否真正做出媲美原生应用的用户体验。这本书彻底打消了我的顾虑。它在介绍 Ionic 的 UI 组件时,非常细致地讲解了这些组件是如何模仿原生控件的,以及在不同平台下的适配策略。书中还深入探讨了如何利用 Ionic 的主题定制功能,来打造独具特色的应用风格,甚至是如何通过一些 CSS 技巧,来实现更精细的界面交互。我尤其喜欢书中关于“动效设计”的部分,它详细介绍了如何利用 Ionic 的动画 API,为应用添加流畅自然的过渡效果,让用户在使用过程中感受到更佳的沉浸感。而且,书中还穿插了一些关于如何进行应用打包、部署以及上线审核的实用技巧,这对于想要将自己的作品推向市场的开发者来说,是不可或缺的宝贵信息。这本书让我看到了 Ionic 的潜力和可能性,它不仅能够帮助我快速构建出功能完善的应用,更能让我关注到用户体验的细节,提升应用的整体品质。

评分

这本书真是让我眼前一亮!之前一直想尝试移动开发,但 Ionic 这个名字听起来有点高深,总觉得门槛很高。拿到这本书,我迫不及待地翻开。开篇就用非常亲切的语言,将 Ionic 的核心理念和它的强大之处娓娓道来,一点都没有那种生硬的技术讲解。我特别喜欢它在介绍 Ionic 的起源和发展历程时,穿插的一些小故事和行业趋势分析,让我对 Ionic 的价值有了更深层次的理解。书中对 Angular 的基础知识也做了简要但清晰的梳理,对于我这个 Angular 新手来说,简直是雪中送炭,让我能够快速跟上 Ionic 的开发节奏。最让我惊喜的是,作者并没有一开始就抛出复杂的代码,而是从一个非常简单的“Hello World”应用开始,一步步引导读者构建功能,每个步骤都配有详细的截图和代码解释,让我感觉自己就像在跟着一位经验丰富的老师手把手教学一样。我甚至觉得,即便是完全没有编程基础的人,只要有耐心,也能在这本书的带领下,一步一步踏上 Ionic 开发的旅程。它真正做到了“入门”,并且让我感受到了“实战”的可能性。

评分

说实话,我在购买这本书之前,对“实战”这两个字并没有特别的概念,以为也就是多写几个Demo。但读完之后,我才明白这本书的“实战”是多么的深入和贴切。书中不仅仅是教你如何写代码,更重要的是在讲解过程中,融入了大量的项目开发的真实场景和最佳实践。例如,它在讲解如何实现用户认证和权限管理时,不仅提供了代码示例,还详细分析了不同认证方式的优劣,以及如何在服务器端和客户端进行安全地配合。在讲解数据持久化时,书中对比了多种本地存储方案,并给出了在实际应用中如何选择的建议。最让我感到意外的是,书中还涉及到了单元测试和端到端测试的编写方法,这对于保证代码质量和项目的可维护性至关重要,是很多入门书籍都会忽略的部分。这本书让我感觉,我不仅仅是在学习一个框架,更是在学习一种“开发思维”,一种能够让我独立完成一个高质量移动应用开发的“能力”。

评分

这本书真的让我对 Ionic 有了全新的认识,它不只是一个框架,更是一种高效的开发理念。书中在讲解 Ionic 的强大之处时,并没有回避它可能存在的性能挑战,反而非常有针对性地给出了优化策略。我非常喜欢它在“性能优化”章节的讲解,从前端的资源加载、代码分割,到后端的API设计,都给出了非常实用的建议。比如,书中提到的关于图片懒加载、代码压缩、以及使用Ionic CLI进行性能分析的方法,都让我受益匪浅。我还发现,书中对于如何利用 Ionic 的插件生态系统也非常有心得,详细介绍了如何选择和使用各种第三方插件,来扩展应用的功能,比如集成推送通知、广告SDK等等。这让我意识到,Ionic 的能力远不止于原生UI的模拟,它能够通过丰富的插件,轻松实现各种复杂的原生功能。而且,作者在讲解的过程中,总是能站在开发者的角度思考问题,预设读者可能会遇到的困难,并提前给出解决方案,这种“贴心”的指导,让我在学习过程中少走了很多弯路。

评分

我一直以来都对跨平台移动开发抱有浓厚的兴趣,尤其是那种能够用一套代码同时运行在 iOS 和 Android 上的技术。Ionic 作为一个基于 Web 技术的框架,自然引起了我的注意。这本书的内容安排非常巧妙,它并没有仅仅停留在理论层面,而是非常注重实操。从最基础的项目搭建、组件的使用,到更高级的路由管理、状态管理,再到如何调用原生设备功能(比如相机、地理位置),每一个环节都剖析得淋漓尽致。我尤其欣赏书中对于不同组件的讲解,不仅仅是罗列 API,更是通过实际的案例,展示了这些组件在真实应用中的用法和最佳实践。比如,在讲到表单处理时,书中提供了多种不同的表单验证方式,并且详细解释了每种方式的优缺点,让我能够根据实际需求选择最合适的方案。而且,书中对一些常见问题的解决方案也给出了详尽的指导,比如网络请求的错误处理、数据的本地存储等等,这些都是在实际开发中非常容易遇到的坑,能够提前了解并掌握解决方法,大大节省了日后的调试时间。

评分

好书!

评分

很不错

评分

很好,活动给力,价格划算。

评分

京东书大部分都是盗版,这个大家都知道吧,不过活动入手,不徒收藏的话也是可以的,一般很贵的专业书不会是盗版,还有千万不要买英文原版

评分

书的滞后性太大了,现在版本都3.x了,里面还是基于1.x的代码,老实说不值

评分

很实用

评分

没看懂

评分

正在学习 不错的知识

评分

书是精挑细选的,不错哦!这下该静下心来好好看看。

相关图书

本站所有内容均为互联网搜索引擎提供的公开搜索信息,本站不存储任何数据与内容,任何内容与数据均与本站无关,如有需要请联系相关搜索引擎包括但不限于百度google,bing,sogou

© 2025 book.coffeedeals.club All Rights Reserved. 静流书站 版权所有