小程序技术 | 青训营笔记

84 阅读2分钟

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

发展历程

小程序是超级app发找到一个阶段的必然产物

image.png

image.png

image.png

业务价值

web的区别

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

三大价值

渠道价值

业务探索价值

数字升级价值

技术解析

小程序原理

问题:如何简单地让外部开发者在自己的平台上开发第三方应用

web技术开发:WebView + JSBridge

  • WebView可以简单地理解为app内置的浏览器

  • JSBridge顾名思义是JSnative代码之间的桥梁,使之能够相互沟通和调用

使用web技术开发可能出现的问题

  • 无网络的情况体验不佳
  • 网页切换体验不佳
  • 如何管控保证安全

针对问题的解决方案

  • 开发门槛低
  • 接近原生的使用体验
  • 能够保证安全管控

所构成的结构

image.png

小程序语法

TTML(模板部分)+ JS + TTSS

image.png

相关拓展

跨段框架介绍

市面上主流

image.png

跨段框架原理

编译时

解析出AST语法树,再组合重新生成

image.png

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

运行时

虚拟对象 + Template组件

运行时结构

image.png