WebView2浏览器窗口(预览)

因软件更新较快,部分文档内容与软件最新版本有所出入,请知悉。

提示:

  • 本模块使用了微软WebView2组件,该组件目前处于预览状态,其API未完全确定,因此本模块也将处于预览状态较长时间,所有的参数和内部实现都有可能会有所改变。
  • 组件安装地址:https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/
  • WebView2组件本身可能还有奇奇怪怪的bug。
  • 在Quicker动作中修改变量名时,JS脚本中使用的Quicker变量名可能无法自动更改。
  • 本文档基于Quicker 1.23.11 版本。



基础

操作类型:

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


动作交互

桥接对象


桥接对象用于同动作的其它部分交互,如访问动作中的变量、调用子程序等。

可以通过 window.chrome.webview.hostObjects.v 对象以异步方式访问桥接对象,或者通过 window.chrome.webview.hostObjects.sync.v 以同步方式访问桥接对象。

更多信息可参考微软官方文档


自1.23.5 版本起,可以在js中通过 $quicker 异步方式访问桥接对象,通过 $quickerSync 同步方式访问桥接对象。



读写动作变量

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

异步操作方式:

async function func(){
  // 注入的对象
  let v = await $quicker;
  // 读取变量
  let varValue = await v.getVar("变量名");
  // 写入变量
  await v.setVar("变量名", newValue);
}

同步操作方式:

function funcSync(){
  // 读取变量
  let varValue = $quickerSync.getVar("text");
  // 写入变量
  $quickerSync.setVar("text", "Hello world from js code");
}

示例动作:



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

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



词典变量的操作

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


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

//setDictByJson(变量名, json内容)
$quickerSync.setDictByJson("dict", "{a: 1, b: 2}");

为词典的某个key赋值:

//setDictItemValue(词典变量名,键名,值)
$quickerSync.setDictItemValue("dict", "c", 3);

获取词典的某个键的值:

// 返回词典的某个键的值getDictItemValue(词典变量名,键名)
var value = $quickerSync.getDictItemValue("dict","c");


调用子程序并返回结果

1.23.15+版本。

通过 await $quickerSp(spName, dataObj, callback) 方法调用动作中定义的子程序。

参数:

  • spName: 子程序名称
  • 子程序输入参数对象。每个key对应于子程序中作为输入参数的变量名。
  • 回调函数: function(success, outputObj) 。 success 参数表示是否成功,outputObj 为子程序输出(对象)。 outputObj  的每个key对应子程序的一个输出变量。

注意:传入子程序的输入参数dataObj,和回调的输出参数outputObj都是对象类型

示例:

// 调用子程序:返回原始输入值
    async function testSubprogram(){
      //子程序输入参数,每个key对应子程序的输入变量。 input为子程序的一个输入变量。
        var obj = {input:'Hello Quicker!', age:3};  
      // 调用子程序
            await $quickerSp('subprogram1', obj, (success, data)=>{
        //处理子程序返回结果
                alert('success:' + success + '\n' + data.output); //output为子程序的一个输出变量
            });
    }


【以下方法不建议使用】

也可通过 await $quicker.subprogram(spName, dataJson, boolParam, callback) 方法调用动作中定义的子程序(不推荐)。

参数:

  • 子程序名
  • json序列化后的输入参数值对象。输入参数js对象的每个key对应于子程序中作为输入参数的变量名。
  • 布尔类型的备用参数,请传入false值。
  • 回调函数:function(success, data)。success参数表示是否成功,data参数表示成功时返回的结果(Json序列化后的子程序输出变量的值),出错时返回错误消息。
    • data为子程序各个输出变量名和对应的值的词典的JSON序列化文本
async function testSubprogram(){
        // 为子程序的输入参数构造对象
        var inputParam = {input:'text to process', prop1:3, prop2:'value'};
      // 调用: $quicker.subprogram(子程序名, 输入参数对象的Json序列化文本值, 布尔类型备用参数,回调函数)
        await $quicker.subprogram('子程序名', JSON.stringify(inputParam), false, 
                                (success, data) => { //回调函数,处理
                                                            if (success){
                                    // 子程序调用成功, data = 子程序输出参数的Json序列化后的文本
                                    alert(data)
                                  }else{
                                    // 子程序调用失败
                                    alert('error:' + data);
                                  }
                                                            
                                                        } //end of callback
                               ); //end of subprogram
      
        
    }


注意:进行复杂操作时,请使用异步调用方式(await $quicker.subprogram()...)。同步调用时js会等待结果,可能会造成界面死锁。


示例动作:https://getquicker.net/sharedaction?code=c501debe-7e80-408c-d791-08d856359351


推荐资源

WebView2相关



前端技术相关


示例

参数传递与子程序调用


通过发送消息更新已打开的WebView窗口


语雀在语雀上查看