微信小程序从入坑到放弃二十四：长按图片保存到相册的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: