- 第1章 课程介绍 试看
本章主要是向你介绍什么是混合开发，以及目前混合开发中的几种方案。
共 2 节 (24分钟) 收起列表
- 1-1 为什么要有这么一门课，看看就知道啦 (19:06)试看
- 1-2 目前主流的混合开发方案 (04:26)
- 第2章 Hybrid 技术原理
本章主要讲解 hybrid 技术原理与核心本质，让你对混合开发有更清楚的认识。
共 10 节 (73分钟) 收起列表
- 2-1 Hybird 章节补充说明 (00:43)
- 2-2 Hybrid App 的本质 (05:37)
- 2-3 Android 与 Web 通讯 - Android 运行流程 (03:11)
- 2-4 Android Studio 的配置 (11:42)
- 2-5 Android 与 Web 通讯 - Android 代码内容 (11:47)
- 2-6 Android 与 Web 通讯 - npm 安装与 http-server (08:49)
- 2-7 Android 与 Web 的互相调用 (10:20)
- 2-8 IOS 与 Web 通讯 - IOS 代码内容 (05:46)
- 2-9 IOS 与 Web 互相调用 (09:37)
- 2-10 Android 与 IOS 双向通讯对比 (05:23)
- 第3章 开发前的准备
本章主要讲解核心代码开发前的准备知识，比如 Flex 布局、webpack 和 @vue/cli 的基础知识、scss 的基本应用和项目的初始化内容。
共 12 节 (96分钟) 收起列表
- 3-1 Flex 布局 (07:28)
- 3-2 Flex 容器属性之 flex-direction (05:15)
- 3-3 Flex 容器属性之 flex-wrap (06:00)
- 3-4 Flex 容器属性之 justify-content (06:40)
- 3-5 Flex 容器属性之 align-items (11:29)
- 3-6 Flex 项目属性 (06:11)
- 3-7 webpack 与 vue-cli (11:54)
- 3-8 scss 的基本使用 (07:34)
- 3-9 rem 的兼容性设置 (07:04)
- 3-10 rem 兼容性设置代码实现 (06:17)
- 3-11 初始化样式引入 (14:31)
- 3-12 错误处理及效果演示 (05:28)
- 第4章 京东商城首页（上）
本章主要使用 vue 开发商城首页，包括组件化思想、动态组件和异步组件的应用、axios的使用、swiper 的使用、瀑布流、ToolBar、NavBar组件的创建等等核心内容。
共 14 节 (135分钟) 收起列表
- 4-1 组件化开发思想与 toolbar 组件分析 (08:27)
- 4-2 toolbar 组件开发 - HTML 结构 (11:34)
- 4-3 toolbar 组件开发 - CSS 样式 (14:09)
- 4-4 动态组件切换 (12:01)
- 4-5 swiper 介绍 (07:34)
- 4-6 导入 vue-awesome-swiper (06:09)
- 4-7 MySwiper 组件实现 (12:58)
- 4-8 swiper 组件分页器效果 (06:50)
- 4-9 axios 和 easyMock 介绍 (06:46)
- 4-10 （重要）关于接口数据替换的问题 (09:41)
- 4-11 使用 axios 完成 swiper 数据对接 (15:55)
- 4-12 活动组件开发 (10:20)
- 4-13 axios 同时发送多个请求 (04:16)
- 4-14 功能选项组件 (08:08)
- 第5章 京东商城首页（下）
本章主要使用 vue 开发商城首页，包括组件化思想、动态组件和异步组件的应用、axios的使用、swiper 的使用、瀑布流、ToolBar、NavBar组件的创建等等核心内容。
共 16 节 (181分钟) 收起列表
- 5-1 秒杀组件开发 (15:12)
- 5-2 商品价格过滤 (09:16)
- 5-3 倒计时组件样式开发 (06:16)
- 5-4 倒计时组件功能开发 (23:20)
- 5-5 时间格式处理 (04:55)
- 5-6 活动组件复用 (02:27)
- 5-7 什么是瀑布流 (11:01)
- 5-8 商品列表组件 (16:09)
- 5-9 生成不同高度的 item (08:07)
- 5-10 瀑布流代码实现 (19:41)
- 5-11 直营、缺货组件开发 (08:20)
- 5-12 navigationBar 组件设计原则 (07:34)
- 5-13 navigationBar 默认展示样式 (10:54)
- 5-14 通过插槽可配置的 navigationBar (04:11)
- 5-15 Search 组件开发 (11:34)
- 5-16 navigationBar 在首页的应用 (21:09)
- 第6章 商品列表页
使用 vue 开发商品列表页面，包括 筛选器组件，商品列表的多形态展示，筛选器与商品列表的逻辑互通。
共 13 节 (135分钟) 收起列表
- 6-1 商品列表页面分析 (18:20)
- 6-2 筛选器功能分析与基本样式 (16:29)
- 6-3 筛选器代码逻辑实现 (20:12)
- 6-4 筛选器动画实现 (11:40)
- 6-5 筛选器遮盖层实现 (05:02)
- 6-6 商品列表多形态展示分析 (05:35)
- 6-7 商品垂直列表实现 (07:00)
- 6-8 网格布局实现 (01:47)
- 6-9 多形态展示整合 (15:46)
- 6-10 多形态组件在不同应用场景下的调用问题 (08:06)
- 6-11 商品排序功能分析 (04:55)
- 6-12 商品组件排序功能 (16:06)
- 6-13 商品列表排序功能 (03:58)
- 第7章 商品详情与页面状态保存 试看
本章主要使用 vue 开发商品详情页面，包括 NavBar 在详情的使用、视差效果分析与组件封装、页面组件过渡动画、虚拟任务栈、页面子元素滑动状态保存、tab 切换的状态保存等等。
共 16 节 (152分钟) 收起列表
- 7-1 跳转到 GoodsDetail (04:04)
- 7-2 NavBar 与 MySwiper 的使用 (06:40)
- 7-3 MySwiper 数字分页器实现 (10:15)
- 7-4 GoodsDetail 样式初始化 (02:26)
- 7-5 GoodsDetail 页面基础布局 (19:31)
- 7-6 NavBar 在 GoodsDetail 中的使用 (15:59)
- 7-7 视差效果分析 (03:25)试看
- 7-8 视差组件开发 (16:57)
- 7-9 页面跳转过渡动画 (10:24)
- 7-10 过渡动画实现 (15:26)
- 7-11 虚拟任务栈 (06:01)试看
- 7-12 虚拟任务栈代码实现 (10:21)
- 7-13 页面跳转的状态保存 (03:47)
- 7-14 实现页面跳转的滑动状态保存 (10:04)
- 7-15 首页 Tab 切换的状态保存 (04:03)
- 7-16 立即购买按钮消失和刷新页面无数据的问题处理 (12:22)
- 第8章 加入购物车模块
本章主要使用 vue 开发购物车页面，包括 复杂逻辑处理、vuex 状态管理等。
共 10 节 (132分钟) 收起列表
- 8-1 立即购买页面创建(上) (16:38)
- 8-2 立即购买页面创建(下) (11:43)
- 8-3 购物车页面组件分析 (09:04)
- 8-4 商品详情跳转到购物车 (17:23)
- 8-5 通过 vuex 来保存加入购物车中的商品 (14:24)
- 8-6 购物车布局实现 (24:16)
- 8-7 购物车商品数量控制器(上) (06:26)
- 8-8 购物车商品数量控制器(下) (13:39)
- 8-9 控制购物车中的商品展示 (06:08)
- 8-10 已选商品价格和数量的统计 (12:16)
- 第9章 个人中心
本章主要讲解个人中心模块。包括个人中心页面、登录、注册页面的开发等。
共 4 节 (35分钟) 收起列表
- 9-1 个人中心在项目中的作用 (02:46)
- 9-2 个人中心页面开发 (08:56)
- 9-3 登录页面开发 (14:17)
- 9-4 注册页面开发 (08:12)
- 第10章 与 native 交互
本章主要讲解 web 与 native 开始交互，包括 native 配置讲解、web 在 native 上的适配展示、web 与 native 互相调用完成自动登录、支付等功能。
共 14 节 (120分钟) 收起列表
- 10-1 原生讲解方式 (02:29)
- 10-2 原生 APP 配置（WEB 端展示） (03:04)
- 10-3 原生 APP 配置（自动登录） (04:16)
- 10-4 微信支付基本流程 (11:17)
- 10-5 支付宝支付基本流程 (08:16)
- 10-6 对沉浸式布局的适配 (06:52)
- 10-7 IOS 设备适配问题 (24:25)
- 10-8 与 Native 交互-自动登录（注册功能对接） (16:21)
- 10-9 与 Native 交互-自动登录（登录功能对接） (09:43)
- 10-10 与 Native 交互-自动登录（自动登录对接） (06:24)
- 10-11 与 Native 交互-自动登录（退出登录） (10:23)
- 10-12 与 Native 交互-自动登录（效果演示） (05:18)
- 10-13 微信与支付宝支付对接 (08:32)
- 10-14 Android 支付功能演示 (02:17)
- 第11章 项目部署
本章主要讲解部署 vue 项目，包括 如何购买阿里云服务器、如何购买域名、如何配置服务器、单页应用的 nginx 配置、如何使用 CDN 加速和对象云存储等等。
共 8 节 (61分钟) 收起列表
- 11-1 服务器、IP、域名之间的关系 (02:44)
- 11-2 阿里云服务器购买 (08:07)
- 11-3 服务器的 Nginx 配置 (18:20)
- 11-4 单页应用 Nginx 配置注意事项 (04:30)
- 11-5 域名注册与使用 (09:53)
- 11-6 使用 CDN 对域名进行加速 (09:21)
- 11-7 使用 CDN 服务的注意事项 (04:28)
- 11-8 七牛云存储 (03:05)
- 第12章 课程总结
课程总结，杂谈
共 1 节 (3分钟) 收起列表
