• 微信瀏覽器開啟h5頁面如果是img標籤的話，長按會彈出儲存圖片的選項。但是微信小程式裡面不可以，需要自己寫這個功能。
• 這個功能有兩個點，一個是長按，一個是儲存圖片到本地。

1. 微信小程式關於圖片長按的解釋，有兩種：

因此我們選用 bindlongpress 事件

2. 微信小程式同樣提供了儲存圖片的介面，是wx.saveImageToPhotosAlbum()

3. 值得說的是，儲存的介面，兩個需要注意的地方：

1、需要先授權，呼叫 wx.getSetting()方法

2、儲存的圖片路徑引數，不支援網路路徑，而在我們渲染頁面時，用到的圖片有很大可能是網路路徑，這時候我們需要先把網路路徑轉為可用的本地路徑，wx.getImageInfo()方法可以滿足需要

4. 最後再走個心吧，畢竟我這麼可愛

1、長按後直接儲存未免潦草了些，考慮到使用者體驗，加入 wx.showActionSheet()
2、如果使用者拒絕授權 或者 以前拒絕過授權，這時候也應該給他提示，或者展示再次開啟授權的入口

將將！然後就可以開始寫程式碼了：

<imagesrc="{{url}}"data-url="{{url}}"bindlongpress="saveImage"></image>

// 長按儲存功能--授權部分
saveImage (e) {
    let _this = this
    wx.showActionSheet({
        itemList: ['儲存到相簿'],
        success(res) {
            let url = e.currentTarget.dataset.url;
            wx.getSetting({
                success: (res) => {
                    if (!res.authSetting['scope.writePhotosAlbum']) {
                        wx.authorize({
                            scope: 'scope.writePhotosAlbum',
                            success: () => {
                                // 同意授權
                                _this.saveImgInner(url);
                            },
                            fail: (res) => {
                                console.log(res);
                                wx.showModal({
                                    title: '儲存失敗',
                                    content: '請開啟訪問手機相簿許可權',
                                    success(res) {
                                        wx.openSetting()
                                    }
                                })
                            }
                        })
                    } else {
                        // 已經授權了
                        _this.saveImgInner(url);
                    }
                },
                fail: (res) => {
                    console.log(res);
                }
            })   
        },
        fail(res) {
            console.log(res.errMsg)
        }
    })
},
// 長按儲存功能--儲存部分
saveImgInner (url) {
    wx.getImageInfo({
        src: url,
        success: (res) => {
            let path = res.path;
            wx.saveImageToPhotosAlbum({
                filePath: path,
                success: (res) => {
                    console.log(res);
                    wx.showToast({
                        title: '已儲存到相簿',
                    })
                },
                fail: (res) => {
                    console.log(res);
                }
            })
        },
        fail: (res) => {
            console.log(res);
        }
    })
},
 

推薦：鋅聞網