微信小程序使用腾讯文档打开文档

一. 需求

能在小程序内打开文档, 希望不是调用自己的app(例如wps)来打开, 而是可以直接不用app打开, 例如使用腾讯文档或者金山文档打开相关文件资料

二. 实现

以腾讯文档为例, 金山文档一样的步骤

1. 准备要打开的文档

我们得先把我们需要跳转的文档准备好, 然后分享出去, 方便后面复制链接

分享文档

1. 找到小程序的appId

打开腾讯文档小程序, 然后按下图获取appId

获取腾讯文档的appId

2. 复制小程序页面链接

要复制腾讯文档小程序的页面链接, 需要在自己小程序后台操作一番
首先, 点击生成小程序码

点击生成小程序码

其次, 输入之前拿到的腾讯文档小程序appId

输入之前拿到的腾讯文档小程序appId

再次, 点击获取更多页面路径
在里面输入自己的微信号, 点击开启, 这样就可以复制小程序的页面链接了

image.png

3. 进入刚刚分享的那个文档

选择复制链接, 获得链接

pages/detail/detail.html?scene=lvDfg4EvrBg4vAFfg4G1ISh3pTPDj1&url=https%3A%2F%2Fdocs.qq.com%2Fdoc%2FDQXhzZURFaXdMZGRP%3Flocalnum%3D1%26wxsdk%3D2.10.3%26miniapp_ts%3D1583659355757%26no_redirect%3D1&qqdocurl=https%3A%2F%2Fdocs.qq.com%2Fdoc%2FDQXhzZURFaXdMZGRP%3Flocalnum%3D1%26wxsdk%3D2.10.3%26miniapp_ts%3D1583659355757%26no_redirect%3D1

选择复制链接

4. 代码

wx.navigateToMiniProgram({
  appId: 'wxd45c635d754dbf59',
  path: 'pages/detail/detail.html?scene=lvDfg4EvrBg4vAFfg4G1ISh3pTPDj1&url=https%3A%2F%2Fdocs.qq.com%2Fdoc%2FDQXhzZURFaXdMZGRP%3Flocalnum%3D1%26wxsdk%3D2.10.3%26miniapp_ts%3D1583659355757%26no_redirect%3D1&qqdocurl=https%3A%2F%2Fdocs.qq.com%2Fdoc%2FDQXhzZURFaXdMZGRP%3Flocalnum%3D1%26wxsdk%3D2.10.3%26miniapp_ts%3D1583659355757%26no_redirect%3D1',
  envVersion: 'release',
  success(res) {
    // 打开成功
  },
  fail: function (e) {
    console.log(e)
  }
})

5.结果

结果

三. 补充

如果使用app来打开资料, 就比较简单, 可以使用wx.openDocument来实现. 原理就是, 将文件下载到缓存里, 然后用系统里的app来打开它

wx.downloadFile({
  url: '文件地址',
  success: (res) => {
    const filePath = res.tempFilePath
    wx.openDocument({
      filePath: filePath,
      success: function (res) {}
    })
  },
  fail: () => {}
})

参考资料

• wx.navigateToMiniProgram
• app.json配置navigateToMiniProgramAppIdList
• wx.openDocument