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

33 阅读1分钟

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

发展历程

image.png

业务价值

与web的区别

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

三大价值

  • 渠道价值
  • 业务探索价值
  • 数字升级价值

技术解析

小程序原理:

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

三大主要问题

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

解决方案

  • 开发门槛低:HTML+JS+CSS
  • 接近原生的使用体验:资源加载+渲染+页面切换
  • 能够保证安全可控:独立JS沙箱

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

image.png

小程序语法

image.png

实现番茄时钟:

image.png

image.png

image.png

image.png

相关拓展

复杂应用构建、一次开发可以跨多端

跨端框架

image.png

编译时

image.png 无法完全抹平差异

总体

image.png

虽然在一些场景下相比小程序原生语法性能会更差,但是大多数场景表现都较优秀的