Open fayeah opened 3 years ago
我们的小程序是一个小程序平台,三方的h5应用可嵌入到其中。有一个需求是将三方的h5页面分享至朋友圈的功能。如果仅仅是在h5页面实现也是可以的。但是在h5实现分享至朋友圈功能有几个限制:
JSSDK的分享至朋友圈API即将废除:
wx.onMenuShareTimeline({ title: '', // 分享标题 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 success: function () { // 用户点击了分享后执行的回调函数 } }
如果每一个内嵌的h5都实现一遍,将是非常繁琐和麻烦的一件事情。
基于以上两点,我们决定在平台端实现分享朋友圈功能,但是h5需要触发一个动作跳转到平台的分享页面(是平台端小程序的一个页面),然后我们将该页面进行分享,引导用户进入H5页面。
小程序的分享朋友圈不是所有的用户都能分享,也不是所有的设备都可以分享,以下是允许的条件:
我们的小程序使用了Taro框架,因此也更多地在使用Taro提供的方法
首先,页面需设置允许“发送给朋友”,默认是不打开的,所以需要手动加上:
onShareAppMessage() { const { title = '', path = '', imageUrl = '', shareRefresh, state, } = this.$router.params return { title: decodeURIComponent(title), //decode的原因是从h5传过来的参数是encode过的,所以这里要拿到解码的值 path: decodeURIComponent(path), imageUrl: decodeURIComponent(imageUrl), } }
满足条件 1 后,页面需设置允许“分享到朋友圈”:
const SCENE = { OPEN_FROM_TIMELINE: 1154, //朋友圈内打开“单页模式” SINGLE_PAGE_MODE: 1155, // “单页模式”打开小程序 } get isInSinglePageMode() { return [SCENE.OPEN_FROM_TIMELINE, SCENE.SINGLE_PAGE_MODE].includes( this.state.scene ) } handleGoToActivity = () => { const { path } = this.$router.params Taro.navigateTo({ url: '/' + (path ? decodeURIComponent(path) : this.defaultPath), }) } {this.isInSinglePageMode && ( <Button type='primary' onClick={this.handleGoToActivity} hoverClass={styles.hover} className={cls(styles.button, styles.shareButton)} > <KOIcon type='wechat' custom-class={styles.icon} /> 去相应的页面 </Button> )}
有几个地方需要注意的:
References:
我们的小程序是一个小程序平台,三方的h5应用可嵌入到其中。有一个需求是将三方的h5页面分享至朋友圈的功能。如果仅仅是在h5页面实现也是可以的。但是在h5实现分享至朋友圈功能有几个限制:
Prerequisite:
方案选择
JSSDK的分享至朋友圈API即将废除:
如果每一个内嵌的h5都实现一遍,将是非常繁琐和麻烦的一件事情。
基于以上两点,我们决定在平台端实现分享朋友圈功能,但是h5需要触发一个动作跳转到平台的分享页面(是平台端小程序的一个页面),然后我们将该页面进行分享,引导用户进入H5页面。
分享至朋友圈的限制
小程序的分享朋友圈不是所有的用户都能分享,也不是所有的设备都可以分享,以下是允许的条件:
实现
我们的小程序使用了Taro框架,因此也更多地在使用Taro提供的方法
首先,页面需设置允许“发送给朋友”,默认是不打开的,所以需要手动加上:
满足条件 1 后,页面需设置允许“分享到朋友圈”:
有几个地方需要注意的:
References: