微信小程序?qū)崿F(xiàn)保存影集和圖片到相冊
最近在開發(fā)一個視頻和工具類的小程序,類似于小年糕,需要實現(xiàn)將用戶制作的影集保存到本地手機的相冊上,頁面效果如下:

實現(xiàn)的邏輯如下:
1. 獲取用戶授權(quán), 如果之前已授權(quán)直接下載。
2. 如果用戶之前沒有授權(quán),則調(diào)起用戶授權(quán)界面,讓用戶授權(quán),用戶同意則下載,不同意則提示。
3. 如果之前調(diào)起授權(quán)了,但是用戶拒絕了,打開設(shè)置界面,引導(dǎo)用戶開啟授權(quán)。
以下是代碼實現(xiàn),歡迎大家復(fù)制粘貼和吐槽。
首先是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代碼
// 授權(quán)下載
downloadAlbum: function(e) {
var that = this;
// 影集狀態(tài)
var status = e.target.dataset.status;
// 下載鏈接的地址
var link = e.target.dataset.link;
if (status == 2) {
wx.showToast({
title: '影集正在制作中,請等待',
icon: 'none'
});
} else {
// 獲取用戶授權(quán)
wx.getSetting({
success(res) {
// 如果已授權(quán)
if (res.authSetting['scope.writePhotosAlbum']) {
that.saveAlbum(link);
// 如果沒有授權(quán)
} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
// 調(diào)起用戶授權(quán)
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.saveAlbum(link);
},
fail() {
wx.showToast({
title: '您沒有授權(quán),無法保存到相冊',
icon: 'none'
})
}
})
// 如果之前授權(quán)已拒絕
} else {
wx.openSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
that.saveAlbum(link);
} else {
wx.showToast({
title: '您沒有授權(quán),無法保存到相冊',
icon: 'none'
})
}
}
})
}
}
})
}
},
// 保存影集
saveAlbum: function (link) {
wx.downloadFile({
url: link,
success(res) {
if (res.statusCode === 200) {
var path = res.tempFilePath
wx.saveVideoToPhotosAlbum({
filePath: path,
success(res) {
if (res.errMsg == 'saveVideoToPhotosAlbum:ok') {
wx.showToast({
title: '下載完成',
})
}
}
})
}
}
})
},
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中數(shù)組嵌套對象排序方法的示例詳解
在?JavaScript?中,可以使用?sort()?方法對包含嵌套對象的數(shù)組進行排序,本文將通過三個簡單的示例為大家進行簡單的介紹,需要的可以參考下2024-03-03
JavaScript判斷表單提交時哪個radio按鈕被選中的方法
這篇文章主要介紹了JavaScript判斷表單提交時哪個radio按鈕被選中的方法,實例分析了javascript操作表單radio按鈕的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
return false;和e.preventDefault();的區(qū)別
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple2010-07-07
JS中DOM元素的attribute與property屬性示例詳解
這篇文章主要給大家介紹了關(guān)于JS中DOM元素的attribute與property屬性的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起看看吧2018-09-09

