小程序动态化

动态化

Web 应用具有天然的动态化特性，即在应用上线后，可通过配置数据接口，实时更改页面布局及交互：

• HTML 可以通过 Ajax 获取后，使用 DOM API 变更 DOM 实时生效；
• CSS 可以通过动态添加 style 标签实时更新；
• JS 既可以通过添加 script 标签拉取执行，也可以通过接口获取 JS 文本，再使用 eval/Function 等 API 执行。

小程序动态化存在的问题：

• Runtime 接口缺失（没有开放 eval/Function 功能），导致无法直接执行交互脚本。
• 桥的缺失，导致无法直接操作更新视图元素。

为了解决这两个问题，需要开发：

• JSVM —— 在小程序端能够执 JS AST 的 runtime;
• 渲染模板引擎 —— 能够将传入的模板布局配置还原成小程序页面。

架构图

image.png

处理过程解析

1. 动态组件
（1）动态组件设置case属性后，通过接口获取云端代码（在远端编写的组件代码），dom即wxml-ast， jscode即js-ast；
（2） 使用内置jsvm 解析 js-ast:
（3） 解析wxml-ast，将传入的模板布局配置还原成小程序页面。参照上图需要解决两个问题：递归渲染vnode，绑定交互事件。

2.如何递归渲染，绑定交互事件
动态组件其内部有一个模板，把所有标签动写成一个template。例如：