企业微信内嵌H5,引入 JS-SDK 调用 wx.previewFile 预览/下载文件(vue2.0适用)

业务场景

基于vue2.0开发企业微信内嵌H5,实现文件下载功能。我司的文件存储路径是阿里云oss,使用其他开放资源也一样。

使用步骤

1. 引入企业微信 JS-SDK

注意:

  1. 引入源码必须是 "//res.wx.qq.com/open/js/jweixin-1.2.0.js",否则 wx.previewFile 会有未知的问题;
  2. vue2.0项目,你可能在有的文章里见过 npm install weixin-js-sdk 方式引入。非官方,不推荐;
  3. 你可能会发现,//res.wx.qq.com/open/js/jweixin-1.2.0.js 里找不到previewFile函数,window.wx上也没有。不用在意,previewFile是原生实现的,看不到并不影响调用。
/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  </head>
  <body>
    <div id="app"></div>
    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 
  </body>
</html>

2. 配置 wx.config

SPA(单页面应用)要在每次url变化时进行调用 wx.config,建议写在 router.js 路由配置文件里,全局后置导航守卫触发。

/src/router/index.js

router.afterEach((to, from) => {
  // 通过config接口注入权限验证配置,我封装在了 vuex 里
  $store.dispatch("handleWxConfig");
});
/src/store/index.js

handleWxConfig({ state }) {
      // 从接口获取微信签名,需要后端同学提供
      $apiCommon.getWxSign({
        url: location.href.slice(0, location.href.indexOf("#")) // 注意:location.href最后如果有'/',必须保留
      }).then(res => {
            // 步骤二:通过config接口注入权限验证配置
            window.wx.config({
              beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题  
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
              appId: res.data.appId, // 必填,企业微信的corpID。公司的唯一标识‘ww20745c5e79cfa434’
              timestamp: new Date().getTime(), // 必填,生成签名的时间戳
              nonceStr: $utils.getRandomString(16), // 必填,生成签名的随机串,这里用的是自定义方法
              signature: res.data.sign, // 必填,签名,见附录-JS-SDK使用权限签名算法 https://work.weixin.qq.com/api/doc/90000/90136/90506
              jsApiList: ["previewFile"] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来。所有JS接口列表见附录2
            });
            // 步骤三:通过ready接口处理成功验证。没有需要立即调用的api,可以不写
            window.wx.ready(function() {});
            // 步骤四:通过error接口处理失败验证
            window.wx.error(function(err) {});
        })
    }

3. 调用 wx.previewFile

现在就可以在 vue 里愉快地使用 wx.previewFile 了~
注意:

  1. 文件名 name 必须有文件类型后缀,否则会报错;
  2. 官方文档示例的调用写法 预览文件接口,经反复测试无效。改为如下写法
<template>
    <div>
        <button @click="handleDownload"></button>
    </div>
</template>
<script>
...
handleDownload() {
  window.wx.invoke(
      "previewFile",
      {
         url: 'https://www.xxxxxxxxxxxx.pdf', // 需要预览文件的地址(必填,可以使用相对路径)
         name: '测试文件.pdf', // 需要预览文件的文件名(不填的话取url的最后部分) 
         size: xxx // 需要预览文件的字节大小(必填)
      }
   );
}
...
</script>

附:官方文档

使用说明 - 企业微信API

阅读 467

推荐阅读