uniapp支付宝小程序生成分享图方案（最新）

最近公司业务开发支付宝小程序，功能涉及生成分享图的功能，开始研究实现方案。

 

开发过微信小程序的小伙伴应该都知道，在微信中生成分享图最常用的方案是使用第三方库Painter

 

 

GitHub官方仓库地址为：https://github.com/Kujiale-Mobile/Painter

 

但是官方的代码只支持微信小程序，所以需要自己改造下官方的代码。听到改造，大家也不用一下子被难住了，原因是：

 

市面上其他小程序基本都是“摸着微信过河”，所以api，组件命名等基本都是一致的，只是前缀有所不同，例如wx.开头我们只需要把它替换成my.（支付宝小程序）

 

这里有份我已经改造好的代码，大家可以直接下载导入使用。但值得注意的是，这份代码整体功能与官方仓库并不同步，如果你发现官方文档声明的功能没有正常运行，最好自己去GitHub拿份最新的代码改造一下。

 

代码下载地址：https://pan.quark.cn/s/3d7fd9938216

 

由于使用的是uniapp开发方案，下面的写法教程为uniapp写法

 

下载完成后，在src目录下新建mycomponents文件夹(uniapp识别支付宝原生组件强制统一存放的地方)

 

 

接着在使用到的页面中引入组件：

 

 

vue页面中使用：

 

拿到生成渲染图的地址

 

 保存图片

uni.saveImageToPhotosAlbum({
  filePath: this.imageUrl,
  success: function () {
    uni.showToast({
      title: "下载成功！",
      icon: "none",
      duration: 3000,
    });
  }
})

题外话

本人在业余时间开发了个ai导航网站，汇总了各种分类AI工具，欢迎点击跳转查看：https://ainav-wiki.org