带你手把手实现企微 WECOM-JSSDK 的微信客服侧边栏自建应用获取小程序订单列表

五秒法则

已于 2025-04-08 08:51:37 修改

阅读量985

点赞数 24

分类专栏：自学私有文章标签：企业微信前端小程序 html5

于 2025-04-06 20:56:39 首次发布

本文链接：https://blog.csdn.net/qq_51478745/article/details/146412258

版权

自学同时被 2 个专栏收录

11 篇文章

订阅专栏

私有

10 篇文章

订阅专栏

本篇文章是基于已经创建好企业微信客服账号后，如何创建自建应用 h5 页面获取小程序用户的订单列表，并配置到企微客户端微信客服的侧边栏上，图例如下：

一、前言

1、概述

WECOM-JSSDK 相较旧版的 JS-SDK 提供了 Typescript 类型支持、npm 引入等功能
WECOM-JSSDK 为网页应用提供了调用手机原生方法的通道
- 拍照、选择图片、录音
- 获取地理位置信息

2、相关文档（开发期间可能会用到的文档及工具）

官网：开发指南 - 文档 - 企业微信开发者中心
实现思路参考文档（企业内部开发）：微信客服基础开发说明
企微错误码查询工具：错误码查询工具
企微接口签名工具：签名工具

3、开发体验

前期小编是用 JS-SDK 开发，但是发现会有各种踩坑问题导致流程进行不下去，以下是小编当时找资料踩坑资料之一，有需要的小伙伴可以参考

企业微信 JS SDK 自建应用踩坑指南https://zhuanlan.zhihu.com/p/270651743

使用 WECOM-JSSDK 方式实现的文章几乎没有搜到，小编无奈自行研究

二、企微后台配置

1、自建应用

（1）创建自建应用

管理后台-应用管理-应用-自建

（2）配置应用权限

管理后台-客户与上下游-客户-API

管理后台-应用管理-微信客服-API

（3）配置 JS-SDK 域名

管理后台-应用管理-应用-自建-点击自定义的应用-开发者接口

注意：

1. 这里配置的可信域名必须是后续访问侧边栏页面的域名前缀

2. 需要进行域名归属认证，将 校验文件.txt 上传至该配置域名根目录下

（4）配置侧边栏页面

管理后台-应用管理-应用-自建-点击自定义的应用

注意：这边配置的页面路径即侧边栏访问的页面

（5）配置可信IP

管理后台-应用管理-应用-自建-点击自定义的应用-开发者接口

配置可信域名对应的服务器ip地址

2、微信客服

管理后台-应用管理-应用-基础-微信客服

三、开发流程

1、实现思路

①小程序获取并存储 unionId

②企微侧边栏页面：客服自动登录系统（出于安全性考虑，只有登录后才可以访问订单列表）、并获取 外部联系人id ，再通过外部联系人id获取当前聊天框客户的 unionId

③通过 unionId 去小程序获取 userId

④通过 userId 获取该聊天框客户的小程序用户订单列表

2、开始使用

（1）npm 引入（小编推荐使用）

安装 @wecom/jssdk 依赖

npm install @wecom/jssdk

局部引入依赖

import * as ww from '@wecom/jssdk'

（2）cdn 引入

<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-2.0.2.js"></script>

3、接口鉴权

以下任何企微接口调用出现报错，产生的错误码都可以使用官网工具去查看给出的具体问题点

文档地址都放在文章最上方的相关文档，有需要的小伙伴自取

（1）获取access_token

①文档地址

获取access_token - 文档 - 企业微信开发者中心https://developer.work.weixin.qq.com/document/path/91039

②入参说明

参数	必须	说明	取值位置
corpid	是	企业ID，获取方式参考：术语说明-corpid	管理后台-我的企业-企业信息-企业ID
corpsecret	是	应用的凭证密钥，注意应用需要是启用状态，获取方式参考：术语说明-secret	管理后台-应用管理-应用-自建-选择创建好的应用在企微账号即可收到secret的短信

参数

必须

说明

取值位置

corpid

是

企业ID，获取方式参考：术语说明-corpid

管理后台-我的企业-企业信息-企业ID

corpsecret

是

应用的凭证密钥，注意应用需要是启用状态，获取方式参考：术语说明-secret

管理后台-应用管理-应用-自建-选择创建好的应用

在企微账号即可收到secret的短信

（2）获取 JS-SDK 签名算法

①文档地址

JS-SDK使用权限签名算法 - 文档 - 企业微信开发者中心https://developer.work.weixin.qq.com/document/path/90539

②获取企业 jsapi_ticket

③获取应用的 jsapi_ticket

（3）构建签名加密字段

①加密的参数有四个

noncestr：随机字符串
jsapi_ticket：上面第（2）点的“获取企业jsapi_ticket”、“获取应用的jsapi_ticket”
timestamp：时间戳
url：当前网页的URL，不包含#及其后面部分

②字段必须严格按照以下顺序，并且注意字母大小写都正确

jsapi_ticket=JSAPITICKET&noncestr=NONCESTR&timestamp=TIMESTAMP&url=URL

③加密算法采用 sha1 加密

④代码示例

import CryptoJS from "crypto-js";

async function getConfigSignature() {
  const timestamp = Math.floor(Date.now() / 1000); // 时间戳(秒)
  const nonceStr = Math.random().toString(36).substring(2, 15); // 随机值
  const jsapiTicket = 'xxx' // 对应企业jsapi_ticket
  const url = window.location.href.split('#')[0]; // 获取当前页面的 url

  // 定义要加密的字符串 
  const stringToEncrypt = `jsapi_ticket=${jsapiTicket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`; // 使用 SHA-1 算法加密字符串 
  const signature = CryptoJS.SHA1(stringToEncrypt).toString(); // 输出加密后的字符串 console.log(encryptedString);

  return { timestamp, nonceStr, signature }
}

async function getAgentConfigSignature() {
  const timestamp = Math.floor(Date.now() / 1000); // 时间戳(秒)
  const nonceStr = Math.random().toString(36).substring(2, 15); // 随机值
  const jsapiTicket = 'xxx' // 对应应用jsapi_ticket
  const url = window.location.href.split('#')[0]; // 获取当前页面的 url

  // 定义要加密的字符串 
  const stringToEncrypt = `jsapi_ticket=${jsapiTicket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`; // 使用 SHA-1 算法加密字符串 
  const signature = CryptoJS.SHA1(stringToEncrypt).toString(); // 输出加密后的字符串 console.log(encryptedString);

  return { timestamp, nonceStr, signature }
}

4、获取当前聊天客户id（外部联系人id）

ww.register({
  corpId: 'xxx', // 企业ID
  agentId: 'xxx', // 必填，当前应用的AgentID
  jsApiList: ['getCurExternalContact'], // 需要使用的JSAPI列表
  getConfigSignature,
  getAgentConfigSignature
})

// 调用 register 后可以立刻调用JSAPI列表的接口
ww.getCurExternalContact({
  success(res) {
    // alert('getCurExternalContact执行成功')
    state.externalId = res.userId // res中的userId就是客户id，即外部联系人id
  }
})