小程序分享朋友圈功能的代码实现与测评
发布于 3 年前 作者 htao 324 次浏览 来自 分享

分享到朋友圈 Beta

从基础库 2.11.3 开始支持

支持平台:Android

可将小程序页面分享到朋友圈。适用于内容型页面的分享,不适用于有较多交互的页面分享。


设置分享状态

小程序页面默认不可被分享到朋友圈,开发者需主动设置“分享到朋友圈”。页面允许被分享到朋友圈,需满足两个条件:

  1. 首先,页面需设置允许“发送给朋友”。具体参考 Page.onShareAppMessage 接口文档
  2. 满足条件 1 后,页面需设置允许“分享到朋友圈”,同时可自定义标题、分享图等。具体参考 Page.onShareTimeline 接口文档

满足上述两个条件的页面,可被分享到朋友圈。


实现代码

接下来就以一个线上答题小程序为例子,分享到朋友圈,然后邀请大家一起来答题,这么一个需求。实现分享朋友圈功能的代码其实很简单,如下为index.js的实现代码:

onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '党建知识学习与考核',//转发标题
      imageUrl: '/assets/images/xuexi-min.png' //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径
    }
  },

  onShareTimeline(){
    return {
      title: '学理论,强党建,做先锋 —— 「党建知识擂台赛」',//自定义标题,即朋友圈列表页上显示的标题
      imageUrl: '/assets/images/xuexi-min.png' //自定义图片路径,可以是本地文件或者网络图片
    }
  }


实现效果

点击右上角菜单胶囊按钮,点击“分享到朋友圈”

填写朋友圈


分享成功,可以看见这个链接了

点击这个链接,可以直接触达


点击“前往小程序”按钮


就跳转至该答题小程序了

总结

看到小程序支持直接分享到朋友圈功能,就翻文档然后写代码实测一下。用户在朋友圈打开分享的小程序页面,并不会真正打开小程序,而是进入一个“小程序单页模式”的页面。运营须知 分享朋友圈能力是为了满足纯内容场景的分享诉求,滥用于营销、诱导等行为将会被打击。

可以自己扫码去体验测评一下:


回到顶部