小程序webview嵌套h5,h5调用小程序加载

用到了一个加密
npm install crypto-js
这是H5的加密以及解密,当然,微信小程序上也需要去封装一个对应的方法进行解密
链接: link
这个就不在这写了

安装 微信wxjssdk

npm install weixin-js-sdk -S	
//引用
import jweixin from 'weixin-js-sdk'
通过sdk内的方法跳转到小程序中转页面获取参数,并报错,然后返回到webview页面 去执行下载
  jweixin.miniProgram.navigateTo({
        url: `/pages/upload/upload?link=${Encrypt(e.url)}`
    })

小程序页面 pages/upload/upload

onLoad: function(options) {
      let that = this;
      console.log(options)
      wx.setStorageSync('uploadData', options)//保存传入的参数
  	//option为一个对象,内容就是{ link地址}
      let pages = getCurrentPages();
      let previousPage = pages[pages.length - 2]; //上一个页面
      previousPage.setData({
        isDownLoadPageBack: true  //在上一个页面设置标记,用来判断
      })
      wx.navigateBack({
        delta: 1
      })
    },

webview 页面

data: {
        isDownLoadPageBack: false,
    },
 onShow() {
        wx.hideHomeButton();
        if (this.data.isDownLoadPageBack) {
            this.getDownLoadFile() //具体的微信下载文件的方法
        }
        //每次onShow执行完,还有上面的下载方法执行完后要把这个标记重置为false,这样不同情况触发的onShow才能区分是否是下载文件页面回来的。可能写的重复但是多写几次比较放心
        this.setData({
            isDownLoadPageBack: false
        })
    },

//下载
 getDownLoadFile() {
        wx.showLoading({
            title: '下载中', //提示文字
            mask: true, //是否显示透明蒙层,防止触摸穿透,默认:false  
        })
        let that = this;
        let options = wx.getStorageSync('uploadData')
        let timeStamp = (Date.parse(new Date())) / 1000; //定义了时间戳拼接在文件名前防止名字重复
        const downloadTask = wx.downloadFile({ //微信下载文件方法
            //这里拼接成需要的格式
            url: $api.decrypt(options.link, 'epointnetcnr9898'),
            header: {
            },
            success(res) {
                wx.getFileSystemManager().saveFile({ //微信保存文件,这个存储有点复杂
                    // 临时存储路径,先有临时存储路径方可使用wx官方的存储本地路径( wx.env.USER_DATA_PATH )
                    tempFilePath: res.tempFilePath,
                    //定义本地的存储路径及名称
                    filePath: wx.env.USER_DATA_PATH + '/' + timeStamp,
                    success(res) {
                        const savedFilePath = res.savedFilePath;
                        console.log(456)
                        wx.hideLoading()
                        wx.openDocument({ //微信打开文件
                            filePath: savedFilePath,
                            showMenu: true,
                            success: function (res) {
                                that.setData({
                                    waitWord: '返回请点击左上角',
                                    isDownLoadPageBack: false
                                });
                            },
                            fail: function (err) {
                                console.log(res)
                                wx.showToast({
                                    title: '预览失败',
                                    icon: 'error',
                                    duration: 1500
                                })
                                that.setData({
                                    waitWord: '文件预览失败,请稍后重试',
                                    isDownLoadPageBack: false
                                });
                            }
                        });

                    },
                    fail(err) {
                        wx.showToast({
                            title: '预览失败',
                            icon: 'error',
                            duration: 1500
                        })
                        that.setData({
                            waitWord: '文件预览失败,请稍后重试',
                            isDownLoadPageBack: false
                        });
                    }
                })

            },
            fail(err) {
                wx.hideLoading()
                wx.showToast({
                    title: '下载失败',
                    icon: 'error',
                    duration: 1500
                })
                console.log(err)
                that.setData({
                    waitWord: '文件下载失败,请稍后重试',
                    isDownLoadPageBack: false
                });
            }
        })
        downloadTask.onProgressUpdate((res) => {
            console.log('下载进度', res.progress)
            console.log('已经下载的数据长度', res.totalBytesWritten)
            console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
            if (res.totalBytesWritten == 100) {
                wx.hideLoading()
            }
        })
    },
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值