uniapp的h5集成到企业微信

admin 2026年02月05日 12:48 101 0

uniapp开发的H5应用集成到企业微信，需先在企业微信后台获取corpID与secret，配置可信域名，通过引入企业微信JS-SDK，在页面加载时调用jssdk的config接口完成权限验证，实现分享、获取用户信息等功能，利用企业微信API，可通过code换取用户身份，实现与企业微信账号的关联，并支持发送服务通知，集成后，H5应用可直接在企业微信内打开，无缝对接企业微信生态，提升办公协同效率，同时确保用户体验的一致性与安全性。

Uniapp H5应用高效集成企业微信实战指南

在企业数字化协作场景中,企业微信已成为连接员工、客户与业务的核心枢纽工具，将基于Uniapp开发的H5应用深度集成到企业微信生态，不仅能借助企业微信强大的原生能力（如身份认证、消息推送、部门管理等）显著提升应用实用性，还能通过微信端触达更广泛的用户群体，实现业务价值最大化，本文将从环境准备、接口对接、功能实现到上线调试，全面拆解Uniapp H5应用集成企业微信的全流程，为开发者提供可落地的技术方案。

前置条件：准备工作不可少

在开始集成前,需完成以下关键准备工作，确保后续开发流程顺畅高效：

企业微信应用配置

注册企业微信账号
- 若尚未注册企业微信,需通过企业微信官网完成企业认证，获取CorpID（企业ID），建议提前准备好企业营业执照、法人信息等资料，认证过程通常需要1-3个工作日。
创建H5应用
- 登录企业微信管理后台,进入「应用管理」→「应用」→「创建应用」，选择「H5应用」类型，填写应用名称、简介、图标等信息。
- 创建成功后,系统会自动生成AgentID（应用ID）和Secret（应用密钥），请妥善保管密钥信息，避免泄露。
配置可信域名
- 在「应用详情」→「网页授权及JS-SDK」中，添加H5应用的域名（需包含完整协议，如https://yourdomain.com）。
- 域名配置支持通配符,如https://*.yourdomain.com，但建议根据实际业务需求精确配置，避免安全隐患。
申请必要权限
- 根据业务需求,在「权限管理」中开启必要权限，如「获取用户身份信息」「通讯录管理」「发送应用消息」等。
- 部分敏感权限可能需要管理员审批,建议提前规划权限申请流程。

Uniapp项目准备

项目环境搭建
- 确保Uniapp项目基于Vue 2/3开发，推荐使用HBuilderX或Vue CLI创建项目。
- 若需调用企业微信JS-SDK，安装wx-js-sdk依赖：npm install wx-js-sdk --save
配置H5端参数
- 在manifest.json中配置H5相关参数：
```
"h5": {
  "router": {
    "mode": "hash"
  },
  "publicPath": "./",
  "title": "企业应用名称"
}
```
- 配置跨域代理,解决开发环境接口调用问题。

环境变量配置

创建.env文件，存储企业微信相关配置：

VUE_APP_CORP_ID=your_corp_id
VUE_APP_AGENT_ID=your_agent_id
VUE_APP_SECRET=your_secret

核心步骤：从接入到功能实现

引入企业微信JS-SDK

企业微信H5应用需通过JS-SDK调用原生接口（如获取用户信息、打开联系人等），在Uniapp中有以下引入方式：

直接引入CDN（推荐生产环境）

在index.html的<head>标签中添加：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

npm安装后引入（推荐开发环境）

在项目入口文件（如main.js）中：

import wx from 'wx-js-sdk'
// Vue2
Vue.prototype.$wx = wx
// Vue3
const app = createApp(App)
app.config.globalProperties.$wx = wx

按需引入（优化性能）

对于大型项目,可采用按需加载方式：

// 在需要使用SDK的组件中
const wx = await import('wx-js-sdk')
this.$wx = wx.default

企业微信授权登录

企业微信H5应用需通过OAuth2.0授权获取用户身份信息，完整流程如下：

构造授权链接

在登录页面,构造授权URL并跳转：

// 在登录页面
async initAuth() {
  const redirectUri = encodeURIComponent(`${window.location.origin}/auth/callback`)
  const state = this.generateState() // 生成随机state参数
  localStorage.setItem('wx_auth_state', state) // 存储state用于验证
  const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.corpID}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`
  // 可选：显示授权提示
  this.showAuthDialog(() => {
    window.location.href = authUrl
  })
}

回调页面处理用户信息

在回调页面（如auth.vue）处理授权结果：

export default {
  async onLoad() {
    const { code, state } = this.$route.query
    // 验证state防止CSRF攻击
    if (state !== localStorage.getItem('wx_auth_state')) {
      this.showError('授权验证失败')
      return
    }
    localStorage.removeItem('wx_auth_state')
    if (code) {
      await this.handleAuthCallback(code)
    }
  },
  async handleAuthCallback(code) {
    try {
      // 获取access_token
      const accessToken = await this.getAccessToken()
      // 通过code获取用户信息
      const userInfo = await this.getUserInfoByCode(accessToken, code)
      // 存储用户信息到Vuex/Pinia
      this.$store.commit('setUser', userInfo)
      // 跳转到应用首页
      this.$router.replace('/')
    } catch (error) {
      console.error('授权失败:', error)
      this.showError('授权失败，请重试')
    }
  },
  async getUserInfoByCode(accessToken, code) {
    const res = await uni.request({
      url: 'https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo',
      method: 'GET',
      data: {
        access_token: accessToken,
        code
      }
    })
    if (res.data.errcode !== 0) {
      throw new Error(`获取用户信息失败: ${res.data.errmsg}`)
    }
    const userId = res.data.UserId
    // 获取用户详细信息
    const userRes = await uni.request({
      url: 'https://qyapi.weixin.qq.com/cgi-bin/user/get',
      method: 'GET',
      data: {
        access_token: accessToken,
        userid: userId
      }
    })
    return userRes.data
  },
  async getAccessToken() {
    // 从缓存获取，避免频繁请求
    const cachedToken = this.$store.state.accessToken
    if (cachedToken && cachedToken.expires > Date.now()) {
      return cachedToken.value
    }
    const res = await uni.request({
      url: 'https://qyapi.weixin.qq.com/cgi-bin/gettoken',
      method: 'GET',
      data: {
        corpid: this.corpID,
        corpsecret: this.secret
      }
    })
    if (res.data.errcode !== 0) {
      throw new Error(`获取access_token失败: ${res.data.errmsg}`)
    }
    // 缓存access_token（有效期2小时）
    const token = res.data.access_token
    const expires = Date.now() + res.data.expires_in * 1000 - 300000 // 提前5分钟过期
    this.$store.commit('setAccessToken', { value: token, expires })
    return token
  }
}