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

實(shí)現(xiàn)的邏輯如下:
1. 獲取用戶(hù)授權(quán), 如果之前已授權(quán)直接下載。
2. 如果用戶(hù)之前沒(méi)有授權(quán),則調(diào)起用戶(hù)授權(quán)界面,讓用戶(hù)授權(quán),用戶(hù)同意則下載,不同意則提示。
3. 如果之前調(diào)起授權(quán)了,但是用戶(hù)拒絕了,打開(kāi)設(shè)置界面,引導(dǎo)用戶(hù)開(kāi)啟授權(quán)。
以下是代碼實(shí)現(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: '影集正在制作中,請(qǐng)等待',
icon: 'none'
});
} else {
// 獲取用戶(hù)授權(quán)
wx.getSetting({
success(res) {
// 如果已授權(quán)
if (res.authSetting['scope.writePhotosAlbum']) {
that.saveAlbum(link);
// 如果沒(méi)有授權(quán)
} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
// 調(diào)起用戶(hù)授權(quán)
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.saveAlbum(link);
},
fail() {
wx.showToast({
title: '您沒(méi)有授權(quán),無(wú)法保存到相冊(cè)',
icon: 'none'
})
}
})
// 如果之前授權(quán)已拒絕
} else {
wx.openSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
that.saveAlbum(link);
} else {
wx.showToast({
title: '您沒(méi)有授權(quán),無(wú)法保存到相冊(cè)',
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: '下載完成',
})
}
}
})
}
}
})
},
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
簡(jiǎn)述凍結(jié)JS對(duì)象方法技術(shù)
本文主要介紹了凍結(jié)JS對(duì)象方法技術(shù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
JavaScript中數(shù)組嵌套對(duì)象排序方法的示例詳解
在?JavaScript?中,可以使用?sort()?方法對(duì)包含嵌套對(duì)象的數(shù)組進(jìn)行排序,本文將通過(guò)三個(gè)簡(jiǎn)單的示例為大家進(jìn)行簡(jiǎn)單的介紹,需要的可以參考下2024-03-03
JavaScript判斷表單提交時(shí)哪個(gè)radio按鈕被選中的方法
這篇文章主要介紹了JavaScript判斷表單提交時(shí)哪個(gè)radio按鈕被選中的方法,實(shí)例分析了javascript操作表單radio按鈕的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下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)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起看看吧2018-09-09
JavaScript對(duì)象數(shù)組的排序處理方法
這篇文章主要介紹了JavaScript對(duì)象數(shù)組的排序處理方法,以實(shí)例形式分析了JavaScript對(duì)象數(shù)組的排序原理與相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10

