场景

遇到在企业微信中使用的flutter web页面需要调用打电话的功能。

实现思路

1. 使用flutter插件

url_launcher

使用flutter提供的插件包。直接构建一个对应的通信标签实现。
实际测试中这个插件对flutter web的支持并不是很好，所以没有采用这个技术。

2. 使用h5 <a /> 标签

<!-- 是否默认将数字转换成电话链接 -->
<meta name="format-detection" content="telephone=yes" />
<!-- 创建一个a标签 点击就可以直接进行通信 -->
<a href="tel: xxxx">点击我进行电话</a>

实现方案

因为flutter插件在flutter web中的支持不是特别好，并且在flutter web中没有原生的html a标签的实现。所以采用flutter调用js的方式构建一a标签进行点击实现。

function mackPhoneCall(phoneNumber) {
	const a = document.createElement('a');
	a.setAttribute('href', `tel:${phoneNumber}`);
	a.click();
}

使用flutter直接调用这个js方法，传入需要拨打的电话号码，即可调用电话通信。