企业微信—JS-SDK使用

参考官方文档：https://developer.work.weixin.qq.com/document/path/90514
一、引入JS文件
在.html文件中引入：
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

更新于2024.10.24
引入方法：
1.weixin-sdk-js
        安装npm install weixin-sdk-js --save
        引入import wx from "weixin-js-sdk";
2.WECOM-JSSDK （可查看官方文档）
相较旧版本WECOM-JSSDK提供了Typescript类型支持、npm引入等新能力。
        安装npm install @wecom/jssdk
        引入import * as ww from '@wecom/jssdk'";

通过script引入<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-2.0.2.js"></script>

二、后端获取
JS-SDK使用权限签名算法

三、前端调用接口处理
1.定义handleWxConfig 方法：通过config接口注入权限验证配置

export const handleWxConfig = () => {

  let url = location.href;

  console.log(url, 'url');

  // 从接口获取微信签名，需要后端同学提供
  getSdkSign.get({

    url // 注意：location.href最后如果有'/'，必须保留

  }).then((res: any) => {

    console.log(res, 'res');

    let { code, data, msg } = res;

    if (code == 200) {

      // 步骤二：通过config接口注入权限验证配置
      window.wx.config({

        beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题  

        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来

        appId: data.appId, // 必填，企业微信的corpID

        timestamp: data.timestamp, // 必填，生成签名的时间戳

        nonceStr: data.nonceStr, // 必填，生成签名的随机串，这里用的是自定义方法

        signature: data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法 

        jsApiList: ["previewFile"] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来。所有JS接口列表见附录2

      });

      // 步骤三：通过ready接口处理成功验证。没有需要立即调用的api，可以不写
      window.wx.ready(() => { });

      // 步骤四：通过error接口处理失败验证
      window.wx.error((err: any) => { });

    } else {

      drNotify(msg);

    }
  })
}

2.引用：在需要使用JS-SDK的地方引入

// 在需要使用JS-SDK的页面引入
onMounted(async () => {
  handleWxConfig();
})

四、实例：
以预览下载文件为例：
1.定义方法handlePreviewFile：

// 预览文件接口
export const handlePreviewFile = (file: any) => {

  window.wx.previewFile({

    // 文件访问地址
    url: handleImgSrc(file.group, file.filepath),

    name: file.filename,

    size: file.filesize

  })

}

2.使用文件预览，在需要使用预览下载的方法中直接调用 handlePreviewFile(file)
例：

// 下载附件 适配PC Iphone Android
const handleDownFile = (file: any) => {

  // 不是企业微信
  if (!isWxWork()) {

    return drNotify('请用企业微信打开');

  }

  isMobile() ?

    (isAndroid() ? window.open(handleImgSrc(file.group, file.filepath)) : handlePreviewFile(file))

    :

    PCpreview(file);
}