微信小程序｜小程序如何判断openDocument被关闭

小蹦跶儿2024-02-01 15:56

前言：

在微信小程序中，预览文件用的都是wx.openDocument()方法。现在有个需求，需要在文件关闭后调用一个方法。那么，如何知道文件已经被关闭了呢？

此文将对此问题提供思路和方案。

一、实现思路

因为小程序没有监听openDocument关闭事件的方法。

所以，我的思路是:

声明一个变量flag的默认值为false，用于记录文件是否已经打开过；
打开文件的时候设置缓存变量flag为true；
页面onShow的时候，获取缓存flag的值并开始判断；
当flag有值并且为true的时候，处理自己的逻辑，同时将flag恢复默认值false。

二、实现方案

按照思路步骤依次如下图所示：

下面附上相关的所有代码：

js 复制代码

Page({
  data: {
    flag: false,
  },
  
  onLoad: function (options) {
    this.wxDownLoad(options); // 因为我的需求是页面onLoad的时候就打开文件
  },
  
  wxDownLoad(options) {
    let that = this;
    wx.showLoading({
      title: '正在打开...',
    });
    wx.downloadFile({
      url: options.url,
      filePath: wx.env.USER_DATA_PATH + "/" + decodeURIComponent(options.name), // 设置自定义标题
      success: (res) => {
        if (res.statusCode === 200) {
          const filePath = res.filePath;
          wx.openDocument({
            showMenu: true,
            filePath: filePath,
            success: function (res) {
              that.setData({ flag: true })
              wx.hideLoading();
            },
          })
        }
      }
    })
  },
  
  onShow: function () {
    if (this.data.flag) {
      this.setData({ flag: false })
      wx.navigateBack();
    }
  },
})
·

三、需求拓展

备注：

我这边的具体需求是这样的：
微信小程序webview内嵌的H5页面中，点击H5的文件能在小程序中打开。

为了实现这个需求，在H5与微信小程序通信时，设计点击H5中的文件跳转到小程序的一个空白页，然后在空白页onLoad的时候，进行打开文件的操作。

但是这样的话，在关闭文件时会显示空白页，影响用户体验，所以需要在关闭文件的时候，自动将空白页关闭，直接显示内嵌的H5页面。

也就是只要判断文件已经被关闭，然后调用wx.navigateBack()即可实现。

另：此文也可作为上一篇文章---------微信小程序中webView的H5页面与小程序双向通信，调用微信小程序预览文件功能中预览文件功能的细节补充。

以上，希望对大家有帮助！