打开半屏小程序、跳转、转发

1,479 阅读6分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第8天,点击查看活动详情

打开半屏小程序

当小程序需要打开另一个小程序让用户进行快捷操作时,可将要打开的小程序以半屏的形态跳转。

image.png

调用流程

打开半屏小程序
  • 开发者需要在全局配置app.json的embeddedAppIdList字段中声明需要半屏跳转的小程序,若不配置将切换为普通的小程序跳转小程序。2.23.1及以上版本起无需配置

image.png

  • 开发者通过调用wx.openEmbeddedMiniProgram半屏跳转小程序
半屏小程序环境判断

开发者可以通过调用wx.getEnterOptionsSync读取APICategory参数,当值为embedded时,可以判断此时小程序被半屏打开。

返回源小程序

被半屏打开的小程序可以通过调用wx.navigateBackMiniProgram返回上一个小程序。

使用限制

使用过程有以下限制,若不符合以下所有条件将被自动切换为普通的小程序跳转小程序,不影响用户使用:

  1. 被半屏跳转的小程序需要通过来源小程序的调用申请,开发者可在 小程序管理后台「设置」-「第三方设置」-「半屏小程序管理」板块发起申请,最多可以申请10个小程序;
  2. 2.23.1版本以下基础库,被半屏打开的小程序需要在app.jsonembeddedAppIdList字段中声明;
  3. 当前小程序需为竖屏;
  4. 被半屏跳转的小程序需为非个人主体小程序(不含小游戏

跳转

wx.openEmbeddedMiniProgram(Object Object)

打开半屏小程序。

image.png

image.png

image.png

wx.navigateToMiniProgram

打开另一个小程序

image.png

image.png

image.png

使用限制
  • 需要用户触发跳转。防止恶意跳转,必须通过用户操作才能跳转
  • 需要用户确认跳转,会询问是否跳转用户确认后才可以跳转其他小程序。如果用户点击取消,则回调 fail cancel
  • 无需声明跳转名单,不限跳转数量(众测中) 代码示例: image.png

wx.navigateBackMiniProgram

返回到上一个小程序,只有在当前小程序是被其他小程序打开时可以调用成功

image.png
代码示例:

image.png

wx.exitMiniProgram(Object Object)

退出当前小程序。必须有点击行为才能调用成功

image.png

转发

获取更多转发信息

通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息,例如群的标识(能够确认真实的被转发了)现在通过调用wx.showShareMenu并且设置withShareTicket为true,当用户将小程序转发到任一群聊之后,此转发卡片在群聊中被其他用户打开时,可以在App.onLaunch或App.onShow获取到一个shareTicket,通过调用wx.getShareInfo接口传入此shareTicket可以获取到转发信息。

页面内发起转发

通过button组件设置属性open-type=“share”,可以在用户点击按钮后触发Page.onShareAppMessage事件,相关组件:button。

使用指引

转发按钮,旨在帮助用户更流畅地与好友分享内容和服务。转发,应是用户自发的行为,且在需要时触手可及。开发者在使用时若遵从以下指引,会得到更佳的用户体验。

  1. 含义清晰:明确、一目了然的图形按钮,将为用户减少理解的时间。在我们的资源下载中心,你可以找到这样的按钮素材并直接使用。或者你可以根据自己业务的设计风格,灵活设计含义清晰的按钮的样式。当然,你也可以直接使用带文案的按钮,“转发给好友”,它也足够明确。
  2. 方便点击:按钮点击热区不宜过小,亦不宜过大。同时,转发按钮与其他按钮一样,热区也不宜过密,以免用户误操作。
  3. 按需出现:并非所有页面都适合放置转发按钮,涉及用户隐私的非公开内容,或可能打断用户完成当前操作体验的场景,该功能并不推荐使用。同时,由于转发过程中,我们将截取用户屏幕图像作为配图,因此,需要注意帮助用户屏蔽个人信息。
  4. 尊重意愿:理所当然,并非所有的用户,都喜欢与朋友分享你的小程序。因此,它不应该成为一个诱导或强制行为,如转发后才能解锁某项功能等。请注意,这类做法不仅不被推荐,还可能违反《运营规范》
动态消息

动态消息对比普通消息,有以下特点:

  1. 消息发出去之后,开发者可以通过后台接口修改部分消息内容。
  2. 消息有对应的提醒按钮,用户点击提醒按钮可以订阅提醒,开发者可以通过后台修改消息状态并推送一次提醒消息给订阅了提醒的用户

消息属性

动态消息有状态、文字内容、文字颜色、系统消息提醒

模板

动态消息目前有两个模板,应用于组队场景,分别以‘开始时’和‘到齐时’为状态变更和提醒节点

image.png

状态

每个模板有三个状态,分别有其对应的文字内容和颜色。其中状态 0 可以转移到状态 0 和 1 和 2,状态 1 可以转移到状态 2,状态 2 不可以转移。 ‘开始时’

image.png

image.png

使用方法

  1. 创建 activity_id

每条动态消息可以理解为一个活动,活动发起前需要通过 [updatableMessage.createActivityId]接口创建 activity_id。后续转发动态消息以及更新动态消息都需要传入这个 activity_id 2. 在转发之前声明消息类型为动态消息
通过调用wx.updateShareMenu接口,传入isUpdatableMessage:true,以及templateInfo、activityId参数,其中activityId从步骤一中获得。

image.png 3. 修改动态消息内容
动态消息发出去之后,可以通过 [updatableMessage.setUpdatableMsg] 修改消息内容

wx.updateShareMenu(Object Object)

更新转发属性

image.png

image.png
代码示例:

image.png

wx.showShareMenu

显示当前页面的转发按钮

image.png

代码示例: image.png

wx.showShareImageMenu(Object Object)

打开分享图片弹窗,可以将图片发送给朋友、收藏或下载(可以做长按事件分享图片)

image.png
代码示例:

image.png

wx.shareVideoMessage(Object Object)

转发视频到聊天

image.png
代码示例:

image.png

wx.shareFlieMessage(Object Object)

转发文件到聊天

image.png
示例代码:

image.png

wx.onCopyUrl(function listener)

监听用户点击右上角菜单的复制链接按钮触发的事件。本接口为Beta版本,暂时只在Android平台上支持。

image.png
代码示例:

image.png

wx.offCopyUrl(