小程序开始测试分享到朋友圈功能,带你快速了解如何配置!

344 阅读4分钟
小程序在近日发布分享到朋友圈的功能,这个广受开发者们期待的功能正式开始测试。具体见下图。  

官方表示该功能小程序支持分享单个页面到朋友圈,开发者需设置页面允许被分享到朋友圈。现仅支持开发者发起分享,预计7月中旬视情况再扩展公测范围。

但是小编实际测试了一下,该功能目前仅支持安卓手机,且基础库需要在2.11.3及以上才支持。经过研究,我们还发现了分享到朋友圈的几个特别的地方,如点击朋友圈并不会直接进入小程序,而是进入一个单独的单页模式,那么接下来,我们将详细介绍一下如何配置。


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

1.首先,页面需设置允许“发送给朋友”。具体参考 Page.onShareAppMessage 接口文档 

2.满足条件 1 后,页面需设置允许“分享到朋友圈”,同时可自定义标题、分享图等。具体参考 Page.onShareTimeline 接口文档 满足上述两个条件的页面,可被分享到朋友圈。


首先我们需要在具体要进行朋友圈分享的页面进行如下配置:

wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
})

需要特别说明的是:该函数不支持直接调用,仅仅是配置后在右上角的胶囊菜单按钮中点开会增加分享到朋友圈以及发送给朋友的按钮,不支持直接在某事件中调用,一般可以写在onload生命周期函数中,写在具体某个点击事件中是无法直接调起分享菜单的。

具体参数如下:

属性类型默认值必填说明最低版本
withShareTicketbooleanfalse是否使用带 shareTicket 的转发详情
menusArray.<string>本接口为 Beta 版本,暂只在 Android 平台支持。需要显示的转发按钮名称列表,默认['shareAppMessage']。按钮名称合法值包含 "shareAppMessage"、"shareTimeline" 两种2.11.3
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)


然后在页面增加onShareTimeline()函数

字段说明默认值最低版本
title自定义标题当前小程序名称
query自定义页面路径中携带的参数当前页面路径携带的参数
imageUrl自定义图片路径,可以是本地文件或者网络图片。支持 PNG 及 JPG,显示图片长宽比是 1:1。默认使用小程序 Logo


接下来我们满心欢喜的使用了一下分享到朋友圈功能,却发现打开后从朋友圈打开的小程序无法正常使用。仔细研究了下分享规则,其实还有几个点需要我们注意。

用户在朋友圈打开分享的小程序页面,并不会真正打开小程序,而是进入一个“小程序单页模式”的页面。


小程序“单页模式”适用于纯内容展示场景,可实现的交互与接口能力有限,因此存在如下限制:

  1. 页面无登录态,与登录相关的接口,如 wx.login 均不可用;
  2. 不允许跳转到其它页面,包括任何跳小程序页面、跳其它小程序、跳微信原生页面
  3. 不允许横屏使用
  4. 若页面包含 tabBar,tabBar 不会渲染,包括自定义 tabBar
  5. 本地存储与小程序普通模式不共用

相当于我们打开的小程序仅仅提供一个网页,如果你的小程序在首页有使用到登陆状态等数据需要进行单独进行适配。

适配方法如下:

可通过判断场景值等于 1154 的方法来进行页面适配,如果场景值为1154跳过wx.login等过程,直接展示某个无需登录状态的页面,这里我们建议可以采用一个引导界面来引导用户点击右下角的前往小程序。