uni-app项目实战笔记9--使用ifdef条件编译实现多端匹配和联系客服功能

本篇笔记记录实现上一篇笔记中的联系客服功能。

一、联系客服

在联系客服部分增加一个按钮实现点击拨打电话或弹出联系客服。关于按钮可查看uniapp官方文档：button | uni-app官网。关于button有一个重要属性open-type,可配置的属性值有一项contact:

使用示例：

<button open-type="contact">联系客服</button>

如果要想用户在使用小程序时点击弹出客服聊天窗口，需要到小程序后台配置客服人员，这里以微信小为例进行说明：

1.打开微信小程序管理后台：微信公众平台；

2.依次点击左侧菜单栏中的“基础功能”、“客服”，在弹出的窗口中输入微信号点击确定完成绑定

最后点击下方箭头弹出客服二维码，使用微信扫码就可以进行客服聊天管理了。

二、ifdef条件编译

如果使用H5访问，是打不开微信客服聊天窗口的，可以考虑点击联系客服触发拨打电话这样的操作。那么我们就需要根据用户访问的终端是小程序还是H5进行差异化编译。uniapp为我们提供的ifdef条件编译可实现这一需求。关于uniapp条件编译可访问官方文档：条件编译处理多端差异 | uni-app官网

用法：

 下面使用条件编译实现不同访问终端的差异化编译：

<view class="row" >
	<view class="left">
		<uni-icons type="chatboxes-filled" size="20" color="#28b389"></uni-icons>
		<view class="text">联系客服</view>
	</view>
	<view class="right">
		<view class="text"></view>
		<uni-icons type="right" size="15" color="#aaa"></uni-icons>
	</view>
	<view >
		<!-- #ifdef MP -->
		<button open-type="contact">联系客服</button>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<button @click="clickContact">拨打电话</button>
		<!-- #endif -->
		
	</view>
</view>

在上面的代码中引入2个button，button使用uniapp ifdef条件编译进行嵌套，H5的button定义一个点击事件，下面是点击事件的处理：

<script setup>
	function clickContact(){
		uni.makePhoneCall({
			phoneNumber: '114' 
		});

	}
</script>

三、uni.makePhoneCall  API

uniapp提供了与设备的交互处理，具体可访问uniapp官方文档中“API”-->"设备"，这里我们使用它的拨打电话功能：uni.makePhoneCall(OBJECT) | uni-app官网。里边使用到参数有：

OBJECT 参数说明

CSS代码，在原来row样式里添加相对定位，并添加button的样式：

 .row{
   position: relative;
   button{
	 position: absolute;
	 top:0;
	 left: 0;
	 height: 100rpx;
	 width: 100%;
	 opacity: 0;
  }
 }

 总体实现效果：

1、隐藏按钮实现点击区域

按钮通过 position: absolute 和 opacity: 0 完全透明，但覆盖整个列表项，用户点击列表任意位置都会触发按钮事件。

解决了原生按钮样式难以自定义的问题，同时保持视觉一致性。

2、多平台适配

使用条件编译（#ifdef MP / #ifdef H5）区分小程序和 H5 的逻辑：

小程序：直接调用微信客服接口（open-type="contact"）。

H5：需自行实现 clickContact 方法（例如跳转拨号链接或弹出客服对话框）。

3、视觉与功能分离

视觉层（图标、文字）和功能层（按钮）解耦，便于独立维护。

 小程序端效果：

手机访问效果：