微信小程序點擊保存圖片到本地相冊——踩坑

在微信小程序中要保存圖片到本地相冊，需要獲取相冊權限。

總之整個功能實現下來需要如下幾個小程序的API：wx.getSetting，wx.authorize，wx.openSetting，wx.downloadFile，wx.saveImageToPhotosAlbum

但是在openSetting 和 downloadFile 會有坑！

openSetting,【打開小程序設置頁】有坑，是官方的問題，這里出現授權彈框，如果你點擊拒絕再次引導授權流程彈框不會立馬彈出（官方解釋說因為頻繁代用授權會帶來各種一系列問題），如果想馬上再次彈出授權彈框需要通過button來解決。
點擊查看官方解釋

//再次打開授權引導

方法1：使用 button 組件來使用此功能，示例代碼如下：
<button open-type="openSetting" bindopensetting="callback">打開設置頁</button>

方法2:由點擊行為觸發wx.openSetting接口的調用，示例代碼如下：
<button bindtap="openSetting">打開設置頁</button>  openSetting() {  wx.openSetting()}

wx.downloadFile 保存圖片的時候，打印成功回調里邊會有tempFilePath 后綴名不正確格式。（Android機會有這種情況，iOS不清楚），就回導致后續wx.saveImageToPhotosAlbum方法是出現錯誤：文件格式類型錯誤問題

解決方法：

重點：

有的說dowloadFile的url值要是jpg格式的，但是我試png也可以，具體情況具體分析。

var fileN=new Date().valueOf();
//filePath指定文件下載后存儲的路徑，wx.env.USER_DATA_PATH
var fileP=wx.env.USER_DATA_PATH+'/'+fileN+'.jpg'
wx.dowloadFile({
    url:'你的圖片url地址',
    filePath:fileP,//這里要加這個filePath屬性
    success:(res)=>{
        var filePath=res.filePath;
        wx.saveImageToPhotosAlbum({
            filePath,
            success:(res)=>{
                console.log('保存成功')
            }
        })
    }
    
})

 

---

完整代碼

<image src="{{url}}"></image>
<view bindtap="clickSaveImg" class="save-code"></view>

Page({
    data:{
        url:'',//圖片地址
    },
    clickSaveImg(){//先授權相冊
        wx.getSetting({
            success:res=>{
                if(!res.authSetting['scope.writePhotosAlbum']){//未授權的話發起授權
                    wx.authorize({
                        scope:'scope.writePhotosAlbum',
                        success:()=>{//用戶允許授權，保存到相冊
                            this.saveImg();
                        },
                        fail:()=>{//用戶拒絕授權，然后就引導授權（這里的話如果用戶拒絕，不會立馬彈出引導授權界面，坑就是上邊所說的官網原因）
                            wx.openSetting({
                                success:()=>{
                                    wx.authorize({
                                        scope:'scope.writePhotosAlbum',
                                        succes:()=>{//授權成功，保存圖片
                                        this.saveImg();
                                            
                                        }
                                    })
                                }
                            })
                        }
                    })
                }else{//已經授權
                    this.saveImg();
                }
            }
        })
    },
    
    saveImg(){//保存到相冊
        let {url} = this.data;
        wx.downloadFile({//這里如果有報錯就按照上邊的解決方案來處理
            url:url,
            success:(res)=>{
                wx.saveImageToPhotosAlbum({
                    filePath:res.tempFilePath,
                    success:(res)=>{
                        wx.showToast({
                            title:'保存成功！'
                        })
                    },
                    faile:(err)=>{
                        console.log('失敗！')
                    }
                })
            }
        })
    },

})

 

---

到了這里可以打開調試和在開發者工具都測試一下試試可不可以保存。

最后一個坑

在開發者工具和手機打開調試都可以成功保存圖片，但是關了調試，就不可以保存。這個時候需要登錄到微信小程序后台(開發->開發設置)，查看downloadFile合法域名 中有沒有配置合法域名，也就是下載圖片路徑的白名單，你的圖片路徑域名需要在這里配置，才可以！然后就可以保存圖片！！！

 

---

原文鏈接：https://blog.csdn.net/sxs7970/java/article/details/104516732