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

用户835936271820
114 阅读6分钟

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

这是我参加【第四届青训营】笔记创作活动的第22天

今天来学习本次青训营的最后一堂课，小程序技术全解。首先来看一下课程目标：

认识和了解小程序的业务产品价值，学习和掌握小程序相关技术原理。

我们要了解一下产品价值，这是因为小程序带来的更大的价值就是它的产品价值。

它帮助例如微信这种超级app构筑了更加完整的生态，扩充了更多的业务场景，这才是小程序最最重要的价值，当然它也在技术上带来了很多价值。其实不管什么技术，最终都是要为业务服务的，技术本身并不存在优劣，只存在是否适合。

01—发展历程

01-1—发展历程

image-20220819221818380.png

image-20220819221946729.png

image-20220819222001161.png

01-2核心数据

我们通过20年底的核心数据，可以看出小程序的数量特别地庞大，虽然出现的不是特别久，到现在只会更多。

image-20220819222102921.png

01-3—小程序生态

image-20220819222206381.png

小程序是超级app发展到一个阶段的必然产物，因为这些超级app想要构筑更多的场景，让更多的人用只靠自己做事永远做不完的，所以需要开放出来给其他开发者做。所以小程序目前的生态也基本是围绕各个超级app来的。如上图所示。

02—业务价值

02-1—与Web的区别

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

02-2—三大价值

  • 渠道价值

    • 由于小程序的便捷性，依托于超级平台，小程序能够充分为很多场景导流，如美团和美团优选微信小程序带来的流量占比分别是40%和80%；

  • 业务探索价值

    • 相比原生app来说，小程序的开发难度和成本都降低得很多，这就创造了很多场景开发者能够用小程序来快速试错，不断探索新的业务价值；

  • 数字升级价值

    • 线下到线上如何做？从轻消费类的快餐，茶饮到地产汽车等大众消费，小程序都展示了良好的容错空间，我们线下场景的小程序覆盖范围而很广。

03—技术解析

03-1—小程序原理

第三方开发应用最简单最方便的方式：WebView + JSBridge

webview可以理解为app内置的浏览器，我们可以在app内展示网页，但是除了web本身，我们想让开发者通过js调用更多app上的功能怎么办，这些单靠web本身做不到，这就需要jsbridge来充当js和native代码之间的桥梁，让两者能够沟通相互调用，实现jsbridge的方式。

存在的问题：

  • 无网络的情况体验不佳；
  • 网页切换体验不佳；
  • 如何管控安全。
03-1-1—如何管控安全

image-20220819223802033.png web动态性和灵活性，会使最终上线的结果与审核时不一样的

03-1-2—三个设计的目标
开发门槛低

大部分开发者都会，学习成本低：HTML+JS+CSS

接近原生的使用体验

资源加载(资源离线化解决) + 渲染 + 页面切换(多webview承接页面，切换页面就是切换webview，尽可能减少打开页面时重新渲染的成本)

能够保证安全可控

独立JS沙箱，将dom的api都禁用掉，不允许使用。

不操作dom如何控制页面渲染

image-20220819224414654.png

这个方案，之前很多框架都有，比如react，我们只需要关心数据流而不需要操作具体的dom就可以根据数据来渲染页面。

形成这样的方案：

image-20220819224540779.png 还有一个问题，在浏览器中，当js操作频繁的时候，我们的动画就会卡顿，因为他们是在同一进程中的，我们这种结构将js和渲染分离顺带解决了这个问题。这样的通信结构，决定了小程序的性能问题在数据传递。

03-2—小程序语法

image-20220819224643827.png

03-3—实现番茄时钟

image-20220819224705704.png

image-20220819225111732.png

image-20220819225125158.png

image-20220819225520237.png

04—相关拓展

04-1—跨端框架介绍

目前的小程序跨端框架主要为了解决两个问题：

  • 复杂应用构建；
  • 一次开发可以跨多端。

image-20220819225822613.png

04-2—跨端框架原理

下面来了解跨端框架的原理，其实不论什么框架，都逃不开这两种实现方式，解释编译时和运行时，我们先来了解下编译时的方案：

04-1-1—编译时

image-20220819230008531.png

image-20220819230019744.png

image-20220819230108067.png 编译时方案有个天然的缺陷，无法完全抹平差异，不论是React和Vue等各种框架，它们的用法都十分多样，而且会不断添加新的特性，而小程序本身确有很多的限制，那么在转换过程中，很多特性没有办法进行转换，所以就要给框架的书写代码的时候加上很多限制，这背离了我们的初衷，所以限制更多的方案采用运行时的方案。

04-1-2—运行时

运行时的方案能够实现主要依赖这两个部分，一个是虚拟dom，一个是template组件。

虚拟dom本质是js的一个对象，这个对象有dom的一些属性，可以通过这个对象生成实际dom；

template组件能帮助我们动态生成这些模板组件。

image-20220819230454872.png

运行时的结构：

image-20220819230519792.png

当然运行时的方案也不是完美的，之前讲小程序原理时说setdate是小程序的性能瓶颈，运行时的方案，要进行优化不将整个dom树传递，只传递新增部分，长列表只展示实际页面中看到的列表项，其他的列表项滚动到再渲染，尽可能地减少数据传递的数据量。

在一些场景下相比小程序原生语法性能会更差。

avatar
文章
阅读
粉丝