微信小程序实现保存影集和图片到相册

news/2024/10/22 18:56:23/

 最近在开发一个视频和工具类的小程序,类似于小年糕,需要实现将用户制作的影集保存到本地手机的相册上,页面效果如下:

实现的逻辑如下:

1. 获取用户授权, 如果之前已授权直接下载。

2. 如果用户之前没有授权,则调起用户授权界面,让用户授权,用户同意则下载,不同意则提示。

3. 如果之前调起授权了,但是用户拒绝了,打开设置界面,引导用户开启授权。

以下是代码实现,欢迎大家复制粘贴和吐槽。

首先是WXML代码,

<view class="album-operate"> <view class="edit" bindtap="deleteAlbum"  data-id="{{item.id}}" data-status="{{item.status}}">删除</view><button class="save" data-link="{{item.link}}" data-status="{{item.status}}" bindtap='downloadAlbum'>保存/下载</button><view class="share" bindtap="desabledShare" wx:if="{{item.status==2}}">分享</view><button class="share" open-type="share" data-id="{{item.id}}" data-cover="{{item.cover_url}}" data-name="{{item.name}}" wx:if="{{item.status!=2}}">分享</button>
</view>

以下是JS代码

// 授权下载
downloadAlbum: function(e) {var that = this;// 影集状态var status = e.target.dataset.status;// 下载链接的地址var link = e.target.dataset.link;if (status == 2) {wx.showToast({title: '影集正在制作中,请等待',icon: 'none'});} else {// 获取用户授权wx.getSetting({success(res) {// 如果已授权if (res.authSetting['scope.writePhotosAlbum']) {that.saveAlbum(link);// 如果没有授权 } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {// 调起用户授权wx.authorize({scope: 'scope.writePhotosAlbum',success() {that.saveAlbum(link);},fail() {wx.showToast({title: '您没有授权,无法保存到相册',icon: 'none'})}})// 如果之前授权已拒绝} else {wx.openSetting({success(res) {if (res.authSetting['scope.writePhotosAlbum']) {that.saveAlbum(link);} else {wx.showToast({title: '您没有授权,无法保存到相册',icon: 'none'})}}})}}})}
},// 保存影集
saveAlbum: function (link) {wx.downloadFile({url: link,success(res) {if (res.statusCode === 200) {var path = res.tempFilePathwx.saveVideoToPhotosAlbum({filePath: path,success(res) {if (res.errMsg == 'saveVideoToPhotosAlbum:ok') {wx.showToast({title: '下载完成',})}}})}}})
},


http://www.ppmy.cn/news/695475.html

相关文章

怎么把照片做成电子相册?照片制作视频,简单3步快速拥有炫酷特效!

照片做成电子相册&#xff0c;是以制作一个照片视频的方式呈现给大家&#xff0c;现在非常流行这种做法。火爆抖音的图片视频&#xff0c;刷爆朋友圈的微信相册&#xff0c;都是这种形式。用数码大师&#xff0c;就能简单3步快速拥有大神一般的酷炫特效。从新手小白到大神&…

微信小程序保存图片到相册(多张)

如题 最近遇到了需要保存图片到相册需求&#xff0c;在网上找了半天&#xff0c;很多方法看着流程都没问题&#xff0c;但是借鉴过来都不太行&#xff0c;很多是模拟器上能用&#xff0c;真机上不行。自己也试了很多方法&#xff0c;找到一个适合自己的方法&#xff0c;方法略…

微信反复读取你的相册!官方回应:为便于聊天时快速发图,最新版本将取消...

金磊 发自 凹非寺量子位 报道 | 公众号 QbitAI 人在聊微信&#xff0c;相册被“偷窥”。 而且还是反复读取&#xff0c;每次长达1分钟的那种。 △图源&#xff1a;微博 这两天&#xff0c;一位数码博主在网上曝出的这件“隐私问题”成为了焦点。 毕竟很多人每天都离不开微信&am…

微信小程序 如何把小程序页面保存至用户相册

思路 canvas绘制出页面将canvas转化成图片&#xff0c;获取到临时路径用临时路径将图片保存至相册 组件及API canvas ( 画布 ) 官方文档链接wx.canvasToTempFilePath ( 将canvas转换为临时文件路径 ) 官方文档链接wx.saveImageToPhotosAlbum( 保存图片到系统相册 ) 官方文档…

Python电子相册

功能&#xff1a; &#xff08;1&#xff09;实现图形的显示 &#xff08;2&#xff09;完成图形的放大、缩小、剪切、旋转等功能 &#xff08;3&#xff09;图片的自动播放功能 &#xff08;4&#xff09;图片播放的同时&#xff0c;带有背景音乐 注&#xff1a;照片格式需为j…

Java 简易电子相册(一)

一、前言 如图所示&#xff1a; 目前代码实现了文件夹读取&#xff0c;缩略图展示这两个功能&#xff0c;剩余功能大家看界面也能猜到了&#xff0c;有生之年系列吧&#xff0c;下次想写再说吧。 二、准备 1.win10 2.eclipse 3.jdk 1.8.0_221 4.jar 下载链接&#xff1a;h…

微信拍照和选择相册照片功能chooseImage

这个需求做下来参考了不少文章&#xff0c;其实大多都是一知半解&#xff0c;每个人遇到的问题不同&#xff0c;这篇文章可以说彻底解决wx.chooseImage的各种疑难杂症&#xff0c;一步到位,因此趁着今天休息把整个过程记录下来&#xff0c;分享给之后有需要的各位同行&#xff…

微信小程序示例 - 小相册

小相册是结合腾讯云对象存储服务&#xff08;Cloud Object Service&#xff0c;简称COS&#xff09;制作的一个微信小程序示例。在代码结构上包含如下两部分&#xff1a; https://github.com/CFETeam/weapp-demo-album/blob/master/README.md app: 小相册应用包代码&#xff…