微信小程序webview 中下载图片或者视频的功能

背景

在微信小程序webview 中，是无法通过正常的前端下载去下载图片和视频的，必须经过微信小程序

实现

单独为下载建一个空页面，下载完成后，就跳回上个页面

vue3 + TS 中

postMessage

// 判断是否是微信小程序
function isWechatMiniProgram() {
    const ua = navigator.userAgent.toLowerCase();
    // 微信小程序的 webview User Agent 中包含 "miniprogram" 标识
    return ua.includes('miniprogram');
}

function downloadVideo() {
    if (isWechatMiniProgram()) {
        // wx?.miniProgram?.postMessage({ data: { videoUrl: "xxxxx" } });
        // 跳转到小程序的另一个页面 去下载
        wx.miniProgram.redirectTo({
            url: '/pages/downloadVideo/downloadVideo?videoUrl=' + encodeURIComponent(DLVideoUrl.value),
        });
    }
}

微信小程序 原生

/pages/downloadVideo/downloadVideo

<!--index.wxml-->
<view></view>

// pages/downloadVideo/downloadVideo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoUrl: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    if (options.videoUrl) {
      this.setData({
        videoUrl: decodeURIComponent(options.videoUrl)
      });
      console.log('videoUrl:', options.videoUrl);
      // this.downloadVideo(options.videoUrl);
    }
  },

  downloadVideo(videoUrl) {
    console.log('videoUrl:', videoUrl);
    const token = wx.getStorageSync('token') || ''; // 从本地缓存中获取 Token
    wx.downloadFile({
      url: videoUrl,
      header: {
        Authorization: 'Bearer ' + token,
      },
      success(res) {
        console.log('res:', res);
        if (res.statusCode === 200) {
          const tempFilePath = res.tempFilePath;
          wx.saveVideoToPhotosAlbum({
            filePath: tempFilePath,
            success() {
              console.log('视频保存成功');
              wx.showToast({
                title: '视频保存成功',
                icon: 'success'
              });
              // 返回上一页
              wx.navigateBack();
            },
            fail(err) {
              console.log('保存视频失败', err);
              wx.showToast({
                title: '视频保存失败',
                icon: 'none'
              });
              console.error('保存视频失败', err);
              // 返回上一页
              wx.navigateBack();
            }
          });
        } else {
          wx.showToast({
            title: '视频保存失败',
            icon: 'none'
          });
          // 返回上一页
          wx.navigateBack({
            delta: 1 // 返回的页面层数，1表示返回上一页
          });
        }
      },
      fail(err) {
        console.error('下载视频失败', err);
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if (this.data.videoUrl) {
      this.downloadVideo(this.data.videoUrl);
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})