新書推薦：
《
控制权视角下的家族企业管理与传承
》
售價：HK$
87.4
《
冯友兰和青年谈心系列
》
售價：HK$
167.3
《
利他主义的生意：偏爱“非理性”的市场（英国《金融时报》推荐读物！）
》
售價：HK$
77.3
《
认知行为疗法：心理咨询的顶层设计
》
售價：HK$
99.7
《
FANUC工业机器人装调与维修
》
售價：HK$
99.7
《
吕著中国通史
》
售價：HK$
62.7
《
爱琴海的光芒 ： 千年古希腊文明
》
售價：HK$
199.4
《
不被他人左右：基于阿德勒心理学的无压力工作法
》
售價：HK$
66.1
|
| 編輯推薦： |
|
对于只有一些网页开发基础知识的读者来说，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 5CSS 3JavaScript 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.1UGC 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
|
| 內容試閱：
|
前 言
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入门学习者? 大中专院校的学生? 可作为各种移动应用培训学校的入门教程代码下载本书配套的示例代码下载地址（注意数字和字母大小写）如下：http：pan.baidu.coms1pLyKlCn（密码：4nqh）如果下载有问题，请电子邮件联系booksaga@163.com，邮件主题为ionic代码。
本书由秦超主笔，其他参与创作的人员还有宋士伟、张倩、周敏、魏星、邹瑛、王铁民、殷龙、李春城、张兴瑜、胡松涛、李柯泉、林龙、赵殿华、牛晓云。
编 者2017年1月
第 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.comdocumentationfile.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： 16px2; 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 继承@extendSASS允许一个选择器继承另一个选择器，如：.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-setting5px;}经转换后的CSS代码为：div { float： left; margin-left： 10px; padding-left： 2px; border-left： 3px;}
div.special { float： left; margin-left： 10px; padding-left： 2px; border-left： 5px;}【代码解析】如代码所示，生成的第一个元素在引入时使用了默认参数值，而第二个在引入时使用了指定参数值。Ionic的SASS代码里大量使用了混入结构，其中就有一个文件，路径为\项目目录\www\lib\ionic\scss\_mixins.scss，文件内容为定义的所有的混入，以下为其中一小段代码片段： Single Corner Border Radius@mixin border-top-left-radius$radius { -webkit-border-top-left-radius： $radius; border-top-left-radius： $radius;}@mixin border-top-right-radius$radius { -webkit-border-top-right-radius： $radius; border-top-right-radius： $radius;}@mixin border-bottom-right-radius$radius { -webkit-border-bottom-right-radius： $radius; border-bottom-right-radius： $radius;}@mixin border-bottom-left-radius$radius { -webkit-border-bottom-left-radius： $radius; border-bottom-left-radius： $radius;}【代码解析】这样为针对两种不同的浏览器分别定义元素的四个角的圆角半径提供了简单的方式。4.1.6 颜色计算SASS提供了一些内置的颜色函数，以便通过种子颜色生成系列颜色，这样能够节省大量的自行计算和查找调色板的时间，常见的颜色函数与使用方式如下所示。$main_color： #336699;$second_color： #993266;#page1{ 提升亮度 color： lighten$main_color, 10%;}#page2{ 降低亮度 color： darken$main_color, 10%;}#page3{ 提升饱和度 color： saturate$main_color, 10%;}#page4{ 降低饱和度 color： desaturate$main_color, 10%;}#page5{ 调整色调 color： adjust-hue$main_color, 10%;}#page6{ 取灰度颜色 color： grayscale$main_color;}#page7{ 混合两种颜色 color： mix$main_color, $second_color;}经转换后的CSS代码为：#page1 { color： #4080bf;}
#page2 { color： #264d73;}
#page3 { color： #2966a3;}
#page4 { color： #3d668f;}
#page5 { color： #335599;}
#page6 { color： #666666;}
#page7 { color： #664c80;}【代码解析】在SASS代码里的相关位置已经对使用到的函数进行过了注释，这里不再重复说明。当需要对Ionic提供的默认颜色方案进行微调或是设计自己的APP应用的颜色方案时，读者可以考虑使用这些便捷函数。4.1.7 引入文件@import@import命令，用来插入外部SASS文件。Ionic代码库中路径为\项目目录\www\lib\ionic\scss\ionic.scss的文件的主要内容就是用于引入其他SASS模块文件，如：@import Ionicons引入图标 "ioniconsionicons.scss",
Variables引入变量 "mixins", "variables",
Base引入基础模块 "reset", "scaffolding", "type",【代码解析】请注意代码中引入文件名的区别，当SASS文件以_为前缀开头时，使用@import命令不需要写出这个_前缀和.scss的后缀。4.1.8 条件语句@if和@else条件语句是一般编程语言的基本设施，SASS有两个配套的@if和@else可以使用。Ionic代码库中路径为\项目目录\www\lib\ionic\scss\_mixins.scss的文件里也有多处用到了条件语句，如以下片段：@mixin flex-wrap$value： nowrap { -webkit-flex-wrap： $value; -moz-flex-wrap： $value; @if $value == nowrap { -ms-flex-wrap： none; } @else { -ms-flex-wrap： $value; } flex-wrap： $value;}【代码解析】由于IE浏览器的flex-wrap属性值与其他浏览器不一样，因此代码里通过条件语句进行了额外判断。4.2 lodash（可选学）lodash是一套JavaScript工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，在本书的3.6节的示例3-10已经使用了它的数组处理函数。目前每天使用 npm 安装 lodash 的数量在百万级以上，这在一定程度上证明了其代码的普世性，笔者推荐读者在自己的项目中选择使用。本书13和14章的项目实战中，也会大量运用到lodash的多个辅助函数。4.2.1 使用场景lodash库提供的辅助函数主要分为以下几类：? Array：适用于数组类型，比如填充数据、查找元素、数组分片等操作。? Collection：适用于数组和对象类型，部分适用于字符串，比如分组、查找、过滤等操作。? Function：适用于函数类型，比如节流、延迟、缓存、设置钩子等操作。? Lang：普遍适用于各种类型，常用于执行类型判断和类型转换。? Math：适用于数值类型，常用于执行数学运算。? Number：适用于生成随机数，比较数值与数值区间的关系。? Object：适用于对象类型，常用于对象的创建、扩展、类型转换、检索、集合等操作。? Seq：常用于创建链式调用，提高执行性能（惰性计算）。? String：适用于字符串类型。? Util：提供了杂类辅助函数。由于lodash库提供的辅助函数数量众多，而本书的主旨是关于Ionic框架的开发，因此不再一一深入介绍了。笔者将会在后续第14章和第15章中的项目实战代码里解说用到的相关lodash库函数。4.2.2 引入到项目尽管lodash库在有数据处理需求的前端开发中已属标配，但Ionic框架并没有包含它。因此读者如果需要在自己的项目或产品中使用，必须自行引入。如果仅在JavaScript文件中使用，可以采用类似本书3.6节中示例3-10的简单做法，包含lodash的JavaScript文件后使用全局变量_来获取它即可。然而如果需要在HTML视图页的AngularJS表达式中使用lodash库，则有可能因为作用域对象的解析不包括全局变量而无法使用。有一个解决办法是在主应用模块的run方法代码块里设置lodash库根对象到根作用域里，这样HTML视图页里就也能使用了lodash库了，如：【示例4-1】 设置lodash库根对象到AngularJS应用的根作用域。var myapp = angular.module''myApp'', [].runfunction $rootScope {$rootScope._ = window._;};【代码解析】代码里的run方法将在AngularJS应用启动时被调用，因此随后所有的作用域对象就都能通过继承链使用它了。在页面包含lodash库文件时，需要把包含代码放置在应用本身的JavaScript文件前面，可参见示例3-10的做法。4.2.3 进一步学习指南lodash库功能强劲，而且效率很好，比较适合移动开发这种前台响应要求高的场景。在此推荐读者可以到其官方网站https：lodash.comdocs多学习了解其提供的函数，以节省开发时间和减少自编代码中错误产生的几率。4.3 Gulp使用简介（可选学）在本书的2.1.3节已经介绍过Gulp的长处和安装步骤，本节将介绍Gulp的一些基本概念和最常见的使用方法，帮助读者未来选用它的一些自动化处理插件和对Ionic默认生成的Gulp主文件进行定制。图4.2中展现了最常用的几个Gulp插件和其对应的功能。图4.2 常见的Gulp插件和其对应的功能4.3.1 Gulp主文件gulpfile.js的执行原理Gulp需要一个文件作为它的主文件，这个文件被强制规定名称为gulpfile.js。要使用Gulp的时候，在项目的根目录中新建一个文件名为gulpfile.js的文件即可。之后要做的就是在gulpfile.js文件中定义任务了。示例4-2是一个最简单的gulpfile.js文件内容示例，它定义了一个默认的任务。【示例4-2】在gulpfile.js中定义一个默认任务。var gulp = require''gulp'';gulp.task''default'',function{console.log''hello'';};【代码解析】代码引入gulp模块后使用它的task方法定义了名为default的默认任务，该任务被调用执行时将在控制台写入字符串hello后退出。运行Gulp任务只需切换到存放gulpfile.js文件的目录，然后在命令行中执行gulp命令就行了。gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行名为default的默认任务。图4.3为分别使用两种方式执行示例4-2中编写的gulpfile.js运行出的结果。图4.3 在命令行执行4-2中编写的gulpfile.js运行出的结果在介绍Gulp的其他函数之前，需要先了解gulpfile.js工作方式。在Gulp中，使用的是Node.js中的流（stream），首先获取到需要的流，然后可以通过流的pipe方法把流依次导入到各个Gulp插件中，一般最后是把流写入到文件里结束。所以可以把Gulp看作是一个流处理器工具，这样它在中间的处理环节不需要频繁地生成临时文件（比Gulp更早出现的同类工具Grunt是以临时文件方式工作的），效率要更高。这样可以推想出来，Gulp的模式一般应该是：首先获取到想要处理的文件流（通过gulp.src方法），然后把文件流依次导入到Gulp的各个插件中（通过pipe方法依次包装各个插件方法），最后把经过插件处理后的流再写入到文件里（也是通过pipe方法包装gulp.dest，gulp.dest方法则把流中的内容写入到文件中）。如果省去中间各个插件环节，那么最简单的一个gulpfile.js就写出来了：【示例4-3】在gulpfile.js中使用流方式执行复制文本文件的操作。var gulp = require"gulp";gulp.task''default'', function{ gulp.src''*.txt'' .pipegulp.dest''test_gulp'';};【代码解析】在【示例4-2】的结构里加入了获取gulpfile.js当前目录的所有.txt文件，随后写入到目录底下的test_gulp目录中。了解了Gulp 的工作原理和代码编写结构后，下面的内容将继续讲解Gulp 的四个基本API接口： gulp.src、gulp.task、gulp.dest和gulp.watch。4.3.2 获取流函数srcgulp.src方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流Vinyl files，这个虚拟文件对象流中存储着原始文件的路径、文件名、内容等信息。其语法为：gulp.srcglobs [, options];1．globs参数globs参数是文件匹配模式（类似正则表达式），用来匹配文件路径（包括文件名），当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组：类型为String或Array。例如：gulp.src[''js*.js'', ''css*.css'', ''*.html'']; 分别匹配各目录下的js、css和本目录下的html文件2．options参数options参数是可选参数对象，以下为常见选项参数：? options.buffer类型：Boolean默认值：true说明：设置为false时将返回file.content的流而不缓冲整个文件的内容，处理大文件时非常有用。插件可能并不会实现对流的支持。? options.base类型：String说明：显式设置输出路径以某个路径的某个组成部分为基础向后拼接。假设在一个路径为 clientjssomedir 的目录中，有一个文件叫somefile.js ： 匹配 ''clientjssomedirsomefile.js'' 现在 `base` 的值为 `clientjs`gulp.src''clientjs***.js'' 写入 ''buildsomedirsomefile.js'' 将`clientjs`替换为build.pipegulp.dest''build''; base 的值为 ''client''gulp.src''clientjs***.js'', { base： ''client'' } 写入 ''buildjssomedirsomefile.js'' 将`client`替换为build.pipegulp.dest''build''; 【代码解析】在路径中的**代表匹配路径中的0个或多个目录及其子目录。使用?options.base就能够选择保留原路径里的一些下层目录结构。4.3.3 写文件函数destgulp.dest方法是用来写入文件或目录的，其语法为：gulp.destpath [,options];1．path参数path参数是写入文件或目录的路径；2．options参数options参数是可选参数对象，以下为常见选项参数：? options.cwd类型：String 默认值：process.cwd说明：输出目录的cwd（current working directory当前工作目录）参数，只在所给的输出目录是相对路径时有效。? options.mode类型：String 默认值： 0777说明：八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。这里说明一下生成的文件路径与给gulp.dest方法传入的路径参数之间的关系。 gulp.destpath生成的文件路径是传入的path参数后面再加上前面调用gulp.src中有通配符开始出现的那部分路径。例如：var gulp = require''gulp'';有通配符开始出现的那部分路径为 ***.jsgulp.src''script***.js'' 最后生成的文件路径为 dist***.js，如果 ***.js 匹配到的文件为 jqueryjquery.js ,则生成的文件路径为 distjqueryjquery.js.pipegulp.dest''dist'';【代码解析】通过这种在写入路径中保留通配符所匹配出的路径的方式，能保留源目录的结构。用gulp.dest把文件流写入文件后，文件流仍然可以继续使用。在后面的4.3.6节我们可以看到Ionic的gulpfile.js利用这一特性同时生成了正常可读的和压缩优化过的CSS文件。4.3.4 监视文件变化函数watchgulp.watch用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件重新压缩生成等。其语法为：gulp.watchglob[, opts], tasks;1．globs参数globs参数为要监视的文件匹配模式，规则和用法与4.3.2节里gulp.src方法中的glob相同。2．opts 参数opts 参数为一个可选的配置对象，通常不需要用到。3．tasks 参数tasks 参数为监视到文件变化后要执行的任务名数组。例如：gulp.task''uglify'',function{ do something};gulp.task''reload'',function{ do something};gulp.watch''js***.js'', [''uglify'',''reload''];【代码解析】在监测到工作目录的js子目录及以下的任何js文件有变动时，则依次调用前面定义过的uglify和reload任务。4.3.5 定义任务函数taskgulp.task用来定义任务，在前面几个小节读者应该已经初步接触过它了。其语法为：gulp.taskname[, deps], fn1．name参数name代表任务名。2．deps参数deps参数是当前定义的任务需要依赖的其他任务名数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数。3．fn参数fn参数是任务函数，我们把任务要执行的代码都写在里面，该参数也是可选的。前面在4.3.1节和4.3.4节已经分别了解了如何定义默认执行的任务和简单的任务，现在介绍当有多个任务时，需要知道怎么通过任务依赖来实现控制任务的执行顺序。例如想要执行one,two,three这三个任务，就可以定义一个空的任务，然后把那三个任务当作这个空的任务的依赖就行了：只要执行default任务，就相当于把one,two,three这三个任务执行了gulp.task''default'',[''one'',''two'',''three''];【代码解析】 如果任务[''one'',''two'',''three'']相互之间没有依赖，任务就会按书写的顺序来执行，如果有依赖的话则会先执行依赖的任务。4.3.6 解析Ionic项目Gulp主文件了解完Gulp提供的4个基础API接口后，就可以开始通过阅读已有成熟代码学习怎么把Gulp应用到日常工作中了。从本书的主旨出发，笔者做出了一个轻松的决定：通过解析Ionic项目模板自带的Gulp主文件来讲解Gulp的API和一些插件的使用。读者可以打开在本书前面的2.1.6节生成的Hello Ionic项目目录下的gulpfile.js文件自行查看阅读或是参考示例4-4的代码与注释来学习。【示例4-4】Ionic项目模板自带的Gulp主文件gulpfile.js引入Gulp库和用到的Gulp插件var gulp = require''gulp'';var gutil = require''gulp-util'';var bower = require''bower''; 引入Bower库var concat = require''gulp-concat'';var sass = require''gulp-sass'';var minifyCss = require''gulp-minify-css'';var rename = require''gulp-rename'';引入shelljs库，用于实现 Unix shell 命令执行var sh = require''shelljs'';
设置项目的SASS文件所在目录var paths = { sass： [''.scss***.scss'']};
设置默认任务依赖于sass任务gulp.task''default'', [''sass''];
sass任务，将Ionic应用的主SASS文件编译为CSS文件的两种格式gulp.task''sass'', functiondone { 读取Ionic应用的主SASS文件 gulp.src''.scssionic.app.scss'' 编译为CSS文件.pipesass.on''error'', sass.logError未压缩的版本写入css目录中.pipegulp.dest''.wwwcss''.pipeminifyCss{ keepSpecialComments： 0}压缩后的版本文件改名.piperename{ extname： ''.min.css'' }压缩后的版本写入css目录中.pipegulp.dest''.wwwcss''异步任务完成后执行done通知调用者.on''end'', done;};
设置watch任务为监控SASS文件所在目录，如有变化则启动sass任务重新生成css文件gulp.task''watch'', function { gulp.watchpaths.sass, [''sass''];};
install任务，调用Bower执行包安装gulp.task''install'', [''git-check''], function { return bower.commands.install.on''log'', functiondata { gutil.log''bower'', gutil.colors.cyandata.id, data.message;};};
git-check任务，检查是否安装了gitgulp.task''git-check'', functiondone { if !sh.which''git'' {console.log '' '' gutil.colors.red''Git is not installed.'', ''\n Git, the version control system, is required to download Ionic.'', ''\n Download git here：'', gutil.colors.cyan''http：git-scm.comdownloads'' ''.'', ''\n Once git is installed, run \'''' gutil.colors.cyan''gulp install'' ''\'' again.'';process.exit1; } done;};【代码解析】代码里最主要的是两个任务：sass和watch。sass作为主任务负责生成css文件，而watch任务将被Ionic CLI调用监控项目sass文件的变化，一旦变化则将在css文件更新后调用浏览器的远程函数重新加载应用。4.4 Ionic项目模板目录结构简介使用Ionic CLI的命令创建完一个项目并加入Android或iOS（开发机需要是OSX操作系统）运行平台的支持后，项目的目录与文件结构如图4.4所示。图4.4 Ionic项目模板顶层目录与文件结构本节将介绍重要的目录与配置文件，了解这些对于未来的问题定位与应用定制是有助益的。4.4.1 常用工作目录 wwwwww目录将是开发人员最常访问的地方，开发出的代码基本都归类放在相应的字母下。图4.5中显示了初始状态下www目录的结构。图4.5 www目录的结构相信读者根据名称不难想到：? css、img和js目录分别放置开发人员自行开发的代码或图片资源。? index.html是默认的应用的主页面文件，由于Ionic APP应用的实质是一个SPA（Single Page Application单页面应用），因此该文件将在运行时一直加载在浏览器中，而随着代码的运行（通过第8章介绍的导航类组件）变更其局部的展现。? lib目录主要放置存放Ionic框架的源代码、图标字体文件和使用的AngularJS框架的代码。4.4.2 常用工作目录scss在项目启用了SASS后，scss目录下将会存在一个ionic.app.scss文件。开发人员可以在这个文件上更改Ionic默认设置的一些变量的值，该文件的头部已有注释文本举例该如何更改。读者可以结合在4.1节了解的SASS知识和libionicscss目录下的Ionic原始SASS文件来定制自己的APP应用的外观。4.4.3 常用工作目录 resourcesresources目录主要用于存放APP应用在Android和iOS平台的桌面图标和应用启动闪屏使用的图片文件。使用自己的资源覆盖这些文件是定制发布APP前必须要做的界面完善工作，一般来说这些图片文件是使用Photoshop来制作生成的。本书后面的13.3.9节里用实例介绍了实战项目中如何定制APP的图标和应用启动屏图片文件。4.4.4 重要文件package.json通过文本编辑器打开package.json可以看到APP应用的相关信息、依赖的Gulp插件和其他NPM开发包都设置在里面。此外还列举出了随应用模板安装的Cordova插件集和支持的硬件平台，如图4.6所示。图4.6 package.json的初始结构4.4.5 重要文件config.xmlconfig.xml是存放与APP应用发布相关的主要信息的配置文件。因为XML文件的自描述性，相信读者阅读每项的内容就能知道对应的配置项意义，也可以到cordova的官方网站（http：cordova.apache.orgdocsenlatestconfig_refindex.html）阅读更全面的说明。开发人员可以在发布测试时尝试调整里面的一些配置值，如SplashScreenDelay、FadeSplashScreenDuration。笔者建议调整其他开关值前在网上先搜索一下这些配置项对应的含义，以免产生意想不到的错误。4.4.6 其他目录与文件简介? hooks目录，放置安装的Cordova插件可能需要额外执行的脚本文件，Ionic CLI会负责调用。? node_modules目录，存放项目用到的Nodejs插件模块。? plugins目录，Cordova插件的安装目录，相关知识请完整参考本书第11章。? gulpfile.js文件，项目的Gulp主文件，已在本书的4.3.6节介绍过。
|
|
購物車/收銀台(0) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
