uniapp 微信小程序 分享、分享朋友圈 功能

页内自定义分享按钮

当页面js上没有添加事件“onShareAppMessage”,右上角‘…’不会出现“转发”事件。
如果有事件,但是没有定义事件内容的话,转发的卡片则是当前页面的截屏信息。

uniapp 自定义分享单页面朋友

<button class="fenxiang rounded" open-type="share">分享</button>
export default {
  onShareAppMessage(res) {
    	if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: '棱接龙',//标题
			path: '/page/index/index',//可以指定动态路径
			imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg',//分享图
			desc: '描述'
		};
  }
}

uniapp 单页面分享朋友圈 页面右上角胶囊“…”分享事件

// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '棱接龙',
			path: '/pages/index/index',
			imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
		};
	},

1)使用默认页面右上角胶囊“…”分享事件

Page({
  onShareAppMessage: function (res) {
    return {
      title: '这是默认转发',
      path: '/pages/index/index?id=123',
      imageUrl: '****.png'//这个是分享的图片
    }
  }
})

2)当页面上存在自定义“分享”按钮

 <!--index.wxml页面-->
 <button class="share_icon" open-type = "share">
     自定义分享按钮
 </button>
/*index.js*/
Page({
  onShareAppMessage: function (res) {
	let title,imageUrl;
    if (res.from === 'button') {
      // 来自页面内转发按钮
      title= ‘这个是页面自定义的分享事件~’;
      imageUrl='***.png';
    }
    if(res.from ==='menu'){
	  title= ‘这个是页面右上角的分享事件~’;
	  imageUrl='***.png';
    }
    return {
      title: title,
      imageUrl: imageUrl,//这个是分享的图片
      path: '/page/user?id=123'}
  }
})

3)当页面上存在多个自定义分享按钮

<button open-type='share' id="share1">这个第一个分享按钮</button>
<button open-type='share' id="share2">这个第一个分享按钮</button>
/*index.js*/
Page({
  onShareAppMessage: function (res) {
    let title,imageUrl;
    console.log(res.target)if (res.from === 'button' && res.target.id == 'share1') {
      title= ‘这个是页面自定义分享按钮share1的分享事件~’;
      imageUrl='***.png';
    }
    if (res.from === 'button' && res.target.id == 'share2') {
      title= ‘这个是页面自定义分享按钮share2的分享事件~’;
      imageUrl='***.png';
    }
    if(res.from ==='menu'){
	  title= ‘这个是页面右上角的分享事件~’;
	  imageUrl='***.png';
    }
    return {
      title: title,
      imageUrl: imageUrl,//这个是分享的图片
      path: '/page/user?id=123'}
  }
})
页面右上角“…”分享行为

uni.showShareMenu
小程序的原生菜单中显示分享按钮

uni.hideShareMenu
小程序的原生菜单中隐藏分享按钮

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

织_网

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

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

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

打赏作者

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

抵扣说明:

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

余额充值