会员中心

小程序页面效果开发 下载图片并且显示进度

以下这篇关于小程序页面效果的开发，为大家介绍如何实现 下载图片并且显示进度 

 图片效果

wxml

js

 


    
	
  1. 
		1 downImg: function(e) {
    2. 
	
  2. 
		2 var _this = this;
    3. 
	
  3. 
		3
    4. 
	
  4. 
		4 // 获取图片地址(http://www.playsort.cn/...)
    5. 
	
  5. 
		5 var img = e.currentTarget.dataset.src;
    6. 
	
  6. 
		6
    7. 
	
  7. 
		7 // 下载监听进度
    8. 
	
  8. 
		8 const downloadTask = wx.downloadFile({
    9. 
	
  9. 
		9 url: img,
    10. 
	
  10. 
		10 success: function(res) {
    11. 
	
  11. 
		11 // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    12. 
	
  12. 
		12 console.log(res)
    13. 
	
  13. 
		13 if (res.statusCode === 200) {
    14. 
	
  14. 
		14 wx.saveImageToPhotosAlbum({
    15. 
	
  15. 
		15 filePath: res.tempFilePath,
    16. 
	
  16. 
		16 success: function(res) {
    17. 
	
  17. 
		17 wx.showToast({
    18. 
	
  18. 
		18 title: '保存图片成功!~',
    19. 
	
  19. 
		19 });
    20. 
	
  20. 
		20 },
    21. 
	
  21. 
		21 fail: function(res) {
    22. 
	
  22. 
		22 wx.showToast({
    23. 
	
  23. 
		23 title: '保存图片失败!~',
    24. 
	
  24. 
		24 });
    25. 
	
  25. 
		25 }
    26. 
	
  26. 
		26 })
    27. 
	
  27. 
		27 }
    28. 
	
  28. 
		28 }
    29. 
	
  29. 
		29 });
    30. 
	
  30. 
		30 downloadTask.onProgressUpdate((res) => {
    31. 
	
  31. 
		31 if (res.progress === 100) {
    32. 
	
  32. 
		32 this.setData({
    33. 
	
  33. 
		33 progress: ''
    34. 
	
  34. 
		34 });
    35. 
	
  35. 
		35 } else {
    36. 
	
  36. 
		36 this.setData({
    37. 
	
  37. 
		37 progress: res.progress + '%'
    38. 
	
  38. 
		38 });
    39. 
	
  39. 
		39 }
    40. 
	
  40. 
		40 });
    41. 
	
  41. 
		41 }
    42. 




	



	多程序小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店







   
   

        上一篇 
            
                百度统计如何接入微信小程序            
        
        下一篇 
            
                微信小程序商户密钥的获取方法            
        
    
 
    论坛资讯同步说明，本文同步自论坛：bbs.miaozhizuo.com，如您在论坛注册成为会员用户并且发帖，则默认论坛文章同步协议，协议内容请移步论坛查看！



    
    
             
    • 
        
    • 
        
    • 
    

    
                
            
                
          在线客服

                                点击这里给我发消息					                
          VIP咨询

                              点击这里给我发消息                                    

                
          咨询热线

                
   17080039991

                
      (免费拨打)

            

            

            
                
          代理招商

                				                                 
   178-9531-8531

            

            [关闭]        

        
            随手APP微信            
官方微信自助客服

            [关闭]