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

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

实现的逻辑如下：

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: '下载完成',})}}})}}})
},

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

微信小程序使用wxParse，解决图片显示路径问题
微信小程序使用wxParse,解决图片显示路径问题参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
微信小程序，动态改变背景图片
前言,作为开发新人,最近在学习微信小程序,期间遇到不少问题,对问题的解决的方法进行记录,以供学习之用. 关于微信小程序的背景图片问题, 1.微信小程序不能使用本地的图片设置背景图片,即 <vie ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...
微信小程序使用image组件时图片不显示的一个解决方法
第一次写博客: 图片链接可正常访问,但是使用组件时,图片不显示,偶然之间尝试到了一种解决方法,我使用的是微信小程序云端,读取本地图片时使用了具体的路径,错误用法如下如果按照指示\ 一级一级选下来,导 ...
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...
微信小程序头像保存方法，适合评论类保存，防止头像链接失效方法(已解决)
之前做的项目需要保存用户头像,需要解决的问题有以下 1.如果使用open-data里的数据则只能用于给当前用户展示自己的头像,无法用于评论区给全部用户显示头像 2.如果每次进入小程序使用wx.getU ...
微信小程序下载保存文件
前言总是有需求想在微信小程序里面做下载文件并保存的功能,所以自己整理了一下小程序涉及到下载api,大致理了下在小程序里面下载的流程和解决方案. 一.涉及api 1.wx.saveFile() 文 ...

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

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

最新文章

热门文章