小程序頁面效果開發(fā) - 下載圖片并且顯示進(jìn)度
2020-09-27|HiShop
導(dǎo)讀:以下這篇關(guān)于小程序頁面效果的開發(fā),為大家介紹如何實現(xiàn) 下載圖片并且顯示進(jìn)度 ...
以下這篇關(guān)于小程序頁面效果的開發(fā),為大家介紹如何實現(xiàn) 下載圖片并且顯示進(jìn)度
圖片效果
wxml
js
- 1 downImg: function(e) {
- 2 var _this = this;
- 3
- 4 // 獲取圖片地址(http://www.playsort.cn/...)
- 5 var img = e.currentTarget.dataset.src;
- 6
- 7 // 下載監(jiān)聽進(jìn)度
- 8 const downloadTask = wx.downloadFile({
- 9 url: img,
- 10 success: function(res) {
- 11 // 只要服務(wù)器有響應(yīng)數(shù)據(jù),就會把響應(yīng)內(nèi)容寫入文件并進(jìn)入 success 回調(diào),業(yè)務(wù)需要自行判斷是否下載到了想要的內(nèi)容
- 12 console.log(res)
- 13 if (res.statusCode === 200) {
- 14 wx.saveImageToPhotosAlbum({
- 15 filePath: res.tempFilePath,
- 16 success: function(res) {
- 17 wx.showToast({
- 18 title: '保存圖片成功!~',
- 19 });
- 20 },
- 21 fail: function(res) {
- 22 wx.showToast({
- 23 title: '保存圖片失敗!~',
- 24 });
- 25 }
- 26 })
- 27 }
- 28 }
- 29 });
- 30 downloadTask.onProgressUpdate((res) => {
- 31 if (res.progress === 100) {
- 32 this.setData({
- 33 progress: ''
- 34 });
- 35 } else {
- 36 this.setData({
- 37 progress: res.progress + '%'
- 38 });
- 39 }
- 40 });
- 41 }
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請查看:小程序商店
您可能感興趣:小程序開發(fā)
上一篇:微信小程序打包插件開發(fā)體驗 下一篇:微信小程序開發(fā)框架的選擇