Flutter中使用WebView内打开scheme链接调用其他程序

最新推荐文章于 2024-08-27 07:16:34 发布

后来的路

最新推荐文章于 2024-08-27 07:16:34 发布

阅读量1.7k

点赞数

分类专栏：报错本 flutter 文章标签： flutter webview scheme

本文链接：https://blog.csdn.net/qq_33950912/article/details/116407592

版权

报错本同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

flutter

6 篇文章 0 订阅

订阅专栏

本文介绍了一个在Flutter中使用flutter_webview_plugin插件创建网页领取淘宝优惠券页面的问题。当点击商品后，WebView未能正确处理scheme链接以启动淘宝App。为解决此问题，作者引入了url_launcher插件，监听WebView的url变化，检测到scheme链接时，阻止WebView加载并使用url_launcher打开链接，从而实现了正常跳转。

摘要由CSDN通过智能技术生成

项目场景：

最近在写一个领淘宝优惠劵的页面，逻辑是点击商品后，在内部的WebView 显示，显示页面会自动打开scheme链接来尝试启动淘宝app，

问题描述：

因为flutter没有自带的webView控件，这里使用插件来显示页面

flutter_webview_plugin: ^0.3.11

@override
Widget build(BuildContext context) {
	var webViewTitle = "领券中...".obs;
	FlutterWebviewPlugin()
        .onStateChanged
        .listen((WebViewStateChanged st) async {
      String title =
          await FlutterWebviewPlugin().evalJavascript("window.document.title");
      title = title.replaceAll("\"", "");
      if (!(title == "")) {
        webViewTitle.value = title;
      }
    });

    var url = Get.arguments; // 获取传递过来的 淘宝  coupon_share_url 链接
    return WebviewScaffold(
      url: url,
      withZoom: true,
      withJavascript: true,
      userAgent:
          "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
      appBar: AppBar(
        title: Obx(() => Text(webViewTitle.value)),
      ),
    );
  }

使用后页面显示正常，但是却不能正常打开scheme ，出现网页无法打开位于 tbopen://m.taobao.com … ,这样的问题

解决方案：

引入 url_launcher

url_launcher: ^6.0.3

   FlutterWebviewPlugin().onUrlChanged.listen((String url) async {
      if (!(url.startsWith("http:") || url.startsWith("https:"))) {
        await FlutterWebviewPlugin().stopLoading();
        await FlutterWebviewPlugin().goBack();  
        await launch(url); //use url launcher plugin
      }
    });