发送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发送的消息
}