更好的方式

不管是单向通讯还是双向通讯,只要是Foxtable端发起的通讯,我都更倾向用ExecuteScriptAsync调用前端js函数,通过参数传递消息给前端,同时通过js函数的返回值接收前端返回的消息,做到传递和接收都在同一行代码完成。

本节示例可以参考示例文件"CaseStudy\WebViewer\发送消息.Table"的窗口"双向通讯"。

1、窗口的AfterLoad事件代码:

'''Async
Dim
wv As WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
Dim html As String = <![CDATA[
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JSON
参数演示</title>
    <style>
        body { font-family: 'Microsoft YaHei'; padding: 20px; }
        .result { background: #f0f0f0; padding: 15px; border-radius: 5px; margin-top: 20px; }
    </style>
</head>
<body>
    <h2>JSON
参数传递演示</h2>
    <p>
前端定义一个函数,接收一个JSON对象参数</p> 
    <div id="result" class="result">
等待调用...</div> 
    <script>
        //
一个简单的函数,接收JSON参数
        function showEmployeeInfo(employee) {
            let message = `
收到JSON参数:\n` +
                         `
姓名:${employee.name}\n` +
                         `
年龄:${employee.age}\n` +
                         `
薪水:${employee.salary}\n` +
                         `
职务:${employee.title || ''}`;
                        //
显示在页面上
            document.getElementById('result').innerText = message;          

            // 返回给调用方
            return `
你好,${employee.name},你的薪水是${employee.salary}`;
        }      

    </script>
</body>
</html>
]]>
.Value
wv.NavigateToString(html)

这个页面的js脚本定义了一个函数showEmployeeInfo,其参数employee是一个json对象

2、Foxtable调用这个函数的参考代码为:

'''Async
Dim
wv As WebViewer = e.Form.Controls("WebViewer1").WebViewer 
' 这里用ExpandoObject,你用匿名对象、JObject或字典都是可以的

Dim
emp As Object = New ExpandoObject()
emp.name =
"张三"
emp.age = 30
emp.salary = 8500.50
emp.title =
"工程师" 
Dim
jsonEmp = JsonConvert.SerializeObject(emp) ' 序列化为JSON字符串
Dim
js = CExp("showEmployeeInfo({0});", jsonEmp) ' 调用前端函数,传递JSON参数
Dim
result As String = Await wv.ExecuteScriptAsync(js) '消息的传递和接收只需一行代码
result = result.Trim(
"""") '前端函数返回的字符串是JSON格式,有双引号,使用前必须去掉,切记
MessageBoxA.Show(
"函数返回: " & result, "调用结果")


本页地址:http://www.foxtable.com/webhelp/topics/6372.htm