如何使用颤振在 WebView 中获取支付网关响应

Question

使用颤振在 webview 中加载支付网关表单。当我单击付款按钮时，我无法获得响应成功或失败。如果它成功移动到主屏幕。

对于原生移动应用，使用 addJavascriptInterface 获取响应。对于颤振，在哪里实现 addJavascriptInterface 回调？

谁能帮帮我？我在过去 2 天被卡住了。

  WebView(              
        initialUrl:widget.webpageurl,
          javascriptMode: JavascriptMode.unrestricted,
        javascriptChannels: Set.from([
          JavascriptChannel(
              name: 'ReceiveIframeResponse',
              onMessageReceived: (JavascriptMessage message) {
                print('ReceiveIframeResponse${message.message}');
                var jsonData = jsonDecode(message.message);
                print('jsonData $jsonData');
                if(jsonData['status'] == 'CANCELLED'){
                  // Your code
                }else if(jsonData['status'] == 'SUCCESS'){
                  // Your code
                }
              })
        ]),
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
          onProgress: (int progress) {
            print("WebView is loading (progress : $progress%)");

          },
          onPageFinished: (finish) {
            setState(() {
              isLoading = false;
            });

            print("WebView is onPageFinished $finish");


          },

        onPageStarted: (data){
          print("WebView is onPageStarted $data");
        },

      ),

Answer 1

你可以像这样使用javascript接口回调，

WebView(
      initialUrl: widget.webpageurl,
      javascriptMode: JavascriptMode.unrestricted,
      javascriptChannels: Set.from([
        JavascriptChannel(
            name: 'messageHandler',
            onMessageReceived: (JavascriptMessage message) {
              print(message.message);
              var jsonData = jsonDecode(message.message);
              if(jsonData['status'] == 'CANCELLED'){
                // Your code
              }else if(jsonData['status'] == 'SUCCESS'){
                // Your code
              }
            })
      ]),
      onWebViewCreated: (WebViewController webViewController) {
        
      },
    );

您可以像这样在包含回调函数的 HTMl 中使用此脚本，

<script type="text/javascript">  
    function myCallback(status) {
    var statusData = JSON.stringify(status);
        console.log(statusData)
        messageHandler.postMessage(statusData);
    }
</script>