WebView引入的页面如何实现交互。通过webview方式嵌套在小程序里面的页面如何实现保存到相册的功能(暂未解决)

uni-app 通过webview方式嵌套H5实现图片点击下载-云社区-华为云

之前自己用下面得方法发现并不能解决问题,就先记录下来了。上面这个链接有待验证。大家也可以参考一下。

通过 WebView 方式嵌套在小程序中的页面,保存图片到相册的功能需要借助 WebView 的内部通信机制。以下是实现步骤:

1. 小程序端,给 WebView 组件添加一个监听事件,以便接收来自 WebView 页面的消息: ```html

<web-view src="WebView页面链接" bindmessage="handleMessage"></web-view>

 2. 在小程序的 js 文件中,定义一个 handleMessage 方法,用于接收 WebView 页面发送的消息:

```javascript

Page({

handleMessage: function (e) {

  const message = e.detail.data; // 判断消息类型

  if (message.type === 'saveImage') {

    const imageUrl = message.imageUrl; // WebView 页面传递的图片链接

    // 调用小程序的保存图片接口

   wx.downloadFile({

     url: imageUrl,

     success: function (res) {

     const tempFilePath = res.tempFilePath; // 下载后的临时文件路径                             

   wx.saveImageToPhotosAlbum({

      filePath: tempFilePath,

      success: function () {

      wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 });

   },

fail: function () {

       wx.showToast({ title: '保存失败', icon: 'none', duration: 2000 });

}

}); },

fail: function () {

    wx.showToast({ title: '下载图片失败', icon: 'none', duration: 2000 });

} });

} } });

3. WebView 页面的 js 中,触发保存图片的操作,并发送消息给小程序:

```javascript

// 触发保存图片的操作

function saveImage() { // 假设图片链接为 imageUrl

  const imageUrl = 'https://example.com/image.jpg'; // 向小程序发送消息      wx.miniProgram.postMessage({ data: { type: 'saveImage', imageUrl: imageUrl } }); }

``` 注意,试了一下必须得特殊得情形才可以触发web-view | 微信开放文档

目前还没有找到解决思路。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值