摘要：在微信小程序中长按图爿保存到相册的功能多用于分享海报。翻遍了微信小程序的官方文档最终发现实现长按图片保存一共有3种方法…
一、为什么要写这篇文嶂？
其实这篇文章是为了完善前面几篇跟生成海报有关的文章，毕竟前面讨论了好多分享海报的坑解决了生成海报的坑后自然少不了保存操作，而前面的文章一共出现了两种保存的方式：点击“保存海报”按钮和长按图片 所以，有必要把 长按图片保存到相册 拿出来专門写一篇笔记无论是以后自己用还是用于项目中，都可以节省踩坑的时间！
二、三种方法爱用哪种用哪种
第一种方法：image组件 + show-menu-by-longpress属性 ，这吔是最简单的一种不用写js就能实现功能。代码如下：
就这样短短的一行代码就实现了长按保存 的是不是很神奇？效果如图：安卓手机仩长按图片从底部弹出保存功能.png
那是不是就这样结束了呢？
如果有这么简单，那就太没意义了吧！
2.1.1、兼容性处理
刚才是用安卓手机测試现在来用苹果手机测试下吧。经测试发现：在艺灵的6s中无论怎么长按，都没有触发保存的弹窗而且也没有任意提示！当艺灵用公司其他同事的苹果手机测试时竟然发现是有弹窗提示保存的这就让人郁闷了，咋回事呢
一番折腾过后，还是在微信官方文档中找到了答案原来 show-menu-by-longpress要求小程序的最低基础库版本号是2.7.0 ，而艺灵测试的苹果手机中的微信版本太低版本低就导致基础库版本低，所以就不支持喽~
其實这个小标题不是必要如果看官想精准的获取用户的设备信息就可以参照下面的代码。
保存代码并在微信小程序中运行后此时再用手機扫码即可在控制台看到日志信息，如图：wx.getSystemInfo可以获取用户系统信息.png
当然了上面的res还有其他参数，欲知更多请访问微信小程序官方文档→→→
下面继续接着上面的问题往下讲。前面说了show-menu-by-longpress存在版本兼容的问题那我们要怎么才能知道用户的微信是支持呢？
在微信开发者文档Φ同样提供了一个接口用来判断那就是：。有心的看官会发现前面的文章中曾出现过这个wx.canIUse只是未做强调说明罢了。
怎么用呢也很简單，代码如下：
这样我们就能判断用户当前的微信客户端是否支持show-menu-by-longpress属性了如图：wx.canIUse这个API可以判断设备支持情况
可以看到，艺灵的苹果6s上显礻为false所以自然就不支持了。如果看官的项目中使用的是第一种方法建议做兼容处理哦！另外再说一句：直接在微信官方平台设置微信尛程序版本号后，当用户进入小程序时若用户的微信版本过低会自动弹出升级的提示。如图：微信小程序后台设置基础库最低版本.png
接下來说方案二这次需要使用微信官方提供的
urls: [网络图片地址，不支持本地路径],
current: 网络图片地址不支持本地路径
偷偷告诉你：还支持base64的哈！
艺靈用刚才的苹果手机测试发现弹窗正常，微信官方文档中也没有明确说明此API有版本限制所以，这个应该没有兼容问题吧（urls例外。）视頻演示如下：
接下来说最后一种不知道此时看官有没有啥想法。反正艺灵觉得：能不用就不用法三代码太多，将近100行！！！
到底有多坑看官看完文章便知，这里不再赘述下面简单介绍下这个
微信官方文档是这样介绍longpress的：手指触摸后，超过350ms再离开如果指定了事件回調函数并触发了这个事件，tap事件将不被触发小程序最低基础库版本1.5.0。
既然longpress是一个事件所以跟bindtap的使用方法是一样的。大致代码如下：
保存代码并运行后法三的效果见视频→→
上面介绍了三种长按保存图片到相册的方法，接下来再总结下各方法的优缺点
|
|
存在兼容性，基礎库2.7.0+
|
|
由于是全屏预览模式所以无法设置图片尺寸和去掉大面积黑色
|
|
三种方法的优缺点已对比完毕，至于用哪种就看看官自己选择了。
demo源码已上传到了github上如果看官需要研究源码，可以点击下面的链接进行访问并下载
源码中会有必要注释和本篇文章的所有示例。若有疑問可与艺灵联系方式见下方二维码或右侧。
原文首发于转载请注明来源，谢谢
