flutter webview_flutter 与JavaScript交互

使用webview_flutter iOS需要在xcode工程中info.plist文件添加如果字典

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

webview_flutter与交互
1.通过拦截url的方式

      navigationDelegate: (NavigationRequest navigation) {
        String url = navigation.url;

        if (url.contains("micrpayclient://")) {
          //之前定义的micrpayclient保持不变
          String lStrig = 'micrpayclient://url=';
          int index = url.indexOf(lStrig);
          String subString = url.substring(index + lStrig.length);
          try {
            var dUrl = Uri.decodeComponent(subString);
            launch(dUrl);
          } catch (error) {
            print(error);
          }
          return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
      },

2.通过JavascriptChannel来实现

 WebView(
      initialUrl: widget.url,
      userAgent:
          "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36",
      navigationDelegate: listenWebview,
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (vc) {
        _controller = vc;
        print('webviewUrl = ${widget.url}');
      },
      onPageFinished: (String value) {
        print('webviewUrl = $value');
        _handleNaviData();
      },
      javascriptChannels: [
        JavascriptChannel(
        name: 'tudouApp',//handleName
        onMessageReceived: (JavascriptMessage message) {
          print(message.message);
          //接收到js返回的数据
          //自定义处理
        }),
        JavascriptChannel(
        name: 'JSHandle',//handleName
        onMessageReceived: (JavascriptMessage message) {
          print(message.message);
          //接收到js返回的数据
          //收到js返回并作出应答
         String callbackname = message.message; 
         String data = "收到消息调用了";
         String script = "$callbackname($data)";
         _controller.evaluateJavascript(script);
        }),
      ].toSet(),
    )
posted @   qqcc1388  阅读(3172)  评论(2编辑  收藏  举报
编辑推荐:
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
阅读排行:
· 趁着过年的时候手搓了一个低代码框架
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现
点击右上角即可分享
微信分享提示