首页 实战
收藏

深入学习小程序框架底层原理，培养双线程思维

深入学习小程序框架底层原理，培养双线程思维，打造前端差异化竞争力，实现弯道超车

已完结
|
难度：高级
|
时长：共 12 小时
优惠到手 ￥269
原价￥299.00
满599减100 满299减30
立即购买
加购物车
已有 138 人在学
  • 能力：自研小程序框架能力
  • 思维：培养双线程架构思维
  • 细节：1:1还原微信小程序架构
  • 流程：小程序框架研发全流程
  • 深度：掌握小程序底层原理
  • 面试：储备差异化竞争力
试看本节课 12:48
试看本节课 06:26
1-2 导学
2-1 小程序框架技术方案概述
检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
无论你是一位新手，还是一位有经验的开发者，能够自研一套小程序底层框架，都是你突破技术瓶颈有效途径。在本课程中，由曾参与主持小程序框架自研工作的小默老师，带领大家从架构设计 ，原理剖析，再到源码的实现，一步步地实战构建一个完整的微信小程序底层框架，让你深度掌握小程序双线程原理，助力你具备把握最佳机会的能力和提升获取心仪Offer的成功率，成为一个真正有实力的技术人才 。
展开所有

本章介绍：

介绍课程内容，学习建议和注意事项。演示课程项目，让学员有一个整体的认识。

第1章 课程简介
2 节｜13分钟
展开
  • 图文：
    1-1 课程演示 demo 地址
  • 视频：
    1-2 导学
    试看
    12:48

本章介绍：

本章简要介绍双线程模型，结合实际的代码示例，让大家对此模型有一个初略的总体认识。

第2章 双线程简易模型：对双线程有一个初步认识
6 节｜66分钟
收起
  • 视频：
    2-1 小程序框架技术方案概述
    试看
    06:26
  • 视频：
    2-2 webview的使用
    23:54
  • 视频：
    2-3 jscore的使用
    09:51
  • 视频：
    2-4 iframe的使用
    09:43
  • 视频：
    2-5 webworker的使用
    06:28
  • 视频：
    2-6 简易双线程示例
    08:59

本章介绍：

本章专注于在浏览器环境下做微信客户端的模拟，为双线程搭建基础环境。

第3章 微信客户端开发：双线程模型运行的基石
4 节｜55分钟
收起
  • 视频：
    3-1 客户端模拟项目搭建
    04:17
  • 视频：
    3-2 ios设备模拟
    07:01
  • 视频：
    3-3 微信应用模拟
    23:18
  • 视频：
    3-4 小程序容器初始化
    20:20

本章介绍：

本章专注于讲解小程序应用的初始化过程。

第4章 小程序应用初始化
2 节｜27分钟
展开
  • 视频：
    4-1 小程序应用初始化
    21:40
  • 视频：
    4-2 通信桥bridge创建
    04:40

本章介绍：

本章专注讲解如何在小程序容器中搭建逻辑线程，以及小程序容器与逻辑线程的通信机制建设。

第5章 逻辑线程建设：JS代码运行环境
2 节｜30分钟
展开
  • 视频：
    5-1 逻辑线程初始化
    09:42
  • 视频：
    5-2 逻辑线程的通信通道建设
    20:16

本章介绍：

本章讲解如何在小程序容器中搭建渲染线程，小程序容器与webview通信机制建设。

第6章 渲染线程建设：wxml代码运行环境
2 节｜39分钟
展开
  • 视频：
    6-1 渲染线程初始化
    19:31
  • 视频：
    6-2 渲染线程的通信通道建设
    18:34

本章介绍：

本章专注讲解小程序应用资源加载过程，以及如何把这些资源信息保存在内存中。

第7章 应用资源加载
3 节｜37分钟
展开
  • 视频：
    7-1 小程序资源加载
    19:48
  • 视频：
    7-2 逻辑线程注册信息的存储
    10:18
  • 视频：
    7-3 渲染线程注册信息存储
    06:52

本章介绍：

本章专注讲解app实例的创建与生命周期函数的调用, 例如：onLaunch、onShow、onHide。

第8章 app实例的创建于生命周期函数调用
2 节｜30分钟
展开
  • 视频：
    8-1 创建app实例
    08:59
  • 视频：
    8-2 app生命周期调用
    20:16

本章介绍：

本章专注讲解页面的首次渲染过程。

第9章 页面首次渲染过程
4 节｜36分钟
展开
  • 视频：
    9-1 构建initialData
    11:36
  • 视频：
    9-2 initialData分发
    05:24
  • 视频：
    9-3 wxml转render函数
    07:02
  • 视频：
    9-4 页面首次渲染 firstRender
    11:24

本章介绍：

本章专注讲解page实例的创建与生命周期函数的调用，例如：onLoad、onShow、onReady等。

第10章 page实例的创建于生命周期函数调用
2 节｜33分钟
展开
  • 视频：
    10-1 创建page实例
    13:45
  • 视频：
    10-2 page生命周期调用
    18:20

本章介绍：

本章讲解如何代理渲染线程的事件，调用逻辑线程的方法, 触发逻辑线程的函数。以及如何实现setData逻辑，触发渲染线程视图更新。

第11章 事件机制与视图更新setData的实现
2 节｜24分钟
展开
  • 视频：
    11-1 事件机制的实现
    15:50
  • 视频：
    11-2 视图更新setData的实现
    07:33

本章介绍：

本章讲解小程序业务层源码编译命令行工具编写。

第12章 构建编译命令行工具：编译出微信开放平台提审产物
7 节｜111分钟
展开
  • 视频：
    12-1 命令行设计
    05:51
  • 视频：
    12-2 配置文件编译
    17:10
  • 视频：
    12-3 wxml的编译-1
    15:17
  • 视频：
    12-4 wxml的编译-2
    14:33
  • 视频：
    12-5 js的编译
    30:31
  • 视频：
    12-6 wxss的编译
    12:03
  • 视频：
    12-7 编译产物消费
    15:30

本章介绍：

本章讲解如何实现小程序路由管理，多个webview如何切换，调度。

第13章 小程序路由管理：多个webview的调度与生命周期实现
2 节｜23分钟
展开
  • 视频：
    13-1 页面跳转navigationTo
    14:48
  • 视频：
    13-2 页面返回navigationBack
    07:37

本章介绍：

本章编写抖音小程序时需要的一些内置组件，image、swiper、swiper-item、video组件实现。

第14章 内置组件开发：更丰富的内置组件，为编写抖音小程序做准备
11 节｜97分钟
展开
  • 视频：
    14-1 条件渲染模板语法的实现
    06:59
  • 视频：
    14-2 列表渲染模板语法的实现
    06:46
  • 视频：
    14-3 内联样式的实现
    10:21
  • 视频：
    14-4 异步回调函数的实现
    11:15
  • 视频：
    14-5 打开小程序navigateToMiniProgram
    06:35
  • 视频：
    14-6 封装text内置组件
    06:44
  • 视频：
    14-7 封装image内置组件
    03:17
  • 视频：
    14-8 wx.showToast的实现
    10:56
  • 视频：
    14-9 封装swiper内置组件
    10:22
  • 视频：
    14-10 事件参数的实现
    06:43
  • 视频：
    14-11 封装video内置组件
    16:55

本章介绍：

本章讲解基于我们自己搭建的小程序架构，如何构建一个小程序应用，并且此小程序业务代码也可以在微信平台完美运行。

第15章 抖音小程序实现：运行在我们自己搭建小程序框架之上
3 节｜42分钟
展开
  • 视频：
    15-1 开发抖音小程序1
    19:27
  • 视频：
    15-2 开发抖音小程序2
    18:05
  • 视频：
    15-3 课程总结
    04:00

本章介绍：

本章节对框架细节进行了优化~~

第16章 框架细节优化
3 节｜31分钟
展开
  • 视频：
    16-1 事件传参的语法优化
    19:04
  • 视频：
    16-2 setData性能优化
    04:16
  • 视频：
    16-3 wxml编译优化
    07:35
本课程已完结
适合人群
前端开发工程师
小程序框架开发者
技术储备
熟悉 HTML CSS JS（必须）
了解 Vue（必须）
了解 node.js（必须）
小默老师
资深前端工程师， 已有138个学生
曾就职于京东、百度等知名公司；从事一线软件设计、研发工作9年，曾参与主持了小程序框架自研工作，对双线程架构设计有着深入的理解和实践。 
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
weixin_慕设计0277139给了 好评
一直不是很理解小程序的双线程架构原理，课程内容刚好能抓住我的疑惑点，感觉很硬核；有很多是我之前一直没太搞懂的，特别是那个官方的生命周期图，之前就没怎么看明白具体每一步在做什么，看了老师的课程瞬间就明白了，现在豁然开朗，感觉现在就算让我自研一个小程序框架，我大概也知道思路了，非常感谢，期待高阶部分的内容！
慕姐1355574给了 好评
太干货了，感觉没有半点废话内容，老师给的例子也很简单易懂，很久没看到这么硬核的前端课程了，记得上一次看这么过瘾的前端课程还是黄轶老师的vue源码解析，之前面试就被问到过一些小程序原理层的问题，可惜当时有些技术点一知半解的，网上的原理分析也都讲的很表层，所以没答好，当时面试的岗位就是专门做小程序框架的，错过了；要是当时看了老师这个课程就好了，当时问我的问题我看课程里面都有讲到，感觉课程里面很多内容都是我之前一直理解很模糊的部分，我要好好的恶补下
白帽子2给了 好评
真是牛逼plus.++++++
慕村4260697给了 好评
非常硬核的课程 ，真正的从原理层面剖析了小程序框架的底层实现细节。老师给的例子也非常的浅显易懂，能够很好的从头开始了解整体的运行机制。如果客户端部分能用安卓或者ios来实现就更完美了。
Archyomi给了 好评
课程设计清晰，解答也很详细，期待高阶课程。
小妖大王给了 好评
实在的一门课程，网上很多讲小程序原理的文章都太理论了，没有实战直观。看了前面几个章节，感觉通俗易懂，最近刚好部门有计划做一套基于双线程的前端架构，原理和小程序类似，刚好可以帮我省下做技术调研的时间，期待后续章节早点开放
查看更多

  • 3

    不会原生端开发能看懂吗？

    亲，您好~完全可以哦，此课程就是专门为前端开发人员量身定制的，祝您学习愉快~


  • 3

    只能mac电脑学吗

    亲，您好~windows也可以祝您学习愉快~


  • 3

    看了此套课程,可否对接公司原生开发APP,实现嵌入WEB前端开发的各个小程序(不是直接添加H5地址)

    亲，您好~完全可以，此课程就是着重讲解双线程架构，对于双线程架构来说，两个线程各自使用的jssdk是最核心的模块，这两个sdk也是我们这个课程要重点讲的，把这两个sdk的通信模块稍微再封装下，兼容下原生通信api(这部分工作量不大，估计1小时内就可以搞定)，就可以集成到原生App中直接使用，语法完全对齐微信小程序，当年某大厂的小程序为了让开发者能够将自己的小程序从微信平台快速迁移到自己平台，就是这么做的，语法完全兼容微信；不过要注意的是，此课程实现的是2017年微信发布的收个小程序版本，所以不包含自定义组件，wxs等高阶功能点，如果你们需要把已有的微信小程序业务代码迁移到你们的原生app中，需要确保业务代码中没有使用这部分功能点，否则需要对这些功能点在框架层做扩展后才能迁移，或者改造一下你们的业务代码，如果对这部分内容感兴趣，可以继续关注此课程的高阶部分，高阶部分会涉及自定义组件，wxs等能力的实现。当然学习完此课程后，我相信你完全有思路去自行实现这部分能力的扩展，当然也可以等待我们的高阶课程，有了足够的经验输入后再去实现也可以，祝您学习愉快~


  • 3

    浏览器里运行小程序的原理是否和一些小程序组件库可以在网页上预览的原理是一致的？

    亲，您好~不一样哦，我们课程中的组件和微信小程序的内置组件一样，是单独运行在渲染线程；为了方便大多数前端同学理解课程内容，我们在浏览器端模拟了一个微信客户端，iframe做渲染线程，webworker做逻辑线程，课程中会涉及大量的线程之间的通信，原理和真实客户端是一样的。祝您学习愉快~


  • 3

    会实现同层渲染吗

    亲，您好~同层渲染属于UI线程高阶内容，且需要原生客户端的支持，本次课程暂不涉及相关内容，本课程着重讲解双线程架构的实现，如果您对同层渲染，自定义组件，wxs等高阶内容感兴趣，可以关注后续的高阶课程祝您学习愉快~


  • 3

    课程demo演示地址有吗

    亲，您好~课程演示 demo : http://miniapp.ai-matrix.vip/wxp_native_ui/祝您学习愉快~

我要提问
查看更多好课
《深入学习小程序框架底层原理，培养双线程思维》的真实评价
内容实用：
10.00分
通俗易懂：
10.00分
逻辑清晰：
10.00分
综合评分：10.00分，共 6 人参与
weixin_慕设计0277139
给了 好评
一直不是很理解小程序的双线程架构原理，课程内容刚好能抓住我的疑惑点，感觉很硬核；有很多是我之前一直没太搞懂的，特别是那个官方的生命周期图，之前就没怎么看明白具体每一步在做什么，看了老师的课程瞬间就明白了，现在豁然开朗，感觉现在就算让我自研一个小程序框架，我大概也知道思路了，非常感谢，期待高阶部分的内容！
慕姐1355574
给了 好评
太干货了，感觉没有半点废话内容，老师给的例子也很简单易懂，很久没看到这么硬核的前端课程了，记得上一次看这么过瘾的前端课程还是黄轶老师的vue源码解析，之前面试就被问到过一些小程序原理层的问题，可惜当时有些技术点一知半解的，网上的原理分析也都讲的很表层，所以没答好，当时面试的岗位就是专门做小程序框架的，错过了；要是当时看了老师这个课程就好了，当时问我的问题我看课程里面都有讲到，感觉课程里面很多内容都是我之前一直理解很模糊的部分，我要好好的恶补下
白帽子2
给了 好评
真是牛逼plus.++++++
慕村4260697
给了 好评
非常硬核的课程 ，真正的从原理层面剖析了小程序框架的底层实现细节。老师给的例子也非常的浅显易懂，能够很好的从头开始了解整体的运行机制。如果客户端部分能用安卓或者ios来实现就更完美了。
Archyomi
给了 好评
课程设计清晰，解答也很详细，期待高阶课程。
小妖大王
给了 好评
实在的一门课程，网上很多讲小程序原理的文章都太理论了，没有实战直观。看了前面几个章节，感觉通俗易懂，最近刚好部门有计划做一套基于双线程的前端架构，原理和小程序类似，刚好可以帮我省下做技术调研的时间，期待后续章节早点开放
篇幅原因，只展示最近100条评价
优惠到手¥299.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题

微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号