【第二届字节青训营 - 寒假前端场】「小程序技术全解」の学习笔记

小程序技术全解

发展历程

png

png

png

小程序与WEB的区别

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

小程序的价值

  • 渠道价值
    由于小程序的便捷性,依托于超级平台,小程序能够充分为很多场景导流,如美团和美团优选微信小程序带来的流量占比分别是40%和80%
  • 业务探索价值
    相比原生APP来说,小程序的开发难度和成本都降低的很多,这就创造了很多场景开发者能够用小程序来快速试错,不断探索新的业务价值
  • 数字升级价值
    线下到线上如何做?从轻消费类的快餐、茶饮到地产汽车等大宗消费,小程序都展示了良好的容错空间。我们线下场景的小程序覆盖范围很广。

技术解析

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

WebView是一个基于webkit的引擎,可以解析DOM 元素,展示html页面的控件,它和浏览器展示页面的原理是相同的,所以可以把它当做浏览器看待。

JSBridge:JS与native代码的桥梁。主要是给 JavaScript 提供调用 Native 功能的接口,让混合开发中的前端部分可以方便地使用 Native 的功能。

当前存在的问题:
无网络的情况体验不佳,
网页切换体验不佳

如何管控保证安全?

小程序原理(好处):

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

不操作DOM如何控制页面渲染?

数据
根据数据处理DOM
页面

png

相关拓展

跨端框架:

png

png

缺陷:无法完全抹平差异。

运行时方案:虚拟DOM;Template组件。
虚拟DOM:是一层对真实DOM的抽象,以JavaScript 对象 (VNode 节点) 作为基础的树,用对象的属性来描述节点,最终可以通过一系列操作使这棵树映射到真实环境上

png


声明:文章大部分内容来自字节青训营张晓伟老师上课讲解的内容。

posted @   进击の小白们  阅读(93)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
xxx2745天23小时12分18秒
点击右上角即可分享
微信分享提示