业务场景

基于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.jsrouter.afterEach((to, from) => {  // 通过config接口注入权限验证配置，我封装在了 vuex 里  $store.dispatch("handleWxConfig");});
/src/store/index.jshandleWxConfig({ 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