uniapp小程序分享好友分享朋友圈

2,628 阅读2分钟

uniapp分享好友与分享朋友圈默认都是关闭的,需要使用分享功能需要自己打开。分享好友需要定义事件处理函数onShareAppMessage,分享朋友圈需要定义事件处理函数onShareAppMessage和onShareTimeline,这两个函数都是和mounted、methods同级的。

一、首先说一下分享好友(小程序中的),可以通过按钮触发,也可以通过右上角三个点触发。

按钮 <button data-name="shareMe" open-type="share"></button>

不管是按钮还是三个点都需要监听分享操作,这儿提供了一个回调函数在分享按钮按下时触发。

 onShareAppMessage: function () {    return {      title: '',      desc: '',      path: '',      imageUrl: ''    }  },

官网地址:developers.weixin.qq.com/miniprogram…

二、分享朋友圈功能还不太成熟,苹果手机支持不是很好(微信8.0.24版本以上),而且只能进行简单展示页面的分享,不能有复杂交互及登录操作。

分享朋友圈在微信小程序上只能通过自带的三个点触发,不能通过自定义按钮触发。而且要使用分享朋友圈的功能,分享给好友的事件监听函数onShareAppMessage也必须写上,同时写上他自己的监听分享朋友圈的函数onShareTimeline,否则也出不来分享按钮。

onShareTimeline: function () {    return {      title: '',      query: 'wechatMoments=1&id=2',      imageUrl: '',    }  },

官网地址:developers.weixin.qq.com/miniprogram…

三、对比分享好友与分享朋友圈区别:

     1、分享好友的路径可以自定义,分享朋友圈不行,只能分享当前页面路径。

     2、分享好友手机支持性比分享朋友圈好很多。

     3、分享好友分享出去以后被分享人可以直接点击进入小程序页面,而分享朋友圈被分享人先是打开了一个“小程序单页模式”的页面,需要点击引导按钮或者页面上交互按钮才可以打开小程序。

     4、最重要的一点,分享给好友监听函数里支持promise写法,分享朋友圈不支持。分享的时候通常我们的分享id是通过接口获取的,如果是同步写法,return 时候是拿不到接口返回的分享id的,没法进行页面参数传递,于是想到了async,await。尝试以后发现分享好友可以拿到接口返回的分享id传递给页面。

 onShareAppMessage: async function () {    let shareIdObj = await getShareId({      activity_id: this.activeId    })    let share_id = shareIdObj?.data?.share_id    return {      title: '',      desc: '',      path: '/xxx/index?share_id=' + this.share_id,    }  },

同样的写法onShareTimeline可以成功发送请求,也可以拿到返回值他,但是参数传递不到跳转的页面,官方是不支持这种写法的。

  onShareTimeline: async function () {    let shareIdObj = await getShareId({      activity_id: this.activeId    })    let share_id = shareIdObj?.data?.share_id    console.log(share_id, 'share_idshare_idshare_id')    return {      title: '',      query: 'share_id=34',      query: '?share_id=' + share_id,      imageUrl: '',    }  },

打印share_id 也拿到了值,但是传递不到页面。