uni-app 企微扫码

前端部分

1. 引入企微JSSDK

首先，将企业微信官方的 JS-SDK 文件（如 wecom.js）放入项目中，例如 @/utils/we-jssdk/wecom.js。
然后在 main.js 中全局引入（仅限 H5 平台）：

// #ifdef H5
//引入企业微信JS-SDK
import * as ww from '@/utils/we-jssdk/wecom.js'
window.ww = ww
// #endif

2. 初始化鉴权

在应用首页（或其他入口页面）的 onReady 生命周期中执行初始化：

export default {
  onReady() {
    // #ifdef H5
    this.initWeJSSDK()
    // #endif
  },
}

定义两个方法，一个获取corpId，一个获取noncestr，timestamp，signature，参考代码如下：

methods: {
  // 获取corpId
  async initWeJSSDK() {
    const form = {
      RequestName: "WechatQyConfig",
      JsonData: {}
    }

    try {
      const res = await this.$request("/api/Mes/Invoke", "POST", form, false)
      
      if (res.code === 200) {
        const isWxWork = /wxwork/i.test(window.navigator.userAgent);
        
        if (isWxWork) {
          ww.register({
            corpId: res.data.corpId,
            jsApiList: ['scanQRCode'],
            getConfigSignature: this.getConfigSignature,
            onConfigSuccess: () => {
              console.log('企业微信 JS-SDK 初始化成功')
            },
            onConfigFail: (e) => {
              console.error('JS-SDK 初始化失败:', e)
              this.$utils.toast('企业微信 JS-SDK 签名失败！')
            }
          })
        }
      } else {
        this.$utils.toast(res.message || '获取企业配置失败')
      }
    } catch (error) {
      console.error('initWeJSSDK error:', error)
      this.$utils.toast('初始化异常，请稍后重试')
    }
  },
  // 签名回调
  async getConfigSignature(url) {
    const form = {
      RequestName: "WechatQyJsApiSignature",
      JsonData: { url: url }
    }

    try {
      const res = await this.$request("/api/Mes/Invoke", "POST", form, false)
      
      if (res.code === 200) {
        return {
          nonceStr: res.data.noncestr,
          timestamp: res.data.timestamp,
          signature: res.data.signature
        }
      } else {
        this.$utils.toast(res.message || '获取 JS-SDK 签名失败')
      }
    } catch (error) {
      console.error('getConfigSignature error:', error)
      this.$utils.toast('签名请求异常')
    }
  }
}

3.调用扫码

在需要扫码的组件中，定义 onScan 方法，兼容 App 和 H5 平台：

onScan(){
				if(this.disabled){
					return
				}
				// #ifdef APP
				uni.scanCode({
					success: (res) => {
						// 处理扫码结果
						this.handleScanResult(res.result)
					}
				})
				// #endif
				
				// #ifdef H5
                if (typeof window.ww?.scanQRCode !== 'function') {
				    this.$utils.toast('当前环境不支持扫码')
				    return
				}
				ww.scanQRCode({
				  needResult: true,
				  scanType: ['qrCode', 'barCode'],
				  success: (e)=>{
					  // 处理扫码结果
					  this.handleScanResult(e.resultStr)
				  },
				  fail: (e)=>{
				  	   this.$utils.toast('fail ' + JSON.stringify(e))
				  },
				})
				// #endif
			},

后端部分

1.提供的两个接口

（1）获取企业 corpId 接口

• 用途：前端初始化 ww.register 时需要传入 corpId。
• 请求方式：任意（如 POST /api/Mes/Invoke?RequestName=WechatQyConfig）
• 返回内容

{
  "code": 200,
  "data": {
    "corpId": "你的企业ID"
  }
}

• 说明：该值是固定的，可直接从配置文件读取返回，无需动态计算

（2）获取 JS-SDK 签名接口

• 用途：为前端当前页面 URL 动态生成合法签名，用于 JS-SDK 鉴权
• 请求参数：前端传入完整 URL（必须是 location.href.split('#')[0]，即不含 hash 部分）。
• 请求方式：任意（如 POST /api/Mes/Invoke?RequestName=WechatQyJsApiSignature）
• 返回内容：

{
  "code": 200,
  "data": {
    "noncestr": "随机字符串",
    "timestamp": 1712345678,
    "signature": "SHA1签名结果"
  }
}

企业微信后台必须配置项

（1）设置可信域名

• 登录 企业微信管理后台。
• 进入「应用管理」→ 选择你的自建应用 → 「网页授权及JS-SDK」。
• 在「JS-SDK权限」中添加你的 H5 应用的根域名（例如 example.com）。
• 重要限制：
  • 域名必须是 已备案的公网域名。
  • 不能使用 IP 地址（如 192.168.1.100 或 http://121.33.xxx.xxx ），企业微信明确禁止 IP 作为可信域名。
  • 不能带协议（http:// 或 https://）、端口或路径，只填主域名。
  • 必须在该域名的网站根目录下放置企业微信提供的验证文件（如 ww_verify_xxx.txt），否则校验失败。
    （2）确保应用有调用权限
• 自建应用需开启「网页授权及JS-SDK」权限。
• 应用 Secret（corpsecret）需保密，仅用于后端获取 access_token

（2）后台服务器白名单

• 必须设置后台服务器白名单，后台才能和和腾讯服务器进行通信
• 缓存机制：access_token 和 jsapi_ticket 必须由后端缓存并自动刷新，避免频繁请求企微接口导致限流。