共计 1868 个字符，预计需要花费 5 分钟才能阅读完成。
业务场景
基于 vue2.0 开发企业微信内嵌 H5，实现文件下载性能。我司的文件存储门路是阿里云 oss，应用其余凋谢资源也一样。
应用步骤
1. 引入企业微信 JS-SDK
留神：
- 引入源码必须是
"//res.wx.qq.com/open/js/jweixin-1.2.0.js"，否则 wx.previewFile 会有未知的问题； - vue2.0 我的项目，你可能在有的文章里见过 npm install weixin-js-sdk 形式引入。非官方，不举荐；
- 你可能会发现，//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 了~
留神：
- 文件名 name 必须有文件类型后缀，否则会报错；
- 官网文档示例的调用写法 预览文件接口，经重复测试有效。改为如下写法
<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
正文完
