企业微信内嵌H5，引入 JS

2023-07-02 17:25| 来源: 网络整理| 查看: 265

文章目录业务场景使用步骤1. 引入企业微信 JS-SDK2. 配置 wx.config3. 调用 wx.previewFile 附：官方文档

业务场景

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

使用说明 - 企业微信API

【本文地址】

公司简介

联系我们