微信小程序長按保存圖片

• 微信瀏覽器打開h5頁面若是是img標籤的話，長按會彈出保存圖片的選項。可是微信小程序裏面不能夠，須要本身寫這個功能。
• 這個功能有兩個點，一個是長按，一個是保存圖片到本地。

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

所以咱們選用 bindlongpress 事件

2. 微信小程序一樣提供了保存圖片的接口，是wx.saveImageToPhotosAlbum()

3. 值得說的是，保存的接口，兩個須要注意的地方：

一、須要先受權，調用 wx.getSetting()方法

二、保存的圖片路徑參數，不支持網絡路徑，而在咱們渲染頁面時，用到的圖片有很大多是網絡路徑，這時候咱們須要先把網絡路徑轉爲可用的本地路徑，wx.getImageInfo()方法能夠知足須要

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

一、長按後直接保存未免潦草了些，考慮到用戶體驗，加入 wx.showActionSheet()
二、若是用戶拒絕受權 或者 之前拒絕過受權，這時候也應該給他提示，或者展現再次打開受權的入口

將將！而後就能夠開始寫代碼了：

<image src="{{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);
        }
    })
},

文章寫的比較正序，參考的是這篇倒序文章，喜歡倒序的筒子們能夠去看下這篇： https://www.jianshu.com/p/e59...
（雖然很痛恨沒有視頻效果的文章，但是錄好了視頻的我 實在找不到上傳視頻的按鈕！我好難！！！）