Flutter使用url_launcher打开WhatsApp跳转浏览器报错如何解决

问题现象 #

使用url_launcher插件实现点击按钮唤起WhatsApp发消息功能时，点击按钮会重定向到浏览器并触发报错，相同链接手动复制到系统浏览器访问可正常打开，仅应用内触发时出现异常。

原有实现代码 #

按钮组件代码 #

ElevatedButton(
  onPressed:() {
    launchWhatsapp(phoneNum,message);
  },
  child: Text(
    "Message the Buyer",
    style: TextStyle(
      fontWeight: FontWeight.w400
    ),
  ),
),

自定义唤起方法代码 #

launchWhatsapp(String number,String text) async{
  String url = "https://wa.me/${number}";
  if(await canLaunchUrlString(url)){
    await launchUrlString(url);
  }
}

问题根因 #

1. 未配置安卓/iOS端的应用查询白名单，系统无法识别已安装的WhatsApp应用，自动fallback到浏览器打开
2. 调用打开链接方法时未指定打开模式，默认使用应用内WebView加载链接，wa.me链接会检测运行环境，在应用内WebView环境下直接拦截报错
3. 原有逻辑未拼接传入的text消息参数，也未对电话号码做格式清洗、对预填消息做URL编码，容易触发链接校验失败

修复步骤 #

• 配置平台端白名单
  • 安卓端：打开路径android/app/src/main/AndroidManifest.xml，在<manifest>节点下、<application>标签前添加如下配置：

    <queries>
        <package android:name="com.whatsapp" />
        <!-- 适配WhatsApp商业版 -->
        <package android:name="com.whatsapp.w4b" />
    </queries>
    

  • iOS端：打开路径ios/Runner/Info.plist，在根<dict>节点下添加如下配置：

    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>whatsapp</string>
    </array>
    

• 修正唤起逻辑代码
  替换原有launchWhatsapp方法为如下实现，核心是指定打开模式为外部应用、清洗拼接合法的URL参数：

  import 'package:url_launcher/url_launcher.dart';
  
  Future<void> launchWhatsapp(String number, String text) async {
    // 清洗电话号码，移除所有非数字字符
    final cleanPhone = number.replaceAll(RegExp(r'[^0-9]'), '');
    // 对预填消息做URL编码
    final encodeMsg = Uri.encodeComponent(text);
    // 拼接合法的wa.me链接
    final waUri = Uri.parse('https://wa.me/$cleanPhone?text=$encodeMsg');
  
    if (await canLaunchUrl(waUri)) {
      await launchUrl(
        waUri,
        // 关键配置：强制唤起外部对应App打开，不走应用内WebView
        mode: LaunchMode.externalApplication,
      );
    }
  }
  

• 依赖检查：确保pubspec.yaml中引入的url_launcher版本为6.0及以上稳定版本，过低版本的API逻辑存在兼容问题。

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