修复flutter webview上的net::err_unknown_url_scheme whatsapp链接

Question

我想知道如何在Flutterwebview应用程序中启动WhatsApp，或者在Flutter中从浏览器启动WhatsApp.我使用了许多代码，没有错误，但它们不起作用。Am使用mac m1和vscode

import 'package:coinpaga/Connectivity_Provider.dart';
import 'package:coinpaga/services/local_notification_service.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'homepage.dart';
import 'package:hexcolor/hexcolor.dart';
import 'package:colorful_safe_area/colorful_safe_area.dart';
///  Receive message when app is in background solution for on 
message
Future<void> backgroundHandler(RemoteMessage message)async{
print(message.data.toString());
print(message.notification!.title);
}
void main() async {
WidgetsFlutterBinding.ensureInitialized();
LocalNotificationServices.initialize();
await Firebase.initializeApp();
FirebaseMessaging.onBackgroundMessage(backgroundHandler);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) => ConnectivityProvider(),
child: HomePage(),
)
],
child:MaterialApp(
title: 'coinpaga',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: ColorfulSafeArea(
color: HexColor("#2e2a42"),
top: true,
bottom: false,
left: false,
right: false,
child: HomePage(),
)
),
);
}
}

主页.dart

import 'package:coinpaga/Connectivity_Provider.dart';
import 'package:coinpaga/no_internet.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:provider/provider.dart';
class HomePage extends StatefulWidget {
// ignore: unused_field
final _flutterwebview = FlutterWebviewPlugin();
HomePage({ Key? key }) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
void initState() {
super.initState();
Provider.of<ConnectivityProvider>(context, listen: 
false).startMonitoring();
}
@override
Widget build(BuildContext context) {
return pageUI();
}
@override
void dispose() {
_flutterwebview.dispose();
super.dispose();
}
}
Widget pageUI() {
return Consumer<ConnectivityProvider>(
builder: (context, model, child) {
return model.isOnline 
? WebviewScaffold(
url: 'https://coinpaga.com',
withLocalStorage: true,
withJavascript: true,
scrollBar: false,
initialChild: Center(child: Text('Loading...')),
) : NoInternet();
},
);
}
// ignore: camel_case_types
class _flutterwebview {
static void dispose() {}
}

请帮我查一下。

Answer 1

String text = "Hello World !! Hey There";
String url = "https://wa.me/?text=${Uri.encodeFull(text)}";
if (await canLaunchUrl(Uri.parse(url))) {
await launchUrl(Uri.parse(url),
mode: LaunchMode.externalApplication);
}

Answer 2

首先，添加url_launcher，然后使用此代码在flutter webview上启动whatsapp并工作。

WebView(
initialUrl: getUrl(_url),
javascriptMode: JavascriptMode.unrestricted,
navigationDelegate: (NavigationRequest request) async {
if (request.url
.startsWith('https://api.whatsapp.com/send?phone')) {
print('blocking navigation to $request}');
List<String> urlSplitted = request.url.split("&text=");

String phone = "0123456789";
String message =
urlSplitted.last.toString().replaceAll("%20", " ");

await _launchURL(
"https://wa.me/$phone/?text=${Uri.parse(message)}");
return NavigationDecision.prevent;
}
print('allowing navigation to $request');
return NavigationDecision.navigate;
},

)

_launchURL(String url) async {
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}

Answer 3

您可以使用url_launcher来启动url。

您可以为https://api.whatsapp.com/send/?phone=(phone_number)提供启动URL。

对于启动WhatsApp网站，请使用launch('https://api.whatsapp.com/send/?phone=(phone_number)')

请确保您提供不带(+(的国家/地区代码。

Answer 4

实际上我使用的代码是：

onPressed: () async {
String appUrl;
String phone = '[phone]xxx'; // phone number to send the message to
String message = 'Hi guys,'; // message to send
if (Platform.isAndroid) {
appUrl = "whatsapp://send?phone=$phone&text=${Uri.parse(message)}"; // URL for Android devices
} else {
appUrl = "https://api.whatsapp.com/send?phone=$phone=${Uri.parse(message)}"; // URL for non-Android devices
}
// check if the URL can be launched
if (await canLaunchUrl(Uri.parse(appUrl))) {
// launch the URL
await launchUrl(Uri.parse(appUrl));
} else {
// throw an error if the URL cannot be launched
throw 'Could not launch $appUrl';
}
},

但非常重要的是，您需要将QUERY_ALL_PACKAGES权限添加到应用程序的AndroidManifest.xml文件中，才能在Android 12或更高版本设备上正常工作。此权限允许您的应用程序查询设备上所有已安装的软件包，包括WhatsApp。

在AndroidManifest.xml文件的manifest标记中添加以下行：

<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" />

Answer 5

这适用于我使用包url_launcher

launchUrl(
Uri.parse(
"https://api.whatsapp.com/send/?phone=YOUR_PHONE_NO"),
mode: LaunchMode.externalNonBrowserApplication,
),

Answer 6

要启动url，可以从pub添加最新版本的url_launcher包。

var phonenumber = snapshot.data?.whatsApp ?? "";

if (phonenumber != "") {
phonenumber = phonenumber.replaceAll("+", "");

var whatsAppUrl = Uri.parse("https://wa.me/$phonenumber?text=Hello",);
if (await launchUrl(whatsAppUrl, mode: LaunchMode.externalApplication)) {
throw Exception('Could not launch ${whatsAppUrl.path}');
}
}