小程序分享到朋友圈功能
分享到朋友圈的页面是单页模式
(小程序页面默认不可被分享到朋友圈,开发者需主动设置“分享到朋友圈”。页面允许被分享到朋友圈,需满足两个条件:
1.首先,页面需设置允许“发送给朋友”
2.满足条件1,页面需设置允许“分享到朋友圈”,可自定义标题、分享图(详情Page.onShareTimeline接口)
单页模式
用户在朋友圈打开分享的小程序页面,并不会真正打开小程序,而是进入一个“小程序单页模式”的页面,单页模式有以下特点:
1.“单页模式”,页面顶部固定有导航栏,标题显示为当前页面JSON配置的标题。底部固定有操作栏,点击操作栏的“前往小程序”可打开小程序的当前页面。顶部导航栏与底部操作栏均不支持自定义样式。
2.“单页模式”默认运行的是小程序页面内容,但由于页面固定有顶部导航栏与底部操作栏,很可能会影响小程序页面的布局。
3.“单页模式”,一些组件及接口存在限制。
页面适配
可通过判断场景值等于1154的方法来进行页面适配。在单页模式下,可设置顶部导航栏与页面的相交状态,具体参考navigationBarFit。在单页模式下,wx.getSystemInfo接口返回的safaArea为整个屏幕空间。
场景值-------用来描述用户进入小程序的路径
获取场景值:
- 对于小程序,可以在 App 的 onLaunch 和 onShow,或wx.getLaunchOptionsSync 中获取上述场景值。
- 对于小游戏,可以在 wx.getLaunchOptionsSync 和 wx.onShow 中获取上述场景值。
返回来源信息的场景
部分场景值下还可以获取来源应用、公众号或小程序的appId。获取方式请参考对应API的参考文档。
场景值 场景 appId含义
1020 公众号 profile 页相关小程序列表 来源公众号
1035 公众号自定义菜单 来源公众号
1036 App 分享消息卡片 来源App
1037 小程序打开小程序 来源小程序
1038 从另一个小程序返回 来源小程序
1043 公众号模板消息 来源公众号
单页模式下的限制
小程序“单页模式”适用于纯内容展示场景,可实现的交互与接口能力有限,因此存在如下限制:
页面无登录态,与登录相关的接口,如 wx.login 均不可用;云开发资源需开启未登录访问方可在单页模式下使用,详见未登录模式。
不允许跳转到其它页面,包括任何跳小程序页面、跳其它小程序、跳微信原生页面
不允许横屏使用
若页面包含 tabBar,tabBar 不会渲染,包括自定义 tabBar
本地存储与小程序普通模式不共用
对于一些会产生交互的组件或接口,在点击后调用时,会弹 toast 提示“请前往小程序使用完整服务”。为达到良好的用户体验,请注意适配单页模式的接口能力,请勿大量使用被禁用的接口或组件。
禁用能力列表:
分类 | 功能表 |
---|---|
组件 | button open-type 、 camera 、 editor 、 form 、 functional-page-navigator 、 live-pusher 、 navigator 、 navigation-bar 、 official-account 、 open-data 、 web-view |
路由 | wx.redirectTo 、 wx.reLaunch 、 wx.navigateTo 、 wx.switchTab 、 wx.navigateBack |
界面 | 导航栏 、 Tab Bar |
网络 | mDNS 、 UDP 通信 |
数据缓存 | 周期性更新 |
媒体 | VoIP 、 wx.chooseMedia 、 wx.chooseImage 、 wx.saveImageToPhotosAlbum 、 wx.chooseVideo 、 wx.saveVideoToPhotosAlbum 、 wx.getVideoInfo 、 wx.compressVideo |
位置 | wx.openLocation 、 wx.chooseLocation 、 wx.startLocationUpdateBackground 、 wx.startLocationUpdate |
转发 | wx.getShareInfo 、 wx.showShareMenu 、 wx.hideShareMenu 、 wx.updateShareMenu |
文件 | wx.openDocument |
开放接口 | 登录 、 小程序跳转 、 用户信息 、 支付 、 授权 、 设置 、 收货地址 、 卡券 、 发票 、 生物认证 、 微信运动 、 微信红包 |
设备 | 蓝牙 、 iBeacon 、 Wi-Fi 、 NFC 、 联系人 、 剪贴板 、 电话 、 扫码 |
广告 | ad 、 wx.createRewardedVideoAd 、 wx.createInterstitialAd |