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

本文讲述了如何在微信小程序中使用加密库(npminstallcrypto-js)进行数据加密,以及如何通过weixin-js-sdk实现从网页到小程序页面的跳转,并在小程序中处理上传链接解密、下载文件和文件预览的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用到了一个加密
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()
            }
        })
    },
微信小程序中,如果需要在Webview嵌套H5页面,并提供一个左上角的“退出”功能,通常的做法是在H5页面中添加一个点击事件,该事件通过JSBridge(即WeApp提供的JavaScript和原生之间通信的方式)将用户请求传递给小程序。在小程序端,你可以编写相应的处理函数来响应这个请求,然后关闭当前的Webview或者整个小程序。 以下是一个简单的步骤概述: 1. **H5页面**:在H5的HTML结构中添加一个按钮,例如: ```html <button id="exitButton">退出</button> ``` 然后在JavaScript中监听这个按钮的点击事件: ```javascript document.getElementById('exitButton').addEventListener('click', function() { wx.miniProgram.showOptionMenu({ itemList: ['返回', '退出'], success: function(res) { if (res.showReturn) { // 返回小程序其他页面 } else { // 调用JSBridge关闭Webview或退出小程序 wx.miniProgram.invokeMiniProgram({ url: '', success: function() { console.log('已退出小程序'); }, fail: function() { console.error('退出失败'); } }); } } }); }); ``` 2. **JSBridge**:你需要在小程序的`app.js`文件中配置并启用JSBridge,以便在H5页面和小程序间传递数据。 3. **小程序端**:在接收到来自H5的"退出"请求后,你需要处理关闭Webview的操作,如果是关闭整个小程序,则可能涉及到销毁当前页面或者关闭所有Webview。 注意,微信小程序有严格的权限控制,关于退出操作可能会受到限制。在实际开发中,最好遵守小程序的相关规定,并测试在各种场景下的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值