小程序动态化

动态化

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。例如：<template is="button">.当拿到远端的dom的ast后，递归渲染每一个标签。样式是通过style添加到每个标签上的。

3.内置jsvm
抽象语法树是由编译器（complier）在语法分析阶段产生（由 parser 解析生成）。参考ref2。
ESTree：js-ast 使用的AST标准；
@babel/parser : 将js 转为AST；
jsvm：解释执行AST；

主要代码流程：

dynamic组件设置case属性后，会触发observer，调用init方法：

init {

  const vm = getVm(); // 获取虚拟机对象

  const vdom = new VDOM(); // 初始化虚拟dom对象

  _init： getData（ 获取云端代码） => bindScope（ 绑定js执行上下文） => evalData（ 解释执行js） => setData(执行diff， 更新视图层)

  reload： getData => evalData => setData

  bindScope {

    scope = this[SCOPE] = getScope(context); // 生成一个新作用域，包含context中的所有对象；

  }

  evalData {

    comp[TPL] = dom; // 缓存云端wxml-ast

    vm.runInScope(_scope, jscode.type ? jscode : (data.jscode = inflate(jscode))); //  在提供的Scope下解释执行AST代码～

  }

  setData {

    const setData = (obj ? : Partial < DynamicContext > , callback ? : any) => {
      Object.assign(context.data || (context.data = {}), obj); // 更新当前的context
      injectIntoScope(scope, obj); // 更新当前模板的作用域
      ​
      callback && cachedActions.push(callback); // 缓存callback队列
      flush(); // flush setData
      comp[V_DOM] = vdom; // 缓存本次vdom
    };
    flush {

      vdom.calc(comp[TPL], scope); //  依据模板和当前作用域，数据内联后生成虚拟dom

      const diffNode = diff(vdom.vnodes, comp.data.config, 'config'); // diff算法：comp.data.config是上一次的vdom，生成diffnode

      comp.setData(diffNode, callBackFun); //  调用微信的setData方法，diffnode会在小程序渲染层解析最后更新视图，这部分代码参考core.wxml

    }
  }
}