微信小程序「分享至朋友圈」能力，终于来了！(之前，我相信大部分微信小程序的开发者都是用“分享卡片”的形式，手动调用wx.createCanvasContext生成一张图片，让用户生成图片保存到相册，以这种“曲线救国”的形式来实现的，很麻烦。。。。)

就在7月初，我看到了微信小程序的官网有了分享至微信朋友圈的功能上线beta板，目前只能在android手机显示分享至朋友圈的按钮，iphone手机暂时不支持，但是android手机分享出来的，iphone手机是可以查看的，不多说，先看一下最终的真机上的展示效果(android和iphone手机)

一、效果

image.png

image.png

image.png

image.png

二、代码实现

onShareTimeline(res){

console.log(res)

return {

title: '测试小程序分享至朋友圈',

path: '../test/test',

imageUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594374964481&di=3ceba827e91e126012c43de3887a58c7&imgtype=0&src=http%3A%2F%2Fdmimg.5054399.com%2Fallimg%2Fpkm%2Fpk%2F13.jpg'

}

},

onShareAppMessage: function(ops) {

return {

title: "分享卡片",

path: '../test/test',

}

}

三、需要注意的点

分享到朋友圈(Beta)

从基础库 2.11.3 开始支持

此功能为beta版，暂仅在Android平台支持

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

设置分享状态

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

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

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

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

单页模式

用户在朋友圈打开分享的小程序页面，并不会真正打开小程序，而是进入一个“小程序单页模式”的页面，“单页模式”有以下特点：

“单页模式”下，页面顶部固定有导航栏，标题显示为分享时的标题。底部固定有操作栏，点击操作栏的“前往小程序”可打开小程序的当前页面。顶部导航栏与底部操作栏均不支持自定义样式。

“单页模式”默认运行的是小程序页面内容，但由于页面固定有顶部导航栏与底部操作栏，很可能会影响小程序页面的布局。因此，请开发者特别注意适配“单页模式”的页面交互，以实现流畅完整的交互体验。

“单页模式”下，一些组件或接口存在一定限制，详情见下文单页模式下的限制章节

页面适配

可通过判断场景值等于 1154 的方法来进行页面适配。另外，在单页模式下，可设置顶部导航栏与页面的相交状态，具体参考 navigationBarFit 配置。

还需留意的是，在单页模式下，wx.getSystemInfo 接口返回的 safeArea 为整个屏幕空间。

单页模式下的限制

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

页面无登录态，与登录相关的接口，如 wx.login 均不可用；云开发资源需开启未登录访问方可在单页模式下使用，详见未登录模式。

不允许跳转到其它页面，包括任何跳小程序页面、跳其它小程序、跳微信原生页面

不允许横屏使用

若页面包含 tabBar，tabBar 不会渲染，包括自定义 tabBar

本地存储与小程序普通模式不共用

对于一些会产生交互的组件或接口，在点击后调用时，会弹 toast 提示“请前往小程序使用完整服务”。为达到良好的用户体验，请注意适配单页模式的接口能力，请勿大量使用被禁用的接口或组件。

四、写在最后的话

1、目前只支持android手机，但iphone手机可以查看

2、有部分的android手机也显示不了“分享至朋友圈”的按钮(因为目前知识beta版)

3、不久之后肯定会发布正式版本，到时候iphone和android手机都可以实现，现在小伙伴可以尝鲜一波。

4、还有一点值得注意的是：不得存在滥用分享违规行为。如强制用户分享行为；分享立即获得利益的诱导行为；以及通过明示或暗示的样式来达到诱导分享目的的行为等。这也是小程序一开始没推出这个功能的一大原因。

这篇文章到此结束了，有问题下方留言，欢迎一起讨论