小程序学习|青训营笔记

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

小程序发展历程

小程序原理

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

WebView+JSBridge

如何管控安全

进行日期的判断，到2022年2月2日时，页面发生变化在页面上添加hello word的h1标题。该代码是利用web动态性与灵活性

if(Date.now() > new Date('2022-02-02')){
    document.body.innerHTML = '<h1>hello word</h1>'
}

解决方案特点：

• 开发门槛低

  • HTML+JS+CSS

• 接近原生的使用体验

  • 资源加载+渲染+页面切换。把每一个页面作为一个Webview

• 能够保证安全可控

  • 独立JS沙箱

问题：不操作DOM如何控制页面渲染

如在react中只需关心数据流框架会根据数据梳理DOM。通过数据+模板的应用操作数据，渲染层与逻辑层进行分离。

小程序语法

以字节为例：

小程序中常用的事件

类型	绑定方式	事件描述
tap	bind:tap	手指触摸后马上离开
input	bind:input	文本框的输入事件
change	bind:change	状态改变时触发

相关扩展

跨端框架介绍

对于复杂应用构建，一次开发可以跨多端

跨端框架原理

转换过程中无法完全抹平差异

运行时方案：

• 虚拟DOM

  • 本质是JS中的一个对象，该对象会有很多DOM中的属性包括属性值、标签，我们额可以根据这样的一个对象生成一个实际的DOM

• Template组件

  • 小程序中动态的生成一个模板，通过JS动态生成组件

运行时结构：在实际运行中，react与vue的框架运行在逻辑层，当框架想要实际操作DOM时我们将其换成虚拟DOM，当生成实际DOM时传递给渲染层再根据整个DOM树的结构组成template，生成我们实际要渲染的元素树结构。之后小程序模板会创建实际页面。每次渲染虚拟页表展示实际展现的列表来减少数据传递的数据量。在一些场景下相比小程序原生语法性能会更差。