小程序转发微信好友和分享朋友圈

小程序转发微信好友和分享朋友圈

一、前言

有时候我们需要将小程序分享给好友或者朋友圈。

在小程序右上角的三个点,点一下会出现【转发到朋友】和【分享到朋友圈】,但是有可能是点击不了的,如下图所示:
在这里插入图片描述

这是因为要实现这两个功能需要在程序里进行配置。

二、代码实现

1.转发给朋友

将以下这段加到js文件中

// 分享到微信好友
onShareAppMessage(res) {
 return {
    title:'智能门锁-觅家安防',           // 分享出去的标题
    imageUrl:'/images/Home/dms.png',   // 分享出去的图标
  	path:'/pages/mine/index'           // 分享出去的页面路径
 }
},

基本上以上三个参数就够用了,如果需要查看其他参数可以查看官网说明:
https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/miniapp/component/onShareAppMessage.html

这里说明一下,只有在js文件中定义了onShareAppMessage函数,右上角菜单才会显示【转发到朋友】按钮。


当然你也可以自定义一个按钮实现分享,通过按钮调用onShareAppMessage函数,通过参数判断下是哪里触发的,代码如下图:
onShareAppMessage: function (res) {
  if (res.from === 'button') {
    // 来自页面内转发按钮
    console.log(res.target)
  } else {
    // 来自菜单栏转发按钮
    console.log(res.target)
  }
  return {
    title:'标题',           		 // 分享出去的标题
    imageUrl:'/home/home.png',   // 分享出去的图标
  	path:'/pages/home/index'     // 分享出去的页面路径
 }
}

2.分享到朋友圈

分享到朋友圈跟转发好友类似,就是函数不同:

onShareTimeline(){
  return {
    title:'标题',           		 // 分享出去的标题
    imageUrl:'/home/home.png',   // 分享出去的图标
  	path:'/pages/home/index'     // 分享出去的页面路径
 }
},

如果需要查看其他参数可以查看官网说明:
https://developers.weixin.qq.com/minigame/dev/api/share/wx.onShareTimeline.html

三、总结

1.要注意的是,你需要再哪个页面进行分享就在哪个js文件中加入以上代码。
2.举个例子,我需要在index页面点击菜单栏的时候可以分享,那就在index.js文件中加入。
3.没加的页面点击菜单栏是不会显示分享的。
### UniApp 中实现点击事件转发微信好友 在 UniApp 开发环境中,为了实现在特定条件下通过点击按钮来触发向微信好友分享的功能,通常采用 `open-type="share"` 属性绑定到 `<button>` 组件上来激活原生的分享行为。这种方式允许开发者利用 HTML 的数据属性传递额外的信息作为上下文[^5]。 对于更复杂的场景,比如希望在用户交互之后才解锁分享能力或是想要定制化分享的内容,则可以通过 JavaScript API 来控制这一过程。具体来说,在页面加载时调用 `uni.showShareMenu()` 方法能够使当前页面支持被分享出去;而当需要响应用户的动作去更新分享内容时,则可以在相应的处理函数里重新定义 `onShareAppMessage` 钩子返回新的分享选项对象[^4]。 下面是一个简单的例子展示如何结合这两者创建一个可点击以启动分享流程的按钮: ```html <!-- HMTL --> <button type="default" bindtap="handleClick">点击这里分享</button> ``` ```javascript // JS (Vue2 Syntax) export default { methods: { handleClick() { // 手动显示分享菜单 uni.showShareMenu({ withShareTicket: true, success(res) { console.log('show share menu success', res); }, fail(err) { console.error('failed to show share menu', err); } }); // 设置分享消息 this.$scope.onShareAppMessage(() => ({ title: '来自应用的好友邀请', path: '/pages/index/index?from=friend_invite', imageUrl: 'https://example.com/share-image.png' })); } } } ``` 上述代码片段展示了怎样监听按钮点击事件,并在此基础上开启分享功能以及指定要共享的数据。需要注意的是,这里的 `this.$scope.onShareAppMessage` 是针对 Vue.js 版本的应用程序所使用的语法结构,如果是其他框架可能有所不同[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值