uni-app 微信小程序实现全屏客服按钮可随意拖动

uni-app 微信小程序实现全屏客服按钮可随意拖动

微信小程序新增一个需求需要添加在线客服功能，其实微信小程序开发的已经非常完美了，很多功能拿来即用。今天在这里分享一个在uni-app 微信小程序中实现一个全屏客服按钮可随意拖动。

效果图如下：

实现步骤下面来一起查看：

第一步： 选择一个合适的客服icon

iconfont： https://www.iconfont.cn/ （这里面又很多可以选择的图标，使用方法：uni-app 中iconfont的用法 ）

第二步： 实现可拖动按钮 ：movable-area

uni-app 给给我们提供了可拖动区域组件，movable-area  【具体文档请查看官方文档】

下面来看一下实现的代码吧。

1. 新建组件 components/kefu/kefu.vue
2. 下载客服icon， static/kefu.png
3. 在页面中引入组件即可

页面：

<template>
	<!-- 可拖动 -->
	<movable-area class="movableArea">
		<movable-view class="movableView" direction="all" x="600rpx" y="800rpx">
			<image src="../../static/kefu01.png" mode="widthFix"></image>
			<button open-type='contact' session-from='' class="contact">联系我们</button>
		</movable-view>
	</movable-area>
</template>

css：

.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;
	
		.movableView {
			pointer-events: auto; //可以点击
			width: 100rpx;
			height: 100rpx;
	
			image {
				width: 100%;
				height: 100%;
			}
			// 客服
			.contact {
				width: 50px;
				height: 50px;
				overflow: hidden;
				position: absolute;
				left: 0px;
				top: 0px;
				border-radius: 100%;
				opacity: 0;
			}
			
		}
	}

引入：

import kefu from '../../../components/kefu/kefu.vue'

//引入组件
components: {
    kefu
},

//使用组件

<kefu></kefu>

客服使用文档： 微信客服消息文档

以上内容即可实现uni-app 微信小程序全屏客服按钮可随意拖动功能了。

—— 微信小程序学习资源下载—–

1、uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘

2、微信小程序入门与实战 常用组件API开发技巧项目实战

3、微信小程序入门与实战(最新完整版)

4、微信小程序云开发-从0打造云音乐全栈小程序 完整版

5、纯正商业级应用-微信小程序开发实战-完整无秘

6、商业级支付宝小程序入门与实战 高清无秘 百度云盘下载

更多学习教程，小月博客持续更新…