企业微信JS-SDK的调用

前篇

公司最近要写一个企业微信上的应用项目,调用TAPD平台的数据,对公司人员、项目进行分析管理

前端框架

框架用的VUE,第三方UI库使用的是Vant.js(H5移动端)

功能点描述

这次主要写的是,点击沟通,准确定位到企业微信通讯录里的联系人与之进行会话

功能实现步骤

  1. 引入js文件
  2. 需要获取当前域名传给后端,后端返回config参数
  3. 通过config接口注入权限验证配置
  4. 注意config配置项里的jsApiList: []参数,将你需要使用的接口填进去,这里的接口是指在这里插入图片描述
    该图里的接口名,勿要填成你自己的接口
  5. 在点击事件中调用你配置过的接口wx.函数名
    如官网所示

具体实现

下面我就直接po代码了:
引入 js

  <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>

新建一个wx-jdk.js

import axios from "axios"
let wx = window.wx;

const getTicket = new Promise((resolve, reject) => {
    let paramUrl = {};
    paramUrl.url = window.location.href.split("#")[0];//该paramUrl 为你使用微信sdk-js相关接口的页面地址 该地址需要配置到应用后台的可信域名下,你也可以理解为项目访问的地址
    axios
        .post("获取参数的接口", paramUrl)
        .then(res => {
            if (res.data.code === 200) {
                let config = res.data.data.obj;
                wx.config({
                    beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId: config.corpId, // 必填,企业微信的corpID
                    timestamp: config.timestamp, // 必填,生成签名的时间戳
                    nonceStr: config.noncestr, // 必填,生成签名的随机串
                    signature: config.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
                    jsApiList: ["openEnterpriseChat"], //你要调用的sdk接口
                    // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
                });
                wx.ready(function () {
                    resolve(wx);		//成功了之后返回wx,方便调用
                    // console.log('success');
                })
                wx.error(res => {
                    reject(res);
                    // console.log("微信注册失败:" + res);
                })
            }
        }).catch(err => {
            reject(err);
        })
})
export function initWxConfig() {
    return getTicket;
}

页面调用initWxConfig

import { initWxConfig } from "../../utils/wxcom-jdk";
//点击事件方法名aa
    aa() {
    //获取你要传的参数,参照api,我这边是单聊,所以userId传一个就行了,groupName传“”就行
        initWxConfig().then((wx) => {
          wx.openEnterpriseChat({
            userIds,
            groupName,
            success: function () {
              // 回调,这边是聊天窗口返回H5之后需要进行的操作
              // alert(res);
            },
            fail: function (res) {
              if (res.errMsg.indexOf("function not exist") > -1) {
                alert("版本过低请升级");
              }
            },
          });
        });
    },

在这里插入图片描述

在开发中遇到的error

error码:
40013:解决:第三方公司配置的公司corpId和提供的企业微信corpId保持一致
40093:解决:获取配置传的url必须是当前页面的地址
80001:解决:需要第三方配置或后台返回时设置可信域名,并下载对应的.txt文件,然后让后台把.txt文件放到当前页面对应的域名下做根域名校验
解决完上面两个bug之后,报800001,之后去找后端配置可信域的问题,就OK了!
在这里插入图片描述
在这里插入图片描述

总结

没有啥好总结的,都在上面了。。。

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 Vue 中使用微信 JS-SDK 实现分享功能,需要完成以下步骤: 1. 获取微信公众号的 appid 和 appsecret,以及当前页面的 url。 2. 在服务器端配置好微信 JS-SDK 的权限验证,获取到 signature、timestamp 和 noncestr 等参数。 3. 在 Vue 中引入微信 JS-SDK 的 SDK 文件,并初始化。 4. 调用微信 JS-SDK 的接口,完成分享功能。 下面是一个简单的示例代码: ```html <template> <div class="share"> <button @click="shareToWechat">分享到微信</button> </div> </template> <script> import wx from 'weixin-js-sdk' export default { data() { return { appId: '', timestamp: '', nonceStr: '', signature: '', imgUrl: '', shareUrl: '' } }, created() { // 获取微信 JS-SDK 配置参数 this.getWechatConfig() }, methods: { // 获取微信 JS-SDK 配置参数 async getWechatConfig() { const url = window.location.href.split('#')[0] const res = await this.$api.getWechatConfig({ url }) if (res.code === 0) { const data = res.data this.appId = data.appId this.timestamp = data.timestamp this.nonceStr = data.nonceStr this.signature = data.signature this.imgUrl = data.imgUrl this.shareUrl = data.shareUrl this.initWechatSDK() } }, // 初始化微信 SDK initWechatSDK() { wx.config({ debug: false, appId: this.appId, timestamp: this.timestamp, nonceStr: this.nonceStr, signature: this.signature, jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ] }) wx.ready(() => { // 配置分享信息 wx.updateAppMessageShareData({ title: '分享标题', desc: '分享描述', link: this.shareUrl, imgUrl: this.imgUrl, success() { // 分享成功回调 } }) wx.updateTimelineShareData({ title: '分享标题', link: this.shareUrl, imgUrl: this.imgUrl, success() { // 分享成功回调 } }) }) }, // 分享到微信 shareToWechat() { wx.chooseWXPay({ // ... }) } } } </script> ``` 在上面的代码中,我们首先通过 `getWechatConfig` 方法获取微信 JS-SDK 的配置参数,然后在 `initWechatSDK` 方法中初始化微信 SDK,并配置分享信息。最后,在 `shareToWechat` 方法中调用微信 JS-SDK 的 `chooseWXPay` 接口,实现分享功能。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值