[移动开发]微信小程序下载一个视频到本地相册，显示下载进度，可取消下载

<text bindtap="_onDownloadClick">下载</text>

<view class="download-area" wx:if="{{actionData}}" >
  <text class="progress">{{progress||0}}%</text>
  <text class="moment">正在下载成片，请稍等片刻…</text>
</view>

//点击下载按钮

_onDownloadClick(){
??? this.getPhotosAlbumAuth()
},

//获取相册权限
getPhotosAlbumAuth() {
? var that = this;
? wx.getSetting({
??? success(res) {
????? if (!res.authSetting['scope.writePhotosAlbum']) {
??????? wx.authorize({
????????? scope: 'scope.writePhotosAlbum',
????????? success:()=> { //这里是用户同意授权后的回调
??????????? that.handleDownload();
????????? },
????????? fail:()=> { //这里是用户拒绝授权后的回调
??????????? that.rejectSetting()
????????? }
??????? })
????? } else { //用户已经授权过了
??????? that.handleDownload();
????? }
??? }
? })
},

//用户拒绝授权后的回调
rejectSetting(){
? var that=this;
? wx.showModal({
??? title: '警告',
??? content: '授权失败，请打开相册的授权',
??? success: (res) => {
????? if (res.confirm) { //去授权相册
??????? that.toOpenSetting();
????? } else if (res.cancel) {//用户点击取消
??????? console.log(res);
??????? wx.showModal({
????????? title: '提示',
????????? content: '获取权限失败，将无法保存到相册哦~',
????????? showCancel: false,
????????? success:(res)=>{
??????????? that.toOpenSetting();
????????? }
??????? })
????? }
??? }
? })
},
//打开微信设置页面
toOpenSetting() {
? wx.openSetting({
??? success: (e) => {
????? console.log(e);
??? }
? })
},

//下载
handleDownload() {
//下载的时候想需要展示一个进度条的页面
? this.setData({
??? showAction:true
? });

? let fileName = new Date().valueOf();
? (this as any).downloadTask = wx.downloadFile({
??? url: this.data.link,//视频的url地址
?? filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',//固定的相册的路径不需要修改
??? success: res => {
????? let filePath = res.filePath;//下载到本地获取临时路径
????? wx.saveVideoToPhotosAlbum({
??????? filePath,
??????? success: file => {
????????? wx.showToast({
??????????? title: '下载成功',
??????????? icon: 'success',
??????????? duration: 2000
????????? })
????????? let fileMgr = wx.getFileSystemManager();
????????? fileMgr.unlink({//删除临时文件
??????????? filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',
??????????? success: function (r) {
????????????? console.log("r",r)
??????????? },
????????? })
??????? },
??????? fail: err => {
????????? console.log(err);
????????? this.data.progress>0&&this.downloadTask.abort() // 取消下载任务
??????? }
????? })
??? }
? });

? this.downloadTask.onProgressUpdate((res: any) => {
??? this.setData({
????? progress:res.progress
??? })
??? if(res.progress==100){
????? this._onSheetCancel();
??? }
?? // console.log('下载进度', res.progress)
?? // console.log('已经下载的数据长度', res.totalBytesWritten)
?? // console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
})

},

//取消下载
_onDownloadCancel(){
? this.data.progress>0&&this.downloadTask.abort() // 取消下载任务
},