uniapp微信小程序使用webview嵌套h5的文件下载问题

公司有个小程序项目,就是单纯的小程序中使用web-view嵌套h5的项目。但是在文件下载的时候,安卓手机点击没反应,ios能打开文件但是都是乱码。

在网上也找了很久,后来确定了一种思路,通过判断当前的宿主环境来进行不同的操作,然后在h5中跳转到小程序的特定页面,并且将文件资源的URL传递过去。之后在小程序中调用微信的下载文件或者保存文件API。

总体思路就是这样,上代码。

h5端代码

// 判断所在环境
				 var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') {
					// 打开微信特定页面,然后下载文件
					WX.miniProgram.navigateTo({
						url: `/pages/file-upload/file-upload?url=${encodeURIComponent(fileDownPath)}`
						})
					// console.log('是微信客户端')
				} else {
					// h5端直接使用a标签下载
					this.downloadH5(fileDownPath,item.fieldName)
					console.log('不是微信客户端')
				}

小程序代码
1.新建一个文件下载页面(也就是h5跳转的)

uniapp微信小程序使用webview嵌套h5的文件下载问题_第1张图片
2.生命周期中获取到传递的文件资源URL

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this
    let url = decodeURIComponent(options.url) // 解码
    console.log(url);
    this.setData({
      url: url
    })
    wx.showLoading({
      title: '加载中...',
    })
    wx.downloadFile({ // 下载文件
      url: that.data.url,
      success: function (res) {
        that.setData({
          tempFilePath:res.tempFilePath
        })
        let filePath = res.tempFilePath // 文件临时路径
        debugger

        wx.openDocument({ // 预览文件
          filePath: filePath,
          showMenu: true,
          success: function (res) {
            wx.hideLoading();
          },
          fail: function (error) {
            console.log(error);
          }
        })
      },
      fail: function (error) {
        console.log(error);
        wx.showToast({
          title: '文件下载失败',
          icon: 'error'
        })
        wx.hideLoading()
      }
    })

  },

3.上面只是下载文件和预览文件,这时候文件还未存在手机中,需要调用保存文件API

// 保存文件
  downFile() {
    wx.showLoading({
      title: '文件保存中',
    })
    let that = this
    wx.saveFile({ // 保存
      tempFilePath: that.data.tempFilePath, // uploadFile返回的临时路径
      success: (res) => {
        let filePath = res.savedFilePath // 存放的路径
        wx.showToast({
          title: '保存成功:' + filePath,
          icon: 'none'
        })
        setTimeout(() => {
          wx.hideLoading({
            success: (res) => {
              wx.navigateBack({
                delta: 1,
              })
            },
          })
        }, 1500);

      },
      fail: (err) => {
        debugger
        wx.showToast({
          title: '文件保存失败',
          icon: 'error'
        })
        console.log(err)
      }
    })
  },

over~!

你可能感兴趣的:(bug记录,微信小程序,html5,uni-app)