WebView2浏览器窗口(预览)

提示:

  • 本模块使用了微软WebView2组件,该组件目前处于预览状态,其API未完全确定,因此本模块也将处于预览状态较长时间,所有的参数和内部实现都有可能会有所改变。
  • 目前需要安装微软Edge预览版本(Canary渠道或Dev渠道)才可正常使用本组件。
  • WebView2组件本身可能还有奇奇怪怪的bug。
  • 在Quicker动作中修改变量名时,JS脚本中使用的Quicker变量名可能无法自动更改。
  • 本文档基于Quicker 1.10.11 版本。



基础

操作类型:

  • 打开网址:打开一个指定的网址,然后继续运行后面的模块。如果指定了“唯一性标识”并且之前已经打开了窗口,则使用已打开的窗口打开网址。
  • 打开网址并加载完成:打开一个指定的网址,等待加载完成,然后继续运行后面的模块。
  • 打开网址并等待窗口关闭:打开指定的网址,等待用户关闭窗口后再继续云心跟后面的模块。
  • 发送消息:使用PostWebMessageAsJson接口向网页发送消息。需要预先在网页中引入处理消息接收的代码。可用于动态更新网页的某些内容。
  • 执行脚本:在网页上下文中执行js代码。使用ExecuteScriptAsync接口。仅在顶层文档中执行(不对iframe执行)
  • 获取窗口状态:获取当前的网址、标题、是否加载完成等信息。
  • 关闭窗口:根据“唯一性标识”关闭之前已打开的窗口。
  • 重新加载/刷新:刷新网页。
  • 停止加载:停止加载网页。



读写quicker变量

Quicker中使用WebView2组件的AddHostObjectToScript接口注入“v" (v表示variables,变量)

异步操作方式:

// 注入的对象
let v = await window.chrome.webview.hostObjects.v;
// 读取变量
let varValue = await v.getVar("变量名");
// 写入变量
await v.setVar("变量名", newValue);

同步操作方式:

// 读取变量
let varValue = chrome.webview.hostObjects.sync.v.getVar("text");
// 写入变量
chrome.webview.hostObjects.sync.v.setVar("text", "Hello world from js code");

示例动作:



读写变量操作支持简单变量(数字/文本以及列表变量)。

词典变量在读取时自动转换为json文本数据。词典变量不支持通过setVar方法写入。



词典变量的操作

在js中无法直接操作词典变量。


为词典变量赋予一个完整的新值

//setDictByJson(变量名, json内容)
chrome.webview.hostObjects.sync.v.setDictByJson("dict", "{a: 1, b: 2}");

为词典的某个key赋值:

//setDictItemValue(词典变量名,键名,值)
chrome.webview.hostObjects.sync.v.setDictItemValue("dict", "c", 3);

获取词典的某个键的值:

// 返回词典的某个键的值getDictItemValue(词典变量名,键名)
var value = chrome.webview.hostObjects.sync.v.getDictItemValue("dict","c");


已知问题

1)在高分辨率屏幕上,窗口初始显示时,浏览器组件可能不能铺满整个屏幕。

image.png


【待编写】



js 交互

https://github.com/MicrosoftEdge/WebViewFeedback/issues/199

https://github.com/MicrosoftEdge/WebViewFeedback/issues/175

AddHostObjectToScript https://docs.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/0-9-488/icorewebview2#addhostobjecttoscript

语雀在语雀上查看