微信小程序开发分享,保存图片和视频遇到的问题以及解决办法。

本文介绍了一种解决微信小程序中图片和视频保存时显示保存按钮的问题。通过使用双image组件和video组件的fullScreen属性,实现了仅在查看大图或全屏播放时才显示保存选项的功能。

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

问题一:查看图片调用的是wx.previewImage接口,可以直接实现点击查看大图功能,然后保存图片,image组件自带 show-menu-by-longpress="{{true}}"  属性可以实现长按保存功能,但是这个属性是绑定在图片上,所以不管图片是大图还是小图都会触发这个属性,那么如何解决这个问题呢?

 

解决办法:写两个 image 组件 ,一个加上 show-menu-by-longpress="{{true}}"  属性,另一个不加,然后在wx.previewImage() 方法的success回调里,让加上  show-menu-by-longpress="{{true}}" 的 image 组件渲染,另一个不让渲染。 然后在complete回调里,让 不带  show-menu-by-longpress="{{true}}" 属性的组件渲染,这样就可以实现查看大图并支持长按保存了。代码片段如下

wxml代码:

js代码:

问题二:保存视频会遇到保存图片同样的问题,因为视频播放用的是video组件,保存事件绑定在video组件上,同样不管小窗口还是全屏都会出现保存按钮,那么如何解决这个问题呢?

解决办法:video 组件自身有一个属性

可以用来判断当前视频是否在全屏状态下,我们就可以利用这个属性来设定一个flag值,fullScreen 为 true 的时候,置flag为1,fullScreen 为 false 的时候,置flag为2,然后在 flag 为1 的时候去调用保存视频的方法,至于保存视频的方法我也会在后面分享。

wxml代码:

js代码:

 

保存视频的方法:

我开发的时候也借鉴了好多大佬的分享,这是自己的一点分享,希望能帮到大家。。。。 

 

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值