微信小程序如何实现转发/分享功能

发布时间:2023-06-20 17:00

在微信小程序的开发中,我们经常遇到把当前页面转发给好友的需求。并且大部分时候,转发的页面都是带参数的。这里面坑还是比较多的。

  <button open-type="share" type="primary">
  分享给好友
  button>

首先我们先写一个button按钮,很重要的一个点就是button按钮的open-type属性,这个一定要写为share。
其实,这其中的实际原理就是通过按钮触发onShareAppMessage这个生命周期函数。

  onShareAppMessage: function (res) {
    var that = this;
    console.log(JSON.stringify(that.data.array))
    return {
      title:that.data.array.name,
      path:'pages/detail/detail?array=' + JSON.stringify(that.data.array),
      imageUrl:that.data.array.pic
    }
  }
})

最关键的是要return一个对象出去,核心的就三个属性,title,path,imageUrl
微信小程序如何实现转发/分享功能_第1张图片
title就是标题,path就是点击之后跳转的页面路径,imageUrl就是展示的图片。
这个path是支持传参的,因为大部分的需求都是要带参数的。

我这个小程序是一个菜谱小程序,用户看到满意的一道菜,想分享给朋友,朋友点击链接进去之后,一定是要跳转到我看到的那道菜的,所以这个需求必然是要通过url传参实现的。

顺便打个广告,我最近开发的一个菜谱小程序,目前一万多道菜展示中,欢迎体验。
微信小程序如何实现转发/分享功能_第2张图片

以上就可以实现预期的功能了,并且可以准确跳转转发的那个页面。
微信小程序如何实现转发/分享功能_第3张图片


有微信小程序课设、毕设需求联系个人QQ:505417246

关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢!

微信小程序如何实现转发/分享功能_第4张图片

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号