跨平台应用开发进阶(四十五)uni-app集成企微客服实战

一、前言

应用运营过程中,考虑接入企业微信客服功能,大致看了下官方接入文档,并不困难,引入代码量也不大。按照手册来操作即可。

二、功能实现

2.1 环境准备

在接入企微客服前,需要启用微信客服,并添加客服账号,并在企微管理后台将APP信息、企业信息、企微客服关联起来。

第一步:登录微信开放平台,在「管理中心-应用详情 」中查看并复制对应的AppID

第二步:登录企业微信管理后台,在「应用管理-应用-微信客服-在微信外接入-关联App 」处,填写AppID,关联已在微信开放平台审核通过的同主体App。 备注⚠️:一个 AppID 暂仅可同时被15家同主体的微信客服关联,关联后才可正常跳转微信并打开微信客服。

第三步:进入「我的企业 」,在企业信息处复制企业ID。 第四步:进入「应用管理-应用-微信客服 」,选择接入场景为「在微信外接入」。选择需要在App中接入的客服帐号,并复制对应的客服链接。

第五步:参照2.2小结,在App中接入调起企微客服逻辑。

第六步:用户在App中点击即可自动跳转微信并打开对应的微信客服会话,向客服发起咨询。

注⚠️:如果你想在其他企业的App中接入你的微信客服,可授权安装该企业创建的第三方应用。安装后,该应用关联的App,即可接入你的微信客服。

2.2 代码层面

APP调起企微客服代码如下:

javascript 复制代码
// #ifndef APP-PLUS
uni.showToast({
	title: '请在app打开',icon:"none"
});
// #endif
let wechat = null
plus.share.getServices(res => {
 wechat = res.find(i => i.id === 'weixin')
	if (wechat) {
		wechat.openCustomerServiceChat({
			corpid: 'ww1576eb419421ba30',//企业ID
			url: 'https://work.weixin.qq.com/kfid/kfc8dw2f91c9ab6e60',//客服地址
		}, src => {
			console.log("success:", JSON.stringify(src))
		}, err => {
			console.log("error:", JSON.stringify(err))
		})
	} else {
		uni.showToast({
			title: '当前环境不支持微信操作',icon:"error"
		});
	}
}, function() {
	uni.showToast({
		title: "获取服务失败,不支持该操作。" + JSON.stringify(e),
		icon: 'none'
	})
});

2.3 拓展工具

三、拓展阅读

相关推荐
QQ1__8115175155 小时前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
钛态5 小时前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
一粒黑子5 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
独角鲸网络安全实验室5 小时前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
紫微AI5 小时前
前端文本测量成了卡死一切创新的最后瓶颈,pretext实现突破了
前端·人工智能·typescript
GISer_Jing5 小时前
AI前端(From豆包)
前端·aigc·ai编程
IT枫斗者5 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
测试修炼手册5 小时前
[测试技术] 深入理解 JSON Web Token (JWT)
前端·json
AI老李5 小时前
2026 年 Web 前端开发的 8 个趋势!
前端
里欧跑得慢5 小时前
15. Web可访问性最佳实践:让每个用户都能平等访问
前端·css·flutter·web