微信小程序从入坑到放弃二十四：长按图片保存到相册的3种方法

摘要：在微信小程序中，长按图片保存到相册的功能多用于分享海报。翻遍了微信小程序的官方文档，最终发现实现长按图片保存一共有3种方法…

一、为什么要写这篇文章？

其实，这篇文章是为了完善前面几篇跟生成海报有关的文章，毕竟前面讨论了好多分享海报的坑。解决了生成海报的坑后自然少不了保存操作，而前面的文章一共出现了两种保存的方式：点击“保存海报”按钮和长按图片 。所以，有必要把 长按图片保存到相册 拿出来专门写一篇笔记。无论是以后自己用还是用于项目中，都可以节省踩坑的时间！

二、三种方法，爱用哪种用哪种

2.1、法一：image + show-menu-by-longpress

第一种方法：image组件 + show-menu-by-longpress属性 ，image图片组件用法这也是最简单的一种，不用写js就能实现功能。代码如下：

// 核心wxml代码：
<image show-menu-by-longpress src="{{src}}" mode="widthFix" />

就这样短短的一行代码就实现了长按保存 的，是不是很神奇？效果如图：安卓手机上长按图片从底部弹出保存功能.png
那是不是就这样结束了呢？？？

如果有这么简单，那就太没意义了吧！

2.1.1、兼容性处理

刚才是用安卓手机测试，现在来用苹果手机测试下吧。经测试发现：在艺灵的6s中，无论怎么长按，都没有触发保存的弹窗而且也没有任意提示！当艺灵用公司其他同事的苹果手机测试时竟然发现是有弹窗提示保存的，这就让人郁闷了，咋回事呢？

一番折腾过后，还是在微信官方文档中找到了答案。原来 show-menu-by-longpress要求小程序的最低基础库版本号是2.7.0 ，而艺灵测试的苹果手机中的微信版本太低，版本低就导致基础库版本低，所以就不支持喽~

2.1.2、wx.getSystemInfo获取系统信息

其实这个小标题不是必要，如果看官想精准的获取用户的设备信息就可以参照下面的代码。

// 获取用户系统信息的js代码：
wx.getSystemInfo({ /* 获取系统信息 */
  success: (res) => {
    console.log('微信版本号：', res.version, '；客户端基础库版本：', res.SDKVersion, '；设备型号：', res.model, '；操作系统及版本：', res.system)
  }
})

保存代码并在微信小程序中运行后，此时再用手机扫码即可在控制台看到日志信息，如图：wx.getSystemInfo可以获取用户系统信息.png
当然了，上面的res还有其他参数，欲知更多，请访问微信小程序官方文档→→→wx.getSystemInfo API的使用方法

2.1.3、wx.canIUse登场

下面继续接着上面的问题往下讲。前面说了show-menu-by-longpress存在版本兼容的问题，那我们要怎么才能知道用户的微信是支持呢？

在微信开发者文档中同样提供了一个接口用来判断，那就是：wx.canIUse API的使用方法。有心的看官会发现前面的文章中曾出现过这个wx.canIUse，只是未做强调说明罢了。

怎么用呢？也很简单，代码如下：

// 核心js代码：
wx.canIUse('image.show-menu-by-longpress')

这样我们就能判断用户当前的微信客户端是否支持show-menu-by-longpress属性了。如图：wx.canIUse这个API可以判断设备支持情况
可以看到，艺灵的苹果6s上显示为false，所以自然就不支持了。如果看官的项目中使用的是第一种方法，建议做兼容处理哦！另外再说一句：直接在微信官方平台设置微信小程序版本号后，当用户进入小程序时，若用户的微信版本过低会自动弹出升级的提示。如图：微信小程序后台设置基础库最低版本.png

2.2、法二：wx.previewImage

接下来说方案二，这次需要使用微信官方提供的wx.previewImage API的使用方法

// 核心js代码：
wx.previewImage({
  urls: [网络图片地址，不支持本地路径],
  current: 网络图片地址，不支持本地路径
})

偷偷告诉你：还支持base64的哈！

看官是不是在想：这个wx.previewImage会不会跟刚才的show-menu-by-longpress一样不支持低版本微信呢？

艺灵用刚才的苹果手机测试发现弹窗正常，微信官方文档中也没有明确说明此API有版本限制。所以，这个应该没有兼容问题吧。（urls例外。）视频演示如下：戳我观看视频

怎么样，是不是很赞！

2.3、法三：longpress + wx.saveImageToPhotosAlbum + scope.writePhotosAlbum

接下来说最后一种，不知道此时看官有没有啥想法。反正艺灵觉得：能不用就不用，法三代码太多，将近100行！！！

关于wx.saveImageToPhotosAlbum和scope.writePhotosAlbum，可以分别参见前面的文章：

• 微信小程序入坑教程二十一：使用wx.saveImageToPhotosAlbum保存图片时通过检测scope.writePhotosAlbum权限来提醒用户是否需要授权
• 微信小程序入坑教程二十：生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑

到底有多坑，看官看完文章便知，这里不再赘述。下面简单介绍下这个longpress 事件的使用方法

微信官方文档是这样介绍longpress的：手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发。小程序最低基础库版本1.5.0。

既然longpress是一个事件，所以跟bindtap的使用方法是一样的。大致代码如下：

// 核心wxml代码：
<image bindlongpress="handleLongPress" data-src="{{src}}" src="{{src}}" mode="widthFix" />

// 核心js代码：
handleLongPress(e){
  console.log('e=', e)
  this.setData({
    longPressSrc: e.currentTarget.dataset.src
  })
  this.getWritePhotosAlbum(() => { /* 验证用户是否授权了保存图片到相册的权限 */
    this.handleSaveImageToPhotosAlbum(); /* 调用封装好的保存图片到相册的代码 */
  });
}

保存代码并运行后，法三的效果见视频→→戳我观看视频

三、总结3种方法

上面介绍了三种长按保存图片到相册的方法，接下来再总结下各方法的优缺点。

方法	优点	缺点
法一：image + show-menu-by-longpress	简单，无需js	存在兼容性，基础库2.7.0+
法二：wx.previewImage	兼容性良好	由于是全屏预览模式，所以无法设置图片尺寸和去掉大面积黑色
法三：longpress + wx.saveImageToPhotosAlbum + scope.writePhotosAlbum	想不出有啥优点	1、代码多！2、需要判断用户授权情况3、wx.saveImageToPhotosAlbum不支持网络图片

三种方法的优缺点已对比完毕，至于用哪种，就看看官自己选择了。

四、demo源码

demo源码已上传到了github上，如果看官需要研究源码，可以点击下面的链接进行访问并下载。前往github仓库下载源码

源码中会有必要注释和本篇文章的所有示例。若有疑问可与艺灵联系，方式见下方二维码或右侧。

五、其他说明

原文首发于艺灵设计，转载请注明来源，谢谢。