前端 小程序技术全解 | 青训营笔记

122 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第18天

课程大纲

  1. 发展历程
  2. 业务价值
  3. 技术解析
  4. 相关拓展

发展历程

截屏2022-08-19 16.20.27.png

截屏2022-08-19 16.20.49.png

截屏2022-08-19 16.21.02.png

核心数据

截屏2022-08-19 16.21.31.png

小程序生态

截屏2022-08-19 16.21.54.png

业务价值

与WEB的区别

  1. 有着固定的语法以及统一的版本管理,平台可以更方便的进行审核
  2. 平台能够控制各个入口,如二维码,文章内嵌,端内分享。入口上也能带来更好的用户体验
  3. 小程序基于特殊的架构,在流畅度上比WEB更好,有更优秀的跳转体验

三大价值

截屏2022-08-19 16.24.48.png

技术解析

小程序原理

第三方开发应用最简单最方便的方式

WebView + JSBridge

无网络的情况体验不佳

网页切换体验不佳

如何管控保证安全 截屏2022-08-19 16.27.06.png 开发门槛低

HTML + JS + CSS

接近原生的使用体验

资源加载 + 渲染 + 页面切换 截屏2022-08-19 16.29.00.png 能够保证安全可控

独立JS沙箱 截屏2022-08-19 16.29.18.png 不操作DOM如何控制页面渲染 截屏2022-08-19 16.29.56.png

截屏2022-08-19 16.30.13.png

小程序语法

截屏2022-08-19 16.30.43.png

实现番茄时钟

截屏2022-08-19 16.31.15.png

截屏2022-08-19 16.31.29.png

截屏2022-08-19 16.31.40.png

截屏2022-08-19 16.31.53.png

相关拓展

跨端框架

复杂应用构建

一次开发可以跨多端 截屏2022-08-19 16.33.15.png

跨端框架原理 - 编译时

截屏2022-08-19 16.34.08.png

截屏2022-08-19 16.34.22.png

跨端框架原理 - 运行时

截屏2022-08-19 16.34.47.png

截屏2022-08-19 16.35.02.png