小程序动态化

动态化

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

    }
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容