支付宝小程序分享转发

最新推荐文章于 2023-02-06 16:54:38 发布

weixin_34326558

最新推荐文章于 2023-02-06 16:54:38 发布

阅读量2.4k

点赞数

原文链接：https://juejin.im/post/5caf258e5188251b061bf232

版权

最近公司在做一系列支付宝小程序，其中分享拉新显然是很重要的一环，我们对分享的期望是每次分享的背景图都带有用户独特标识并且图片中多处位置每人每天都不相同，为了完成这个需求对支付宝小程序的分享进行了一些调研与尝试。

原文链接

支付宝小程序分享方式

支付宝小程序触发分享的方式跟微信小程序相同也是两种方式设置onShareAppMessage和button添加open-type="share"属性

支付宝`onShareAppMessage`

在page中添加onShareAppMessage方法，然后点击右上角菜单就会有分享选项，如果没有定义onShareAppMessage右上角菜单也有分享选项

可以在onShareAppMessage中自定义转发内容

字段	类型	必填	描述	最低版本
title	String	是	自定义分享标题	无
desc	String	否	自定义分享描述：由于分享到微博只支持最大长度 140 个字，因此建议长度不要超过该限制。	无
path	String	是	自定义分享页面的路径，path中的自定义参数可在小程序生命周期的 onLoad方法中获取（参数传递遵循 http get 的传参规则）	无
content	String	否	自定义吱口令文案，最多28个字符实际测试无效，咨询支付宝运营人员说是文字吱口令下线了	1.7.0
imageUrl	String	否	自定义分享小图 icon 元素，支持：网络图片路径；apFilePath 路径；相对路径。使用场景详见下方说明	1.4.0
bgImgUrl	String	否	自定义分享预览大图，建议尺寸750x825，支持：网络图片路径；apFilePath路径（客户端10.1.58版本开始支持）；相对路径	（客户端 10.1.58 版本开始支持
success	Function	否	分享成功后回调	1.4.0
fail	Function	否	分享失败后回调	1.4.0

支付宝转发方式

支付宝转发方式花样比较多，分别可以转发到微信，QQ，支付宝朋友圈，支付宝好友，钉钉，微博，但是可以转发到哪里并不是可以设置的，详情可以参考官方文档

这里单单提一下分享到微信，毕竟这才是拉新最实际的操作，当用户点击微信的时候支付宝会自动将分享图片存入用户相册，这个图片呢如果设置bgImgUrl那就是bgImgUrl如果没有设置那支付宝会自动截取750x825差不多就是屏幕上半部分

关于动态生成带有用户标识的自定义分享图片的尝试

方案一

如上面的配置可知bgImgUrl是string是死的而我们需求是分享图片每天每个人都是不一样，可惜的是支付宝没有留下接口让我们每次拉起分享弹窗的时候动态的设置，当然你可以在onShareAppMessage写一些异步函数不过你会惊奇发现这些异步函数都是无效的，这时可以想到的解决方案可能就是当用户打开页面就要生成图片不管这个人是否调用分享，不过这种玩法不管是前端绘图还是后端绘图都不会产生不必要的资源损耗，不过执意这么干的话应该也是能成的不过交互对应也要做一定的修改图片还没生成的时候不应该可以拉起分享窗口,不过点击右上角分享没法控制用户什么时候触发还是有些瑕疵。

异步失败写法一模拟从远程服务的获取图片

Page({
  async onShareAppMessage() {
    let bgImgUrl
    const remoteUri = await new Promise(function (resolve) {
      setTimeout(resolve, 2000, "http://img003.qufenqi.com/products/0d/8b/0d8b66116258021d8b2aac7355810a97.jpeg")
    })

    bgImgUrl = remoteUri
    return {
      title: '分享 View 组件',
      desc: 'View 组件很通用',
      path: 'page/component/view/view',
      bgImgUrl

    };
  },
});

复制代码

异步失败写法二动态获取canvas临时目录因为success是异步的下面的写法本身就有毛病

onShareAppMessage() {
    let bgImgUrl = ''
    this.context.toTempFilePath({
      success(res) {
        bgImgUrl = res.apFilePath
        console.log(bgImgUrl)

      }
    });
    return {
      title: '分享 View 组件1',
      desc: 'View 组件很通用',
      path: 'page/component/view/view',
      bgImgUrl
    }
  }
复制代码

方案二

现在最流行的生成个性化自定义分享图片的流程的大体思路是用户触发自定义的分享按钮，然后再小程序端用canvas动态的绘制一个带有当前用户标识的图片存储到用户的相册中，之后用户在手动的将图片转发到朋友圈，但是这已经脱离了小程序原本的分享流程

方案三

因为支付宝分享会自动截屏保存到相册中，所以当时思考了一下如果当拉起分享窗口的时候页面通过显隐控制的方式，将原本的页面隐藏将规划好的个性化分享页面显示出来，然后小程序进行截图保存，这样既能生成带有用户标识的分享图片，还能无缝衔接到分享流程中，说干就干一顿操作之后在Android手机中测试完美几乎完美，可是天不遂人愿在IOS下失败了故放弃此方案。

代码示意

Page({
  data: { name: '', share: false },
  onShareAppMessage() {
    this.setData({ name: 'openShare', share: true })
    // 就是分享窗口弹起不做分享直接关闭并没有接口能捕获到,所以当时加了下面这段
    // setTimeout(()=>{
    //   this.setData({share:false})
    // },1000)
    return {
      title: '分享 View 组件1',
      desc: 'View 组件很通用',
      path: 'page/component/view/view',
      content: '这个参数实测并不起效，咨询运营人员，说文字吱口令已下线',
      bgImgUrl:
        'http://img003.qufenqi.com/products/0d/8b/0d8b66116258021d8b2aac7355810a97.jpeg',
      success: () => {
        console.log('succeed')
        this.setData({ name: 'success', share: false })
      },
      fail: () => {
        console.log('fail')
        this.setData({ name: 'fail', share: false })
      },
      complete: () => {
        console.log('fail')
        this.setData({ name: 'complete', share: false })
      }
    }
  }
})
复制代码

最终方案

最终我们选择了最妥协的方案就是设计同学将页面是上半部分设计的紧凑一些，调用分享直接截屏，调研了一圈最终什么也没干什么非常完美。

发现的坑

在使用支付宝分享到微信的时候有文案提示告诉你生成了吱口令去微信粘贴但是现在并不好使，咨询运营人员才知道文字吱口令下线了(不过信息都有时效性兴许你看到的时候事情已经不是这样了)
就是分享窗口弹起不做分享直接关闭并没有接口能捕获到

买一送一附赠微信小程序分享转发

微信小程序触发分享有两种方式设置onShareAppMessage和button添加open-type="share"属性

微信 `onShareAppMessage`

在page中添加onShareAppMessage方法，然后点击右上角菜单就会有分享选项，如果没有定义onShareAppMessage右上角菜单就没有分享选项

微信自定义转发内容

字段	说明	默认值	最低版本
title	转发标题	当前小程序名称
path	转发路径	当前页面 path ，必须是以 / 开头的完整路径
imageUrl	自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。	使用默认截图	1.5.0

代码示意

page({
  data: {
    shareData: {
      title: '自定义转发标题',
      imageUrl: 'xxxx.jpeg',
      path: '/page/API/pages/share/share'
    }
  },

  onShareAppMessage() {
    return this.data.shareData
  }
})
复制代码

转发方式

转发方式只能转发给朋友或者群聊效果如下

微信 `open-type="share"`

button组件设置open-type="share"点击button触发分享，open-type="share"模式如果没有定义onShareAppMessage方法也会触发分享

总结

支付宝小程序和微信小程序分享API基本相同只是一些细节不太一样，最大的区别就是微信只能分享到群组或者好友，而支付宝提供了更多的方式
遇见问题简单查查文档如果找不到头绪首选求助小程序交流群或者运营人员，因为小程序发展太快了有些问题能找到的资源并不多，而且官方文档更新的也不怎么及时，闷头踩坑的话有些得不偿失。
信息具有实效性本文或者网上的其他文章或者官方文档皆不可全信一切以实践为准