如何从HTML/Javascript侧传递数据更新Xojo对象？

实现核心逻辑 #

Xojo的WebHTMLViewer提供了原生的JS<->Xojo双向通信能力，你只需要在JS端拖拽事件触发时调用Xojo暴露的通信方法，即可把经纬度数据同步到Xojo后端。

步骤1：修改HTML端谷歌地图JS逻辑 #

找到你现有代码中标记拖拽结束的回调函数，新增数据发送逻辑：

// 原有拖拽结束事件逻辑
marker.addListener('dragend', () => {
  const position = marker.getPosition()
  const lat = position.lat()
  const lng = position.lng()
  // 原有更新页面经纬度文本框逻辑
  document.querySelector('#latInput').value = lat
  document.querySelector('#lngInput').value = lng
  // 新增：向Xojo端发送数据，第一个参数为自定义事件名，第二个为要传递的数据
  Xojo.webview.send('LocationUpdate', JSON.stringify({latitude: lat, longitude: lng}))
})

步骤2：Xojo端添加数据接收逻辑 #

选中你项目中加载地图的WebHTMLViewer控件，为其添加MessageReceived事件处理代码：

// 匹配JS端发送的事件名
If Name = "LocationUpdate" Then
  // 解析JS端传递的JSON数据
  Dim locData As New JSONItem(Data)
  Dim receivedLat As Double = locData.Value("latitude")
  Dim receivedLng As Double = locData.Value("longitude")
  // 直接赋值给Xojo端的界面控件或业务变量即可
  XojoLatTextField.Text = receivedLat.ToString
  XojoLngTextField.Text = receivedLng.ToString
End If

兼容与异常处理要点 #

• 若你使用2019r2之前的Xojo版本，JS端调用方法替换为Xojo.triggerServerEvent("你的HTMLViewer控件名", "LocationUpdate", JSON.stringify(数据))，对应在WebHTMLViewer的HandleJavaScriptEvent事件中接收数据
• 传递数据前先序列化为JSON字符串，可避免特殊字符、格式错误导致的传输失败
• 建议在HTML的window.onload事件中初始化地图及拖拽监听逻辑，确保页面加载完成后再执行通信操作

内容的提问来源于stack exchange，提问作者John