反序列化
本节示例可以参考示例文件"CaseStudy\WebViewer\接收消息.Table"的窗口"反序列化"。
本节任务演示了如何在前端发送各种类型的数据，并在Foxtable反序列化得到具体的数据类型。
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>数据类型示例</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px; }
.container { max-width: 600px; margin: 0 auto; }
.btn-group { margin: 20px 0; }
button { margin: 5px; padding: 10px 15px; cursor: pointer; }
.data-card {
background: #f5f5f5;
padding: 15px;
margin: 10px 0;
border-left: 4px solid #0078d4;
}
pre { background: #333; color: #fff; padding: 10px; }
</style>
</head>
<body>
<div class="container">
<h2>发送不同类型的数据</h2>
<div class="btn-group">
<button onclick="sendString()">发送字符串</button>
<button onclick="sendNumber()">发送数字</button>
<button onclick="sendBoolean()">发送逻辑值</button>
<button onclick="sendArray()">发送数组</button>
<button onclick="sendObject()">发送对象</button>
</div>
<div class="data-card">
<div id="output"></div>
</div>
<script>
function sendString() {
const message = "Foxtable 2026";
window.chrome.webview.postMessage(message);
showOutput('字符串',
message);
}
function sendNumber() {
const message = 42.5;
window.chrome.webview.postMessage(message);
showOutput('数字',
message);
}
function sendBoolean() {
const message = true;
window.chrome.webview.postMessage(message);
showOutput('逻辑值',
message);
}
function sendArray() {
const message = ["苹果",
"香蕉",
"橙子",
"葡萄"];
window.chrome.webview.postMessage(message);
showOutput('数组',
JSON.stringify(message, null, 2));
}
function sendObject() {
const message = {
name: "张三",
age: 30,
email: "zhangsan@example.com",
skills: ["VB.NET", "C#", "JavaScript"]
};
window.chrome.webview.postMessage(message);
showOutput('对象',
JSON.stringify(message, null, 2));
}
function showOutput(type, content) {
const output = document.getElementById('output');
output.innerHTML = `
<strong>类型:</strong>
${type}<br>
<strong>内容:</strong><br>
<pre>${content}</pre>
`;
}
</script>
</body>
</html>
]]>.Value
wv.CoreWebView2.NavigateToString(html)
'打开测试页面
提示：postMessage可以直接发送对象，发送前会自动序列化成JSON字符串。
2、WebMessageReceived事件代码：
Dim
message
As
String
= e.WebMessageAsJson
'注意：这里不能去除双引号，因为需要保留
JSON 格式
Dim
result
As
Object
= JsonConvert.DeserializeObject(message)
'
反序列化，来自Newtonsoft.Json库
Select
Case
True
Case
TypeOf
result
Is
String
Dim
v
As
String
= result
MessageBoxA.Show(CExp("收到字符串:{0}",
v))
Case
TypeOf
result
Is
Double
Or
TypeOf
result
Is
Integer
Dim
v
As
Double
= result
MessageBoxA.Show(CExp("收到数字:{0}",
v))
Case
TypeOf
result
Is
Boolean
Dim
v
As
Boolean
= result
MessageBoxA.Show(CExp("收到逻辑值:{0}",
v))
Case
TypeOf
result
Is
JArray
Dim
ja
As
JArray =
CType(result,
JArray)
MessageBoxA.Show(CExp("收到数组，包含{0}个元素",
ja.Count))
Case
TypeOf
result
Is
JObject
Dim
jo
As
JObject =
CType(result,
JObject)
MessageBoxA.Show(CExp("收到对象，类型:{0}",
jo.GetType().Name))
End
Select
提示：Foxtable内置了Newtonsoft.Json库，有兴趣的可自行探索。