发送JSON消息

如果你只需要发送JSON消息,那么用PostWebMessageAsJson方法更简单。

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

这个简单体现在前端收到消息之后不需要解析,可以直接使用,也就是说可以少一个解析的步骤:

<script>
    window.chrome.webview.addEventListener('message', function(event) {
        const jsonData = event.data; // event.data直接就是解析好的json对象,不需要再解析一次了.   
    });
</script>
 

1、发送按钮代码:

Dim wv As WebViewer = e.Form.Controls("WebViewer1").WebViewer
Dim
jo As New JObject
jo(
"Id") = 2002
jo(
"Title") = "复杂消息"
jo(
"Items") = New JArray({"Access", "Foxtable", "Excel"})
wv.CoreWebView2.PostWebMessageAsJson(jo.ToString())

可以看到,发送消息的代码基本一样,只是将PostWebMessageAsString换成了PostWebMessageAsJson

2、窗口的AfterLoad事件代码:

'''Async
Dim wv As WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing) '初始化浏览器
'
定义测试页面
Dim
html As String =<![CDATA[
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>
发送消息</title>
    <style>
        #msgContainer { margin: 20px 0; padding: 10px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <h3>Foxtable
发来的消息:</h3>
    <div id="msgContainer"></div>
    <script>
        window.chrome.webview.addEventListener('message', function(event) {
            const jsonData = event.data; // event.data
直接就是解析好的json对象,不需要自己解析
            const container = document.getElementById('msgContainer');
            container.innerHTML += `
                <div style="margin: 5px 0; color: #0066cc;">
                    PostWebMessageAsJson
发送的Json消息,无需解析,可直接使用:ID=${jsonData.Id},标题=${jsonData.Title},数组=${jsonData.Items?.join(',') || ''}
                </div>
            `;
        });
    </script>
</body>
</html>
]]>
.Value
wv.CoreWebView2.NavigateToString(html)
'打开测试页面

提示

如果你PostWebMessageAsString和PostWebMessageAsJson都用了,可以在前端通过消息类型判断后端是用什么方式发送的:

const jsonData = event.data;
if (typeof jsonData === 'string') {
    //
通过PostWebMessageAsString发送的消息
}
else {
    //通过
PostWebMessageAsJson发送的消息
}


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