Flutter中WhatsApp跳转报错及WebView相关问题求助

点击「联系卖家」按钮后，页面跳转至网页并显示Web page not available，报错信息为：net::ERR_UNKNOWN_URL_SCHEME，对应链接为whatsapp://send/?phone=923424627671&text=Hi%2C%20I%20am%20interested%20in%20the%20product%3A%0A%0AProduct%20Name%3A%20Electric%20%0AProduct%20Image%3A%20https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fecommerce-1b43e.appspot.com%2Fo%2Fimages1677497513119374%3Falt%3Dmedia&type=phone_number&app_absent=0。

控制台测试时可正常跳转至WhatsApp网页并发送消息，但真机运行时出现上述错误，同时有以下疑问：

• 是否必须添加WebView？
• App内点击返回时，WhatsApp网页仅短暂显示无法常驻，原因是什么？
• 出现警告：W/chromium( 8785): [WARNING:display_webview.cc(31)] WebView overlays are enabled!

相关Flutter代码如下：

消息构建与跳转逻辑 #

String buildWhatsAppMessage() {
  String message = 'Hi, I am interested in the product:\n\n';
  message += 'Product Name: ${widget.productName}\n';
  message += 'Product Image: ${widget.url}\n';
  message += 'Product Price: ${widget.productPrice}\n\n';
  message += 'Please let me know more about it.';
  return Uri.encodeFull(message);
}
void launchWhatsApp() async {
  String phoneNumber = 'https://wa.me/${widget.phonenumber}?text=${buildWhatsAppMessage()}';
  if (await canLaunchUrl(Uri.parse(phoneNumber))){
   launchUrl(Uri.parse(phoneNumber));
 } else {
   showDialog(context: context,
       builder: (BuildContext context) {
         return AlertDialog(
           title: Text('Seller has no WhatsApp number'),
           content: Text('Unfortunately, the seller does not have a WhatsApp account.'),
           actions: [
             ElevatedButton(
               child: Text('OK'),
               onPressed: () {
                 Navigator.of(context).pop();
               },
             ),
           ],
         );
       });
 }
}

按钮组件代码 #

RoundedLoadingButton(
  child: Text(
    'Contact with seller',
    style: TextStyle(color: Colors.white),
  ),
  controller: contact,
  resetDuration: Duration(seconds: 3),
  resetAfterDuration: true,
  width: 200,
  height: 50,
  color: Colors.blue,
  successColor: Colors.blue,
  borderRadius: 10,
  elevation: 3,
  onPressed: _isAddToContactLoading
      ? null
      : () async {
    setState(() {
      _isAddToContactLoading = true;
    });
  launchWhatsApp();
    setState(() {
      _isAddToContactLoading = false;
    });
    _addCartController.success();

  },
),

1. 真机net::ERR_UNKNOWN_URL_SCHEME报错解决 #

你代码里用的https://wa.me/链接，真机跳转时系统会自动尝试唤起WhatsApp App（转换为whatsapp://协议），但你的应用没配置允许处理该协议的权限，或者url_launcher包的配置不全。

具体操作：

• 确保url_launcher是最新版本，然后在Android的AndroidManifest.xml中添加权限配置：

  <queries>
    <package android:name="com.whatsapp" />
    <package android:name="com.whatsapp.w4b" /> <!-- 适配WhatsApp Business -->
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="https" />
      <data android:scheme="whatsapp" />
    </intent>
  </queries>
  

• iOS端在Info.plist中添加：

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

• 修改launchUrl调用，指定跳转模式优先唤起外部App：

  await launchUrl(
    Uri.parse(phoneNumber),
    mode: LaunchMode.externalApplication, // 优先打开外部App，不会在内部WebView加载
  );
  

2. 是否必须添加WebView？ #

完全不需要。url_launcher本身就能直接唤起WhatsApp App或打开WhatsWeb网页，之前的报错是协议权限没配置，和WebView无关。

3. 返回时WhatsApp网页无法常驻的原因 #

问题出在跳转模式上，默认的LaunchMode可能是在App内部的临时WebView中打开网页，返回时这个临时WebView会被销毁，所以网页只会短暂显示。

改用LaunchMode.externalApplication后，网页会在系统默认浏览器中打开，WhatsApp App也是作为外部应用唤起，返回时就能正常回到你的Flutter App，不会出现网页一闪而过的情况。

4. WebView overlays are enabled警告处理 #

这个警告是因为当前用的是App内部的WebView加载网页，启用了覆盖层功能。只要改成外部应用跳转的模式，不在App内加载WebView，这个警告就会自动消失。如果确实需要在App内打开WebView，可以检查WebView的配置项，关闭相关的overlay设置。

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