一、为什么你的项目需要企业微信客服？
如果你正在用uniapp开发跨平台应用，一定遇到过这个头疼的问题：小程序有自己的客服系统，APP又得单独集成第三方SDK，两边的消息还不同步，维护起来简直要命。
企业微信客服就像一个“万能插座”，让你用一套代码，就能在微信小程序、APP、H5三端都接入统一的企业级客服系统。用户点击“联系客服”，直接唤起熟悉的微信聊天窗口，无需额外下载；客服人员在企业微信后台统一管理会话，支持分配坐席、设置自动回复、查看数据报表，管理效率直接拉满。
企业微信客服的两个核心优势：
二、前置准备：企业微信后台配置
⚠️ 重要提醒：这一步如果配错了，后面代码写得再漂亮也白搭。请务必按顺序完成以下配置。
2.1 注册企业微信并完成认证
首先需要注册一个企业微信账号（不是个人微信号）。注册完成后，最关键的一步是完成企业认证——需要提交营业执照等资质，审核费用300元/年。
认证成功后，进入企业微信管理后台(企业微信) →「我的企业」→ 页面最底部，复制企业ID（CorpID） 。这个参数后续写代码时会频繁用到。
2.2 创建微信客服账号
- 登录企业微信管理后台，左侧菜单找到「应用管理」→「微信客服」，点击启用
- 点击「添加客服账号」，根据业务创建多个入口，比如“售前咨询”、“技术支持”等
- 创建时设置头像、名称、欢迎语。欢迎语建议引导用户描述问题，提升沟通效率
- 创建完成后，在客服账号的「接入」设置中，选择在微信外App/网页中接入，复制客服链接（URL）
这个链接长这样：https://work.weixin.qq.com/kfid/kfcbxxxxxx，它是你的客服账号的唯一网络地址。
如图：
入口
创建客服账号并获取客服链接
客服链接获取
2.3 APP和微信小程序的特殊绑定
APP端额外步骤：
- 注册微信开放平台（open.weixin.qq.com），创建移动应用，获取AppID。注意创建应用需要有一个包含品牌展示、功能介绍等内容的官网页面
- 回到企业微信后台「微信客服」→「在微信外App/网页中接入」→「去接入」，填入刚才获取的AppID
- 绑定成功后刷新开放平台页面，确认关联状态
小程序端额外步骤：
登录小程序管理后台（mp.weixin.qq.com）→「功能」→「客服」→「微信客服」，填写企业微信的企业ID进行绑定。
🔑 关键参数汇总：
- 企业ID（CorpID） ：企业微信后台「我的企业」底部获取
- 客服链接（URL） ：微信客服账号的接入设置中获取
- AppID：微信开放平台创建移动应用后获取（仅APP端需要）
企业ID获取
企业ID绑定
三、实战代码：三端统一接入
3.1 demo实战
可以在项目目录创建一个工具类utils,新建一个文件叫wechat.js
function wechat(){
wx.openCustomerServiceChat({
//企业微信的企业id
corpId: 'wwxxxxxxxxxxxx',
extInfo: {
//客服链接
url: 'https://work.weixin.qq.com/kfid/kfcxxxxxxxx'
},
success: (e) => {
console.log('e', e)
},
fail: (err) => {
console.log('err', err)
}
})
}
export default wechat
项目中创建一个公共组件 CustomerServiceFloat.vue,该组件封装了悬浮客户按钮，可自定义浮点位置与客服功能引入，可按需求引入在各个页面上
<template>
<view class="customer-service" :style="floatingStyle" @click.stop="openCustomerService">
<image class="customer-service__image" :src="src" mode="aspectFit"></image>
</view>
</template>
<script setup>
import {
computed
} from 'vue'
import wechat from '@/utils/wechat.js'
const props = defineProps({
src: {
type: String,
default: 'https:xxx.png'
},
right: {
type: [String, Number],
default: 10
},
bottom: {
type: [String, Number],
default: 300
},
width: {
type: [String, Number],
default: 60
},
height: {
type: [String, Number],
default: 60
},
zIndex: {
type: [String, Number],
default: 9999
}
})
const formatUnit = (value) => {
if (typeof value === 'number') {
return `${value}px`
}
if (!value) {
return '0px'
}
if (/(px|%|vh|vw|rem)$/i.test(value)) {
return value
}
if (/rpx$/i.test(value)) {
const numericValue = Number(value.replace(/rpx$/i, ''))
return Number.isNaN(numericValue) ? value : `${uni.upx2px(numericValue)}px`
}
return value
}
const floatingStyle = computed(() => ({
right: formatUnit(props.right),
bottom: formatUnit(props.bottom),
width: formatUnit(props.width),
height: formatUnit(props.height),
zIndex: String(props.zIndex)
}))
const openCustomerService = () => {
wechat()
}
</script>
<style scoped>
.customer-service {
position: fixed;
padding: 5px;
text-align: center;
border-radius: 50%;
box-sizing: border-box;
}
.customer-service__image {
width: 100%;
height: 100%;
display: block;
}
</style>
组件使用方式
<template>
<view>
<CustomerServiceFloat bottom="75px" />
</view>
</template>
<script setup>
import CustomerServiceFloat from '@/components/CustomerServiceFloat.vue'
</script>
3.2 各端接入要点说明
3.3 常见报错及解决办法
错误1：openCustomerServiceChat:fail not bind errCode:6
原因：小程序后台未绑定企业ID
解决：登录小程序管理后台 →「功能」→「客服」→「微信客服」，填写正确的企业ID
错误2：deeplink customservice no permission
原因：微信客服后台未关联开放平台的AppID
解决：回到企业微信后台「微信客服」→「在微信外App/网页中接入」，重新关联AppID
错误3：小程序中跳转提示“不支持该API”
原因：未配置企业微信客服的业务域名白名单
解决：在小程序后台「开发」→「开发设置」→「业务域名」中，添加 https://work.weixin.qq.com 及相关域名
错误4：H5端在微信外浏览器打开白屏
原因：wx.openCustomerServiceChat 仅在微信环境（小程序/微信内置浏览器）中可用
解决：按照上面的代码，H5端使用 window.location.href 跳转，而非调用微信API
四、总结
接入企业微信客服后，你的uniapp应用就有了统一、专业、可管理的客服能力。核心流程可以总结为三步：
- 企业微信后台配置：完成认证 → 创建客服账号 → 获取企业ID和客服链接
- 多端绑定：APP需要开放平台AppID，小程序需要后台绑定企业ID
- 代码接入：用条件编译分别处理各端，一套代码搞定三平台
实际开发中大部分问题都出在前面两步的配置上，只要配置正确，代码调用非常简单。建议先在企业微信后台用“体验”功能验证客服链接是否可用，再开始写代码。祝你接入顺利！
