flutter_inappwebview ^6.0.0加载Shopify商店，Android分享按钮失效

核心原因 #

Android系统里，WebView默认不会自动处理网页的navigator.share()分享API请求，得手动拦截后通过原生Android分享能力实现；而iOS的WKWebView对该API有原生支持，所以能直接触发分享弹窗。

具体修复步骤 #

1. 配置InAppWebView的JS拦截逻辑 #

初始化InAppWebView时开启JS支持，注入自定义JS拦截网页的分享调用，再通过JS通道把数据传给Flutter：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的Shopify商店地址")),
  javascriptMode: JavascriptMode.unrestricted,
  onLoadStop: (controller, url) async {
    // 注入JS重写网页的share方法
    await controller.evaluateJavascript(source: """
      const originalShare = navigator.share;
      navigator.share = function(data) {
        // 把分享数据通过JSChannel传给Flutter
        window.flutter_inappwebview.callHandler('handleShare', JSON.stringify(data));
        return Promise.resolve();
      };
    """);
  },
  javascriptChannels: Set.from([
    JavascriptChannel(
      name: 'handleShare',
      onMessageReceived: (JavascriptMessage message) {
        // 解析分享数据，调用原生分享
        final shareData = jsonDecode(message.message) as Map<String, dynamic>;
        _triggerAndroidShare(shareData);
      },
    ),
  ]),
)

2. 实现Android原生分享功能 #

先在pubspec.yaml添加share_plus依赖：

dependencies:
  share_plus: ^7.0.0

然后编写分享方法：

import 'package:share_plus/share_plus.dart';
import 'dart:convert';

void _triggerAndroidShare(Map<String, dynamic> shareData) {
  String content = '';
  if (shareData['title'] != null) content += '${shareData['title']}\n';
  if (shareData['text'] != null) content += '${shareData['text']}\n';
  if (shareData['url'] != null) content += shareData['url'];
  
  Share.share(content);
}

3. 检查Android权限配置 #

确保AndroidManifest.xml里添加基础权限（分享本身无需特殊权限，但部分旧机型可能需要）：

<uses-permission android:name="android.permission.INTERNET" />
<!-- 可选，适配Android 13以下机型的存储权限 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" />

4. 适配自定义分享逻辑的Shopify主题 #

如果你的Shopify主题用的是自定义分享函数而非标准navigator.share()：

• 用Chrome开发者工具查看分享按钮的点击事件，定位实际触发分享的函数
• 修改注入的JS代码，拦截该自定义函数，再把分享数据传给Flutter

测试验证 #

重新运行项目后，在Android设备上点击Shopify商店的分享按钮，确认系统分享弹窗正常唤起。

内容的提问来源于stack exchange，提问作者Safdar Ali