NativeScript 5.x迁移至6.x后nativescript-webview-interface事件回调失效

我之前在把NativeScript项目从5.x迁移到6.x时，也碰到过一模一样的问题，折腾了好一阵才理清原因，咱们一步步来解决：

核心问题分析 #

NativeScript 6.x对WebView的底层实现做了不少更新——比如Android端默认WebView引擎调整、页面加载事件的触发逻辑变化，而旧版本的nativescript-webview-interface插件没跟上这些改动，再加上事件绑定时机不对，就导致了回调收不到的情况。

具体解决方案 #

1. 先升级插件到适配NS6的版本 #

旧版本插件在NS6下兼容性极差，首先执行升级命令：

npm install nativescript-webview-interface@latest --save

升级后记得清理缓存重新构建，避免旧文件干扰：

rm -rf node_modules platforms hooks
npm install
tns run android/ios

2. 调整事件绑定时机，确保WebView完全就绪 #

NS6里loadFinishedEvent的触发时机和5.x不同，原来在onWebViewLoaded里直接绑定事件，可能WebView的JS环境还没初始化完成。建议把事件绑定移到loadFinishedEvent内部，再配合适当延时：

修改后的代码示例：

const webViewModule = require("tns-core-modules/ui/web-view");
const webViewInterfaceModule = require('nativescript-webview-interface');
let oWebViewInterface;

exports.onWebViewLoaded = function(args) {
  const webview = args.object;
  oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webview, buildSrc());

  webview.on(webViewModule.WebView.loadFinishedEvent, (loadArgs) => {
    // 给WebView留足JS环境初始化时间，延时可根据实际情况调整
    setTimeout(() => {
      oWebViewInterface.on("watchInc", (data) => {
        console.log("event watchInc - 收到数据:", data);
      });

      oWebViewInterface.on("watchEnd", (data) => {
        console.log("event watchEnd - 收到数据:", data);
      });
    }, 500);
  });
}

3. 检查Web端的事件发送逻辑 #

确保Web页面正确引入了插件的JS文件（nativescript-webview-interface.js，位于node_modules/nativescript-webview-interface/www/，需要复制到你的Web资源文件夹），并且在页面就绪后再发送事件：

Web端代码示例：

<script src="nativescript-webview-interface.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
  // 示例：点击按钮时发送事件
  document.getElementById('trigger-btn').addEventListener('click', () => {
    window.nsWebViewInterface.emit("watchInc", { id: 123, status: "active" });
  });
});
</script>

4. 手动开启Android WebView的JS支持（可选） #

虽然插件会自动处理，但NS6的WebView默认配置可能有变化，手动添加这一步确保功能正常：

exports.onWebViewLoaded = function(args) {
  const webview = args.object;
  // Android端单独配置
  if (webview.android) {
    webview.android.getSettings().setJavaScriptEnabled(true);
    webview.android.getSettings().setDomStorageEnabled(true); // 用到本地存储时建议开启
  }
  // ... 其他初始化代码
}

5. 调试技巧：监听所有事件排查问题 #

如果还是收不到，可以先监听所有事件，确认事件是否真的传到了Native端：

oWebViewInterface.on("*", (eventName, data) => {
  console.log("捕获到所有事件:", eventName, data);
});

如果能看到日志，说明是特定事件的绑定问题；如果看不到，大概率是Web端没正确发送事件，或者插件初始化有问题。

总结 #

最常见的问题就是插件版本不兼容和事件绑定时机过早，先升级插件，再调整绑定逻辑，基本就能解决NS6下的事件接收问题。

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