渲染层 API（wad.render.*）

渲染层脚本写在：

html

<script type="text/wad-render">
  // 这里运行在当前页面的 XWeb 上下文
  // 有 DOM，没有 wx
</script>

注入是短连接：用完即断，页面切换或出现新 target 时自动重注入。同一个 target 同时只允许一个调试器，冲突会自动重试或切换。

wad.render.dom(fn)

拿到真实页面的 document，随便操作：

wad.render.dom(function (doc) {
  const banner = doc.createElement('div');
  banner.textContent = '⚡ 已注入';
  banner.style.cssText = 'position:fixed;top:6px;right:6px;z-index:99999;'
    + 'padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.7);color:#fff;font-size:12px';
  doc.body.appendChild(banner);
});

wad.render.eval(expr)

在页面上下文执行表达式并返回值：

// 渲染层内：同步返回
const title = wad.render.eval('document.title');

// 面板：Promise
const len = await wad.render.eval('document.body.innerText.length');

wad.dom 快捷方法

渲染层内可用：

wad.dom.query('#user-name');            // 查询元素
wad.dom.text('#user-name', '新文本');    // 改文本
wad.dom.create('div');                  // 创建元素

清理纪律（必须）

页面切换会重新注入，但停用 / 卸载不会自动还原你改过的 DOM：

let banner = null;

wad.render.dom(function (doc) {
  banner = doc.createElement('div');
  banner.textContent = 'demo';
  doc.body.appendChild(banner);
});

wad.on('detach', function () {
  if (banner && banner.parentNode) banner.parentNode.removeChild(banner);
  banner = null;
});

一定要写 detach

留下脏 DOM，用户关掉插件之后页面还是乱的。这是插件被差评的第一原因。

完整示例：高亮所有图片

html

<script type="text/wad-render">
  let marked = [];
  wad.render.dom(function (doc) {
    doc.querySelectorAll('img').forEach(function (img) {
      if (img.dataset.wadMarked) return;
      img.dataset.wadMarked = '1';
      img.style.outline = '2px solid #2FD87F';
      marked.push(img);
    });
  });

  wad.on('detach', function () {
    marked.forEach(function (img) {
      img.style.outline = '';
      delete img.dataset.wadMarked;
    });
    marked = [];
  });
</script>

和逻辑层协作

渲染层没有 wx，但可以调逻辑层的 Skill。注意参数要放在数组里：

// 无参数
wad.logic.call('cart.items').then(function (items) {
  document.querySelector('#count').textContent = items.length;
});

// 有参数：第二个参数是数组
wad.logic.call('add', [1, 2]).then(function (sum) {
  wad.log('1 + 2 = ' + sum);
});

wad.logic.emit(name, data) 则是给逻辑层发事件：

wad.logic.emit('dom-ready', { title: document.title });

反过来，逻辑层可以把结果通过 wad.emit 推给渲染层：

// 逻辑层
wad.emit('cart:update', { count: 3 });

// 渲染层
wad.on('cart:update', function (d) {
  document.querySelector('#count').textContent = d.count;
});

资源与样式

渲染层跑在 WebView 里，支持 fetch、WebAssembly、动态样式：

wad.asset('demo.wasm');   // → /v1/plugins/<id>/file/demo.wasm

wad.loadWasm('demo.wasm').then(function (m) {
  wad.log('wasm ok', m.exports);
});

wad.loadCss('style.css').then(function () {
  wad.log('css injected');
});

wad.loadScript('helper.js').then(function (v) {
  wad.log('helper', v);
});

详见资源与 WASM。

渲染层没有的东西

没有 wad.storage、没有 wad.http、没有 wad.off。需要持久化或请求，请交给逻辑层或面板。

注意

渲染层不能发 HTTP，要请求请让逻辑层或面板代发；
页面 DOM 可能随时重建（小程序 setData），监听器要容错；
不要在渲染层跑重计算，会掉帧。

渲染层 API（wad.render.*） ​

wad.render.dom(fn) ​

wad.render.eval(expr) ​

wad.dom 快捷方法 ​

清理纪律（必须） ​

完整示例：高亮所有图片 ​

和逻辑层协作 ​

资源与样式 ​

注意 ​

下一步 ​