Vue企业微信客户端及移动端-引入及使用

377 阅读2分钟

步骤1.引入js-sdk相关2个js文件 (需要同时引入这两个文件的)

res.wx.qq.com/open/js/jwe…

open.work.weixin.qq.com/wwopen/js/j…

引入的目录:项目名/public/index.html

<div id="app"></div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>

后端提供接口: 获取jsapi-ticket签名


wx.config({ beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题 
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 
    appId: '', // 必填,企业微信的corpID,必须是本企业的corpID,不允许跨企业使用 
    timestamp: '', // 必填,生成签名的时间戳 
    nonceStr: '', // 必填,生成签名的随机串 
    signature: '',// 必填,签名,见 附录-JS-SDK使用权限签名算法
    jsApiList: [] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});

后端提供接口: 获取应用jsapi-ticket签名

wx.agentConfig({ 
    corpid: '', // 必填,企业微信的corpid,必须与当前登录的企业一致
    agentid: '', // 必填,企业微信的应用id (e.g. 1000247) 
    timestamp: , // 必填,生成签名的时间戳 
    nonceStr: '', // 必填,生成签名的随机串 
    signature: '',// 必填,签名,见附录-JS-SDK使用权限签名算法 
    jsApiList: ['selectExternalContact'], //必填,传入需要使用的接口名称 
    success: function(res) { // 回调 }, 
    fail: function(res) { 
        if(res.errMsg.indexOf('function not exist') > -1){ 
            alert('版本过低请升级') 
        } 
    } 
});

公共部分代码示例 : wxConfig.js

import { getJsApi, getAgentJsApi } from '@/api/common'  // 接口名

export async function getJsapiConfig(flag=null) {
  try {
    let agentId = ''  // 企业应用id  根据不同环境配置
    if (process.env.VUE_APP_NODE_ENV_TYPE === 'test') {
      agentId = '10000XX'
    } else if (process.env.VUE_APP_NODE_ENV_TYPE === 'uat') { 
      agentId = '10000XX'
    } else if (process.env.VUE_APP_NODE_ENV_TYPE === 'prod') { 
      agentId = '10000XX' 
    }
    let data = {
      agent_id: agentId,  // 企业微信的[应用id] 
      url: location.href.split('#')[0// 进行url编码后的页面路径
    }
    let that = this
    const [configRes, agentConfigRes] = await Promise.all([ 
      getJsApi(data), 
      getAgentJsApi(data) 
    ]) 
    if (configRes.errorNo == 0) { 
      console.log('获取到的jsAPI', configRes, agentConfigRes) 
      wx.config({   // 要使用的
        betatrue,
        debugfalse,
        appId: configRes.results[0].appid,
        timestamp: configRes.results[0].timestamp,
        nonceStr: configRes.results[0].nonceStr,
        signature: configRes.results[0].signature,
        jsApiList: [
          'agentConfig',
          'openEnterpriseChat',  // 进入聊天
          'navigateToAddCustomer',  // 加客户好友
          'getCurExternalContact',  // 获取外部联系人
          'onMenuShareTimeline'// 分享到朋友圈
          'onMenuShareAppMessage'// 分享
          'onMenuShareWechat'// 微信
          'hideOptionMenu',
          'showMenuItems' ,
          'previewFile'
        ],
        successfunction (configRes) {
          console.log('wx成功', configRes)
        },
        failfunction (configRes) {
          console.log('wx-fail', configRes)
        }
      })
      wx.ready(function () {
        console.log('wx', wx)
        if(!flag){  // 隐藏页面右上角三个点的分享功能
          wx.hideOptionMenu()
        }
        wx.checkJsApi({
          jsApiList: ['agentConfig'],
          successfunction (res) {
            console.log('agentConfig***', res)
            if (agentConfigRes.errorNo == 0) {
              wx.invoke('agentConfig', {  // 通过agentConfig注入应用的权限
                  betatrue,
                  debugtrue,
                  corpid: agentConfigRes.results[0].appid,
                  agentid: data.agent_id,
                  timestamp: agentConfigRes.results[0].timestamp,
                  nonceStr: agentConfigRes.results[0].nonceStr,
                  signature: agentConfigRes.results[0].signature,
                  jsApiList: [
                    'navigateToAddCustomer',
                    'getCurExternalContact',
                    'shareTimeline'// 转发到微信朋友圈
                    'shareWechatMessage'// 转发到微信
                    'shareAppMessage'// 转发
                    'shareToExternalMoments'// 发表到客户朋友圈
                    'shareToExternalContact'// 群发给客户
                    'previewFile' // 文件预览
                  ]
                },
                function (agentConfigRes) {   
                  console.log('agentSucces---', agentConfigRes)
                  wx.checkJsApi({
                    jsApiList: [
                      'openEnterpriseChat',
                      'navigateToAddCustomer',
                      'getCurExternalContact',
                      'shareTimeline'// 转发到微信朋友圈
                      'shareWechatMessage'// 转发到微信
                      'shareAppMessage'// 转发
                      'shareToExternalMoments'// 发表到客户朋友圈
                      'shareToExternalContact'// 群发给客户
                      'previewFile'  // 文件预览
                    ],
                    successfunction (res) {
                      console.log('jsApiList', res)
                    }
                  })
                }
              )
            }
          },
          failfunction (res) {
            console.log('抱歉,当前客户端不支持agentConfig')
          }
        })
      })
      wx.error(function (configRes) {
        console.log('失败', configRes)
      })
    }
  } catch (err) {
    console.log('获取jsapi-ticket签名错误', err)
  }
}

页面调用wxConfig:

<script>
import { getJsapiConfig } from '@/utils/wxConfig'

mounted() {
   getJsapiConfig()   // 引入即可在页面调用已注册的接口使用
}
</script>