微信小程序长按图片无菜单响应_优化图片保存功能体验

微信浏览器打开h5页面如果是img标签的话，长按会弹出保存图片的选项。但是微信小程序里面不可以，需要自己写这个功能。

这个功能有两个点，一个是长按，一个是保存图片到本地。

1. 微信小程序关于图片长按的解释，有两种：

因此我们选用 bindlongpress 事件

2. 微信小程序同样提供了保存图片的接口，是wx.saveImageToPhotosAlbum()

3. 值得说的是，保存的接口，两个需要注意的地方：

1、需要先授权，调用 wx.getSetting()方法

2、保存的图片路径参数，不支持网络路径，而在我们渲染页面时，用到的图片有很大可能是网络路径，这时候我们需要先把网络路径转为可用的本地路径，wx.getImageInfo()方法可以满足需要

4. 最后再走个心吧，毕竟我这么可爱

1、长按后直接保存未免潦草了些，考虑到用户体验，加入 wx.showActionSheet()

2、如果用户拒绝授权 或者 以前拒绝过授权，这时候也应该给他提示，或者展示再次打开授权的入口

将将！然后就可以开始写代码了：

// 长按保存功能--授权部分

saveImage (e) {

let _this = this

wx.showActionSheet({

itemList: [&＃39;保存到相册&＃39;],

success(res) {

let url = e.currentTarget.dataset.url;

wx.getSetting({

success: (res) => {

if (!res.authSetting[&＃39;scope.writePhotosAlbum&＃39;]) {

wx.authorize({

scope: &＃39;scope.writePhotosAlbum&＃39;,

success: () => {

// 同意授权

_this.saveImgInner(url);

},

fail: (res) => {

console.log(res);

wx.showModal({

title: &＃39;保存失败&＃39;,

content: &＃39;请开启访问手机相册权限&＃39;,

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: &＃39;已保存到相册&＃39;,

})

},

fail: (res) => {

console.log(res);

}

})

},

fail: (res) => {

console.log(res);

}

})

},

文章写的比较正序，参考的是这篇倒序文章，喜欢倒序的筒子们可以去看下这篇： https://www.jianshu.com/p/e59...

(虽然很痛恨没有视频效果的文章，可是录好了视频的我 实在找不到上传视频的按钮！我好难！！！)