H5接入企微JS-SDK,使用wx.previewFile进行文件预览

最近上项目,需求是做一个附件预览并且可以进行保存到手机、用其他应用打开的需求,用企微的JS-SDK的wx.previewFile就可以满足我目前的需求

详细的可以参考:企业微信官方文档

前端

1、在项目的index.html中添加:jweixin-1.2.0.js 文件

2、在想要使用JS-SDK的组件进行config接口注入权限验证配置,因为我这里只是目前这个组件使用,我都写到同一个vue文件中了,也可以设置成一个公共方法

javascript 复制代码
  mounted() {
    // 在页面加载的时候进行调取一下
    this.handleWxConfig();
  },
  methods: {
    handleWxConfig() {
      let url = window.location.href;
      // 为了避免url带参数的时候后端接收和前端不一致,所以我这里做了一下编码,然后让后端解码一下
      getSdkSign(encodeURIComponent(url)).then((res) => {
        let { code, data, msg } = res;
        if (code === 800) {
          /**
           * 这里的wx和jWeixin是一致的,但是控制台打印出来jWeixin的方法比较全,我就用这个了
           * 因为appId/timestamp/nonceStr/signature都需要和后端保持一致,所以都让后端传回来给前端
           */

          window.jWeixin.config({
            beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: data.appId, // 必填,企业微信的corpID,必须是本企业的corpID,不允许跨企业使用
            timestamp: data.timestamp, // 必填,生成签名的时间戳
            nonceStr: data.nonceStr, // 必填,生成签名的随机串
            signature: data.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
            jsApiList: ["previewFile"], // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
          });
          window.jWeixin.ready(() => {
          	// 可以用checkJsApi来判断api是否可以用了
            window.jWeixin.checkJsApi({
              jsApiList: ["previewFile"],
              success: function (res) {
                // 以键值对的形式返回,可用的api值true,不可用为false
                // 如:{"checkResult":{"previewFile":true},"errMsg":"checkJsApi:ok"}
              },
            });
          });
          window.jWeixin.error(res => {
            console.log('------链接失败', res);
          })
        }
      });
    },
    handlePreviewUrl(fileInfo) {
        /**
         * 发现用wx.previewFile是不行的,使用以下方法就Ok了,并且你会发现在打开jweixin-1.2.0.js
         * 是没有previewFile这个方法的,但是并不影响使用
         */
        window.jWeixin.invoke('previewFile', {
          url: fileInfo.filePath,  // 是必填的
          name: fileInfo.fileName, // 是必填的
          size: fileInfo.fileSize, // 是必填的
        })
    }
}

对接遇到的问题

Q:config:signatur is not same

A:可以检查一下我们config注入还是agentConfig,两个获取权限是不一样的

相关推荐
好奇的菜鸟4 分钟前
Go语言中的引用类型:指针与传递机制
开发语言·后端·golang
一条晒干的咸魚4 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Alive~o.013 分钟前
Go语言进阶&依赖管理
开发语言·后端·golang
花海少爷15 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
手握风云-16 分钟前
数据结构(Java版)第二期:包装类和泛型
java·开发语言·数据结构
喵叔哟35 分钟前
重构代码中引入外部方法和引入本地扩展的区别
java·开发语言·重构
尘浮生41 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
sinat_3842410942 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
hopetomorrow1 小时前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress