微信小程序中长按图片分享发送朋友的实现

在开始之前先看一下效果:

在做微信小程序的过程中,经常可能需要生成海报分享以传播小程序,常规的做法是用canvas生成海报图片,然后在图片上提示用户长按保存,然后再选择相册中的图片分享给好友,这种做法很明显的对用户不太友好,操作比较麻烦,如果能实现长按图片就直接可以发送给朋友,那是不是会更好呢?下面就介绍2种在小程序中实现长按图片转发的实现方法。

1、通过wx.previewImage来实现

通过canvas生成好海报图后,调用微信API wx.canvasToTempFilePath生成临时图片路径,然后传给wx.previewImage调起微信图片预览模式,在这个模式下长按图片是会弹出发送给朋友还有识别二维码的选项的。

这种方式虽然实现了功能,但是依然不太友好,在preview模式下页面都是黑的,还有顶上那个那个数字,总感觉怪怪的,下面这种方法相对来说就比较完美了。

2、将生成海报的逻辑放到webview中

通过canvas生成海报,然后将canvas画的图像转换成objectUrl或者base64传递给img节点,canvas最好隐藏,然后长按图片就会弹出发送给朋友和识别二维码等选项。但是这里有一点需要注意的是img的样式不能设置pointer-events: none。

通过上面2种方式我们就可以在微信小程序中实现长按海报转发的功能了,更多小程序开发中的坑,请持续关注本博客哦。

  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章