大前端入门指南

《大前端入门指南》是一本大前端入门书籍，对大前端技术栈进行了全面的讲解，内容涉及HTML/CSS、JavaScript、React Native、Flutter和微信小程序等。在内容组织上，采用理论和项目实战相结合的方式，来帮助读者更好地入门大前端。

《大前端入门指南》讲解了大前端方向中多个主流的技术栈，针对每个技术栈，本书选取入门必需的内容进行详细讲解。同时，书中还提供了三个难度适中的实战项目，非常适合开发者学习和入门。

任玉刚

微信公众号「玉刚说」作者，《Android开发艺术探索》作者，专家工程师，曾就职于腾讯、百度等一线大厂，热爱大前端技术。

曹建波

Android 高级工程师，研究过 Android、iOS、小程序，毕业于北京大学计算机系

适读人群 ：本书讲解了大前端方向中多个主流的技术栈，针对每个技术栈，本书选取入门必需的内容进行详细讲解。同时，书中还提供了三个难度适中的实战项目，非常适合开发者学习和入门。

内容定位：本书对大前端技术栈进行了全面的讲解，内容涉及HTML/CSS、JavaScript、React Native、Flutter和微信小程序等。

内容组织：采用理论和项目实战相结合的方式，帮助读者更好地入门大前端。

读者定位：本书选取大前端主流技术栈入门必需的内容进行详细讲解。同时提供了三个难度适中的实战项目，非常适合想入门大前端的开发者学习。

从目前的形势来看，大前端的概念越来越火热了，但什么是大前端，如何学习大前端，很多人都不甚了解。

大前端到底是什么呢？直接来说，大前端就是所有前端的统称。在后端眼里，最接近用户的那一层都叫前端，比如Android、iOS、Web、Watch等。站在后端的角度，其实并不需要对各个前端都有明确的感知，最好它们能统一起来，这一切就是大前端，除了这些平台，所衍生的跨平台方案及周围生态也是大前端的一部分。

大前端领域有很多技术方案，包括React Native、Flutter、小程序、PWA，到底谁才是未来胜出的那一个？谁知道呢！

其实事情并没有那么复杂，形势难以捉摸，与其猜测哪个方案会胜出，不如潜下心来，将各个技术方案都学习一下，以不变应万变。互联网上不缺学习资料，但是这些资料往往对初学者不友好，而本书刚好就解决了这个问题，相信读者能从书中收获良多。

本书适合移动开发者和Web前端开发者，以及其他对大前端技术感兴趣的读者阅读。

本书内容

本书共10章，每章的具体内容如下所述。

第1章讲述什么是大前端，并对主流跨平台方案进行简单的介绍。

第2章讲述HTML和CSS的入门知识，详细介绍相关语法及组件用法。

第3章讲述JavaScript的入门知识，详细介绍了JavaScript的语法及应用场景，丰富的小例子更加容易理解和学习。

第4章讲述React Native的入门知识，详细介绍React Native语法和环境搭建，介绍常用组件的用法及用例。

第5章针对React Native进行项目实战，理论结合实际项目，更快速地学习和理解React Native。

第6章讲述微信小程序的入门知识，详细介绍小程序的环境搭建、架构、组件及常用API。

第7章针对微信小程序进行项目实战，理论结合实际项目，更快速地学习和理解微信小程序。

第8章讲述Flutter的入门知识，详细介绍Flutter的环境搭建、Dart 语法、常用组件，以及如何构建Flutter插件。

第9章针对Flutter进行项目实战，理论结合实际项目，更快速地学习和理解Flutter。

第10章简单地介绍Weex、PWA和快应用，帮助读者快速地了解它们。

通过这10章的学习，让读者对大前端有一个全面的理解，更快速地入门大前端，少走一些弯路。

致谢

感谢本书的策划编辑陈晓猛，他的高效是本书得以及时出版的一个重要原因。感谢我的公众号读者，他们为本书提了许多宝贵的建议。

由于技术水平有限，书中难免有疏漏，欢迎读者向我反馈：[email protected]。读者也可以关注我的微信公众号，我会定期在上面发布勘误信息。

任玉刚 2019年5月于北京

第1章 大前端概述 1

1.1 什么是大前端 1

1.2 主流跨平台方案简介 2

第2章 HTML和CSS入门 6

2.1 HTML基础 6

2.1.1 HTML简介 6

2.1.2 基本结构 6

2.1.3 常用标签 8

2.1.4 图片 12

2.1.5 列表 14

2.1.6 超链接 18

2.1.7 表格 23

2.1.8 表单 25

2.2 CSS基础 31

2.2.1 选择器 31

2.2.2 常用属性 40

2.2.3 盒模型 50

2.2.4 定位 59

2.2.5 浮动 69

2.2.6 FlexBox布局 77

第3章 JavaScript入门 84

3.1 JavaScript初探 84

3.1.1 搭建开发环境 84

3.1.2 第一个程序 85

3.2 数据类型 87

3.2.1 变量、常量和字面量 87

3.2.2 基本类型和对象类型 88

3.2.3 内置类型 89

3.2.4 类型转换 90

3.2.5 标识符命名 91

3.3 运算符和表达式 92

3.3.1 运算符 92

3.3.2 运算符优先级 98

3.4 控制流 98

3.4.1 逻辑判断 99

3.4.2 循环控制流 100

3.5 函数和闭包 104

3.5.1 函数 105

3.5.2 闭包 106

3.6 程序异常 108

3.6.1 常见异常 108

3.6.2 异常捕获 108

3.6.3 异常抛出 109

3.7 ES6 110

3.8 Node.js 110

3.8.1 安装Node.js 110

3.8.2 NPM的使用 111

第4章 React Native入门 115

4.1 React语法基础 115

4.1.1 React简介 115

4.1.2 搭建React开发环境 116

4.1.3 JSX语法 117

4.1.4 组件 118

4.1.5 组件的生命周期 122

4.2 环境搭建 124

4.2.1 React Native开发环境搭建 124

4.2.2 WebStorm代码编辑器环境搭建 127

4.2.3 Visual Studio Code代码编辑器环境搭建 127

4.2.4 运行React Native项目 128

4.3 常用UI组件 128

4.3.1 View组件 128

4.3.2 Image组件 130

4.3.3 Text组件 135

4.3.4 TextInput组件 140

4.3.5 ScrollView组件 144

4.3.6 ListView组件 147

4.3.7 FlatList组件 151

4.3.8 SwipeableFlatList组件 155

4.3.9 SectionList组件 158

4.4 网络 161

4.5 导航器React Navigation 168

4.6 数据存储 183

4.7 原生模块开发 187

4.7.1 Android原生模块的封装 187

4.7.2 iOS原生模块的封装 191

第5章 React Native实战 196

5.1 项目创建 196

5.1.1 创建React Native项目 196

5.1.2 项目结构介绍 197

5.2 完善功能页面 199

5.2.1 登录注册 199

5.2.2 首页 210

5.2.3 个人中心页面 215

5.2.4 书单详情 218

5.2.5 侧滑页面 222

5.3 打包 225

5.3.1 Android打包 225

5.3.2 iOS打包 227

第6章 微信小程序入门 229

6.1 认识小程序 229

6.1.1 小程序简介 229

6.1.2 开发前的准备 230

6.1.3 创建小程序 232

6.1.4 代码构成 233

6.1.5 小程序的能力 234

6.2 小程序框架 235

6.2.1 小程序配置 235

6.2.2 小程序的生命周期 236

6.2.3 路由 238

6.2.4 视图层 239

6.2.5 动画 243

6.3 常用组件 243

6.3.1 视图容器 243

6.3.2 基础内容 246

6.3.3 表单组件 247

6.3.4 媒体组件 251

6.3.5 地图 254

6.3.6 web-view 255

6.4 常用API 255

6.4.1 网络 255

6.4.2 数据缓存 257

6.4.3 位置 257

6.4.4 设备 258

6.4.5 开放接口 259

6.4.6 更新 261

第7章 微信小程序实战 262

7.1 项目结构 262

7.2 项目实战 263

7.2.1 数据请求 264

7.2.2 登录与注册页面 265

7.2.3 首页 269

7.2.4 个人中心页面 276

7.2.5 图书详情页面 281

7.2.6 收藏页面 292

7.3 打包上线 295

7.3.1 上传代码 295

7.3.2 提交审核 296

第8章 Flutter入门 299

8.1 前期准备 299

8.1.1 Flutter简介 300

8.1.2 安装和配置编辑器 300

8.1.3 体验Flutter 304

8.1.4 Dart语法 306

8.2 构建用户界面 312

8.2.1 如何布局？布局文件跑哪去了 312

8.2.2 Widget组件介绍 313

8.2.3 添加交互 316

8.2.4 手势监测和事件处理 318

8.2.5 在Flutter中添加资源和图片 320

8.3 使用设备和SDK API相关 321

8.3.1 异步UI 321

8.3.2 页面跳转和生命周期事件 323

8.3.3 文件读写 324

8.3.4 网络和HTTP 325

8.3.5 JSON和序列化 327

8.3.6 数据库和本地存储 327

8.3.7 Flutter插件 330

8.3.8 封装新API 331

8.3.9 更多资料 336

第9章 Flutter实战 337

9.1 项目结构 337

9.1.1 结构目录 337

9.1.2 项目概述 338

9.2 项目代码 339

9.2.1 登录、注册页面 339

9.2.2 首页 350

9.2.3 个人中心页面 365

9.2.4 图书详情页面 372

9.2.5 侧滑页面 377

9.3 多平台打包 381

9.3.1 Android打包 381

9.3.2 iOS打包 386

第10章 Weex、PWA和快应用 390

10.1 Weex 390

10.1.1 Weex简介 390

10.1.2 Weex基础知识 391

10.1.3 Weex项目之Hello World 392

10.2 PWA 395

10.2.1 PWA简介 395

10.2.2 PWA基础知识 395

10.2.3 PWA项目之Hello World 398

10.3 快应用 402

10.3.1 快应用简介 402

10.3.2 快应用基础知识 402

10.3.3 快应用项目之Hello World 406

10.4 小结 408