移动WebAPP开发之实战美团外卖视频教程

admin

本课程率领大师一步步开辟及连系Hybrid将美团外卖实战项目打形成完整的移动Web APP，了解并把握移动Web开辟的根基技术，开辟进程中也会讲授到移动web的技能和碰到题目时处理方式和针对分歧场景技术的选型。从而提升对移动端适配以及React 百口桶和组件化开辟实战技术，本课程还覆盖了工作中常见移动Web开辟题目，而且可以经过课程进修找到对应的技术处理计划。 第1章 课程先容 经过课程先容，领会进修课程的需要性，所包括的常识点，课程放置，进修条件，课程收获，快速周全领会课程。 1-1 课程导学 第2章 移动web硬常识点 本章首要讲授移动web开辟中需要把握的根基常识，是停止后续进修的条件。从概述到开辟调试方式，以及viewport视窗概念和道理的讲授，在到移动web开辟关键结构技术和适配计划，最初讲授移动web中常用的touch事务。 2-1 移动web开辟概述 2-2 移动web开辟调试 2-3 移动web适配概述 2-4 viewport视窗概念 2-5 css3之flex结构 2-6 响应式结构和MediaQuery 2-7 rem,vw结构与适配 2-8 移动端touch事务详解 第3章 移动web软技术 本章首要讲授移动web开辟实战中用到的相关常识点。从根基代码工具的先容到项目构建的根基概念，同时预先给大师先容webpack和Sass的根基利用方式，帮助根本弱的同学以便于停止后续的进修，最初教大师若何利用React组件化思惟开辟页面。... 3-1 代码治理工具&项目构建工具简介 3-2 webpack工具利用先容 3-3 Sass预处置工具利用先容 3-4 React组件化思惟 第4章 项目开辟构建情况搭建 本章首要讲授的内容都是为下章实战项目做预备工作的开辟，包括项目标终极成果演示，同时会讲授若何利用webpack来从0搭建设置一个项目标构建情况和根基的Redux利用方式，以便于对Redux不熟悉的同学稳固一下相关常识。 4-1 项目和技术栈先容 4-2 项目演示 4-3 构建情况搭建（1） 4-4 构建情况搭建（2） 4-5 构建情况搭建（3） 4-6 构建情况搭建（4） 4-7 redux-react利用先容（1） 4-8 redux-react利用先容（2） 第5章 美团APP—首页开辟 开辟首页，讲授经过React+Redux实现页面根基逻辑，利用flex停止页面结构，引入rem停止页面适配，实现tab切换，转动加载逻辑，以及事务绑定逻辑。 5-1 底部tab按钮开辟(webpack-dev-server设置) 5-2 底部tab按钮开辟-UI逻辑编写（1） 5-3 底部tab按钮开辟-UI逻辑编写（2） 5-4 底部tab按钮开辟(rem设置) 5-5 底部tab按钮开辟(集成ESlint) 5-6 底部tab按钮开辟(集成HMR) 5-7 首页页面开辟Header模块开辟 5-8 首页页面开辟SearchBar模块开辟 5-9 首页页面开辟-Category模块开辟（1） 5-10 首页页面开辟-Category模块开辟（2） 5-11 首页页面开辟(ContentList模块开辟) 5-12 首页页面开辟-ListItem模块UI开辟 5-13 首页页面开辟-ListItem模块款式开辟 5-14 首页页面开辟-ListItem模块数据衬着开辟（1） 5-15 首页页面开辟-ListItem模块数据衬着开辟( 2 ) 5-16 首页页面开辟(转动加载逻辑实现) 5-17 定单页面开辟(List模块开辟) 5-18 定单页面开辟(OrderItem模块开辟)（1） 5-19 定单页面开辟(OrderItem模块开辟)（2） 5-20 定单页面开辟(公共ScrollView模块开辟) 5-21 我的页面UI开辟 5-22 我的页面款式开辟 5-23 集成react-router 第6章 美团APP—评价和分类页开辟 开辟评价页和分类页，讲授利用div+overflow实现部分转动，移动端输入框相关利用技能以及css伪类实现星型icon。 6-1 分类页面开辟(顶部NavHeader模块开辟) 6-2 分类页面开辟(顶部Header tab 模块UI开辟) 6-3 分类页面开辟(顶部Header模块款式和逻辑开辟) 6-4 分类页面开辟(Filter面板模块“全数分类”数据衬着开辟) 6-5 分类页面开辟(Filter面板模块“排序和挑选”数据衬实在现 6-6 分类页面开辟(Filter面板模块款式开辟) 6-7 分类页面开辟(Filter面板模块item逻辑实现) 6-8 分类页面开辟(列表List模块开辟) 6-9 评价页面开辟(UI开辟) 6-10 评价页面开辟(款式开辟) 6-11 评价页面开辟(交互逻辑开辟) 第7章 美团APP—详情页开辟 开辟详情页，讲授点菜挑选器相关逻辑，经过React组件化对之前页面的公共组件停止抽离，经过封装scrollview实现评价tab的数据加载，以及利用css伪类实现1px边框。 7-1 详情页顶部tab开辟(UI开辟) 7-2 详情页顶部tab开辟(款式交互逻辑开辟) 7-3 详情页点菜页面开辟(LeftBarUI开辟) 7-4 详情页点菜页面开辟(LeftBar 款式和逻辑开辟) 7-5 详情页点菜页面开辟(RightContent UI和款式开辟) 7-6 详情页点菜页面开辟(RightContent逻辑开辟) 7-7 详情页点菜页面开辟(ShopBar UI和款式开辟) 7-8 详情页点菜页面开辟(ShopBar 逻辑开辟) 7-9 详情页点菜页面开辟(ShopBar-chooseList 交互开辟)（1） 7-10 详情页点菜页面开辟(ShopBar-chooseList 交互开辟)（2） 7-11 详情页批评页面开辟(顶部Header开辟) 7-12 详情页批评页面开辟(列表List 数据绑定) 7-13 详情页批评页面开辟(列表List UI开辟) 7-14 详情页批评页面开辟(列表List款式逻辑开辟) 7-15 详情页商家页面开辟(UI开辟) 7-16 详情页商家页面开辟(款式开辟) 第8章 美团APP—回首与性能优化 经过nodejs和express实现后端数据的代{过}{滤}理，经过设备cookie来实现对美团外卖实在数据的请求。对首面和详情页的tab加载逻辑停止懒加载和对之前的转动加载逻辑优化，同时经过构建来完善页面请求资本的优化。打包并公布到腾讯云。... 8-1 懒加载性能优化 8-2 JS和CSS公共文件抽离优化 8-3 编写背景server读取实在数据 8-4 多Tab 页切换与转动数据加载优化 8-5 项目打包 8-6 项目公布 第9章 美团APP与hybrid深度连系 本章首要围绕Hybrid停止讲授，利用OC代码率领大师开辟一个简单的webview组件，同时讲授web和native之间的通讯机制，并开辟jsbridge接口完善美团外卖项目，让项目看起来更像是一个实在的APP。 9-1 JS bridge 道理 9-2 iOS webview + JS API接口+iOS APP集成 第10章 课程总结 回首和总结课程讲授内容，能更好的回归和归纳。 10-1 课程总结 游客，如果您要查看本帖隐藏内容请回复