i_am_a_div_日积月累_ 2022-09-19 14:52 采纳率: 100%
浏览 19
已结题

vue项目如何引入企业微信sdk开发?wx.agentConfig undefined是什么原因?

_ 问题已解决 _
_ 问题:vue项目如何引入企业微信sdk开发???wx.agentConfig undefined是什么原因??? _
需求:vue项目引入企业微信sdk开发。想要在企业微信的外部客户群,加入侧边栏应用,然后点击按钮,获取到当前外部群的群id
看企业微信开发文档后,我是在vue项目的index.html里,通过 script 引入了对应的企业微信的sdk。
    <!-- 企业微信开发 引入 jwxwork sdk -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
    <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>

我的开发思路:

1.先获取token,然后 获取企业的ticket,然后调用 wx.config(),然后在wx.ready()里 先获取应用的ticket,然后再调用wx.agentConfig()

2.把每一步骤的结果alert出来,这样在企业微信内就可以看到了。

3.配置获取企业微信外部群id的权限

img

以下是获取ticket和初始化的代码 大家看了可能清晰点:
// ---------------------------------通过后端接口获取token和秘钥进行初始化鉴权---------------------------------
import {
  MyPost,
  MyGet
} from 'common/js/request'

// import wx from 'weixin-jsapi' //使用html和依赖包 两者共用引入sdk


let obj = {
  ticket1: '', //获取企业的ticket ---  对应config注入的是企业的身份与权限
  ticket2: '', // 获取应用的ticket ---  对应agentConfig注入的是应用的身份与权限
  access_token: '', // 登录凭证
  code: '', // 随机code
  userId: '' // 用户唯一标识
}
let corpidVal = ''
let agentidVal = ''
let _this = this

let sha1 = require('js-sha1')



import axios from 'axios'


// 先获取企业的ticket
export function getAuthTicket(corpid, agentid) {
  corpidVal = corpid
  agentidVal = agentid
  MyGet('/chc-shop/api/v1/qywechat/jsapiticket/corp', {
    // url: window.location.href.split('#')[0]
  }).then(res => {
    console.log('先获取企业的ticket', res);

    if (res.success) {
      obj.ticket1 = res.data;
      const ticket1 = res.data // 很重要!!!!
      let nonceStr = 'Y7a8KkqX041bsSwT' // 随机字符串
      let timeStamp = new Date().getTime() // 时间戳
      let newTimeStamp = String(timeStamp).substr(0, 10) // 10位数的时间戳
      // 当前网页的 URL(可以为本地局域网网址),不包含 # 及其后面部分
      let url = String(location.href.split('#')[0])
      let verifyStr = `jsapi_ticket=${ticket1}&noncestr=${nonceStr}&timestamp=${newTimeStamp}&url=${url}`
      let signature = sha1(verifyStr)
      console.log('签名1', signature)
      wx.config({
        beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
        // 上线的时候记得将 debug 关掉哦!!!!!
        debug: process.env.NODE_ENV === "development" ? true : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: corpid, // 必填,企业微信的corpid
        timestamp: newTimeStamp, // 必填,生成签名的时间戳
        nonceStr: nonceStr, // 必填,生成签名的随机串
        signature: signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
        jsApiList: [
          'agentConfig',

          'checkJsApi',
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          'onMenuShareQQ',
          'onMenuShareWeibo',
          'hideMenuItems',
          'showMenuItems',
          'hideAllNonBaseMenuItem',
          'showAllNonBaseMenuItem',
          'chooseImage',
          'previewImage',
          'uploadImage',
          'downloadImage',
          'getLocalImgData',
          'getNetworkType',
          'openLocation',
          'getLocation',
          'hideOptionMenu',
          'showOptionMenu',
          'closeWindow',
          'scanQRCode',
          'chooseWXPay',
          'openProductSpecificView',
          'addCard',
          'chooseCard',
          'openCard'
        ] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
      });
      wx && wx.ready(function () {
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,
        // 所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
        // 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

        alert('ready')
        getAuthTicket2(corpid, agentid)



      });
      wx && wx.error(function (res) {
        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
        console.log('wx.error', res)
        alert(res.errMsg)
      });


      // getAuthTicket2(corpid, agentid)
    } else {
      alert(res.return_message)
    }


  })
}

// 先获取应用的ticket
export function getAuthTicket2(corpid, agentid) {
  MyGet('/chc-shop/api/v1/qywechat/jsapiticket/app', {
    // url: window.location.href.split('#')[0]
  }).then(res2 => {
    console.log('先获取应用的ticket', res2);
    alert('先获取应用的ticket')
    alert(res2)

    if (res2.success) {
      alert('进入success')
      obj.ticket2 = res2.data
      const ticket2 = obj.ticket2 // 很重要!!!!
      let nonceStr = 'Y7a8KkqX041bsSwT' // 随机字符串
      let timeStamp = new Date().getTime() // 时间戳
      let newTimeStamp = String(timeStamp).substr(0, 10) // 10位数的时间戳
      // 当前网页的 URL(可以为本地局域网网址),不包含 # 及其后面部分
      let url = String(location.href.split('#')[0])
      let verifyStr = `jsapi_ticket=${ticket2}&noncestr=${nonceStr}&timestamp=${newTimeStamp}&url=${url}`
      let signature = sha1(verifyStr)
      console.log('签名2', signature)
      alert('签名2:' + signature)
      alert(wx)
      console.log('wx', wx);
      alert(wx.agentConfig)

      // 企业微信ios/mac 端如果出现 "wx.agentConfig undefined" 的报错,可将调用放在异步操作中进行,例如使用:setTimeout 包裹
      setTimeout(() => {
        alert('进入定时器')
        wx.agentConfig({
          corpid: corpid, // 必填,企业微信的corpid,必须与当前登录的企业一致 https://developer.work.weixin.qq.com/document/path/90665#agentid
          agentid: agentid, // 必填,企业微信的应用id (e.g. 1000247)  https://developer.work.weixin.qq.com/document/path/90665#agentid
          // timestamp: +new Date(), // 必填,生成签名的时间戳
          // nonceStr: +new Date(), // 必填,生成签名的随机串
          timestamp: newTimeStamp, // 必填,生成签名的时间戳
          nonceStr: nonceStr, // 必填,生成签名的随机串
          signature: signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法 https://developer.work.weixin.qq.com/document/path/90506
          jsApiList: [
            'getCurExternalChat',

            'chooseCard',
          ], // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
          success: function (res2) {
            // 回调
            console.log('success==', res2)
            alert('success==' + res2)
            // _this.$message.warning(res2)





            wx.invoke('getCurExternalChat', {}, function (res) {
              console.log('获取群id==', res)

              if (res.err_msg == "getCurExternalChat:ok") {
                // _this.chatId = res.chatId //返回当前外部群的群聊ID
                alert('群ID:' + res.chatId)
              } else {
                //错误处理
                // _this.$message.warning(res.err_msg)
                alert('fail===' + res.err_msg)
              }
            })




            return true
          },
          fail: function (res2) {
            console.log('fail===', res2)
            alert('fail===' + res2.errMsg)
            // _this.$message.warning(res2.errMsg)
            if (res2.errMsg.indexOf('function not exist') > -1) {
              alert('版本过低请升级')

              return false
            }
            return false
          }
        })
      }, 1000);


    } else {
      alert(res2.return_message)
      return false
    }


  })
}

  • 写回答

2条回答 默认 最新

    报告相同问题?

    相关推荐 更多相似问题

    问题事件

    • 系统已结题 9月29日
    • 已采纳回答 9月21日
    • 修改了问题 9月21日
    • 修改了问题 9月21日
    • 展开全部

    悬赏问题

    • ¥15 基于人脸考勤系统的32版型选择
    • ¥20 python列表问题。在给定的由列表组成的列表中,选取其中的子列表,组合成一个新列表。新列表中的数字需包含给出的指定数字,且不允许重复。
    • ¥15 怎么样备份这些目录啊?和搭建这个服务器?回答一个都行
    • ¥15 逆向基础题 第一次做 有很多不懂需要请教
    • ¥16 基于Python的数据库系统开发
    • ¥15 某企业对员工采用计件工资管理制度。通过编写程序,要达到以下目的
    • ¥15 关于C# 英文打字练习器程序设计
    • ¥15 wfp应用层设计规则如何能传递到内核层
    • ¥15 关于机器学习创新点几个问题
    • ¥15 python程序编写