flutter inappwebview 不在控制台上打印

Question

我正在建立网站和 flutter 之间的通信我想在按钮单击时触发消息，我已经实现了下面的代码。

 <button onclick="buttonClick()" type="button">Cancel</button>

<script>

        function buttonClick() {

       window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {

             window.flutter_inappwebview.callHandler('cancelbuttonState', 1, true,['msg','CancelbuttonClicked'], {test:'Go-Back'}).then(function(result) {
            
             alert("Hello! Cancel Buttton clicked!!");
              console.log('Hello! Cancel Buttton clicked!!');

             });
           });
          
         }
       </script>

在 flutter 方面，我实现了以下获取消息

controller.addJavaScriptHandler(
                    handlerName: "cancelbuttonState",
                    callback: (args) async {
                      print('Cancel Button clicked');
              
                      return args.reduce((curr, next) => curr + next);
                    });

但 JavaScript 和 app dint 都给我控制台打印谢谢。

Answer 1

您在取消 function 的主体内执行以下行为时已晚。 您需要更早地添加侦听器才能注册回调。

换句话说，你正在监听一个已经完成的事件。

window.addEventListener("flutterInAppWebViewPlatformReady" .....

以与此类似的方式重新组织您的代码：

<button onclick="buttonClick()" type="button">Cancel</button>
<script>
    isAppReady = false;
    window.addEventListener("flutterInAppWebViewPlatformReady", function (event) {
        isAppReady = true;
    });
    function buttonClick() {
        if (isAppReady) {
            window.flutter_inappwebview.callHandler('cancelbuttonState', 1, true, ['msg', 'CancelbuttonClicked'], { test: 'Go-Back' }).then(function (result) {
                alert("Hello! Cancel Buttton clicked!!");
                console.log('Hello! Cancel Buttton clicked!!');
            });
        }
    }
</script>