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

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

  <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
在这里插入图片描述
title就是标题,path就是点击之后跳转的页面路径,imageUrl就是展示的图片。
这个path是支持传参的,因为大部分的需求都是要带参数的。

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

顺便打个广告,我最近开发的一个菜谱小程序,目前一万多道菜展示中,欢迎体验。
在这里插入图片描述

以上就可以实现预期的功能了,并且可以准确跳转转发的那个页面。
在这里插入图片描述


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

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

在这里插入图片描述

### 实现 UniApp 微信小程序页面转发分享功能 在 UniApp 中实现微信小程序页面的转发分享功能主要依赖于 `onShareAppMessage` 函数。此函数允许开发者自定义用户点击右上角菜单按钮选择“转发”时的行为,包括设置分享卡片的标题、描述、路径以及缩略图等属性。 对于希望定制化分享体验的应用来说,在特定条件下动态调整这些参数是非常有用的。下面是一个简单的例子来展示如何配置这一特性: ```javascript // 假设这是某个页面的 script 部分 export default { methods: { customShare() { return new Promise((resolve) => { resolve({ title: "这是一个很棒的小程序", // 自定义分享标题 path: "/pages/index/index?from=share", // 设置分享出去后的打开页面路径 imageUrl: "https://example.com/image.png" // 可选:设置分享图标 }); }); } }, onShareAppMessage(res) { if (res.from === 'button') { // 来源于页面内转发按钮 } else { // 来源不是页面内的按钮操作 } return this.customShare(); } } ``` 上述代码展示了如何通过 `customShare()` 方法构建一个异步返回的对象,该对象包含了要共享的信息,并将其作为 `onShareAppMessage` 的返回值[^1]。需要注意的是,如果是在页面加载完成后立即调用,则不需要等待任何事件触发;而如果是响应某些交互行为(比如点击按钮),则可以通过监听相应事件并在回调中调用 `this.share()` 或者直接修改 `onShareAppMessage` 返回的内容。 此外,为了提供更好的用户体验,还可以考虑加入一些额外的功能,例如根据不同的场景改变分享文案或是处理好友接收消息后首次进入应用的情况。这通常涉及到对 URL 参数的解析和利用,以便能够正确引导新访问者到达预期的位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CreatorRay

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值