小程序技术全解

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

小程序的发展历程

小程序生态

业务价值

与WEB的区别

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

三大价值

• 渠道价值

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

• 业务探索价值

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

• 数字升级价值

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

小程序技术解析

小程序原理

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

• WebView + JSBridge

  • WebView：移动端提供的运行JavaScript的环境，相当于App内的浏览器页面
  • JSBridge：顾名思义，作为桥梁开发者可以调用App本身的一些api

• 几个问题：

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

• 小程序通过以下方式，解决了这些问题：

  • 开发门槛低——HTML+JS+CSS

  • 接近原生的使用体验——资源加载 + 渲染 + 页面切换

  • 安全管控——独立JS沙箱：隔绝操作dom的方式

    • 不操作DOM如何控制页面渲染？
    • Data -> 根据数据处理DOM -> 页面

跨端框架

• 什么是跨端框架？

  • 复杂应用构建
  • 一次开发可以跨多端（微信小程序、各系小程序等等）

• 跨端框架介绍

• 跨端框架原理

  • 编译时

    • 解析 -> 生成AST语法树 ->生成页面

  • 运行时

    • 虚拟DOM

      • 本质为js中的一个对象，有很多dom中的属性值标签等，通过这个对象可以生成我们的实际DOM

  • Template组件

    • 小程序中提供的动态生成的模板。

  • 运行时结构

    • 运行时的方案也不是完美的
    • 在一些场景下相比原生小程序的语法性能会更差
    • 大部分场景下都可以