一、背景
在7月份,微信小程序上线了跳转视频号直播的功能,我们也在第一时间发布了直播悬浮窗组件,使商家能够更便捷的将用户导流至视频号直播,促进成交。在近期,微信又上线了小程序预约直播功能,更加丰富了小程序与视频号之间的互动,我们也在微页面中新增了相关组件,帮助商家接入该功能。
二、实际效果
1、视频号直播悬浮窗
点击可跳转视频号直播间。该组件无需配置,商家直播时便会在页面上展示。
2、视频号直播组件
需要商家在后台微页面配置,只要商家在视频号直播中创建预告,即可出现预约状态,支持用户点击预约
点击预约后
预约之后,在直播开始时,将会有消息推送提醒用户进直播间:
若直播已开始,则会展示直播中的状态,点击跳转直播间
三、对接微信接口
1、小程序跳转视频号直播间
开发者首先通过wx.getChannelsLiveInfo传入视频号id用于获取视频号直播信息,包括直播id(feedId与nonceId两个参数)与直播状态。其中直播状态含义如下:
- status=2:直播中,此时返回的feedId与nonceId为当前直播id
- status=3:直播已结束,此时返回的feedId与nonceId为最近一次直播id
获取直播信息后,开发者可以通过wx.openChannelsLive打开视频号直播。若当前未在直播,则会跳转到最近一场直播的结束页。该接口使用限制如下:
- 需要用户触发跳转,若用户未点击小程序页面任意位置,则开发者将无法调用此接口。
- 需要用户确认跳转,在跳转至视频号直播前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转视频号直播。
在调试wx.getChannelsLiveInfo接口时比较麻烦的是需要在真机上测试,在开发者工具上,接口无法正常获取信息,会报告如下错误:
当然在真机上也得注意获取的是同一主体的视频号直播信息,否则会报告如下错误:
成功获取到视频号直播信息后,就可以调用wx.openChannelsLive进行直播间跳转,可能是为了防止开发者滥用此功能,微信要求必须用户点击小程序页面任意位置才能触发此接口,这句话说的有点模糊,到底是说用户点击后,就可以在任意时间调用此接口,还是每次调用都需要用户点击。在实际测试了之后发现,每次调用都需要用户点击,也就是需要在点击回调事件中调用,并且这里还有一点要注意,不能将调用写在promise或者setTimeout中,如:
这样也会导致接口调用失败。
四、小程序内发起预约视频号直播
预约也是分两步走
- 开发者首先通过wx.getChannelsLiveNoticeInfo传入视频号id用于获取视频号直播预告id(noticeId),若当前没有可预约的直播预告,将返回失败。
- 获取直播预告信息后,开发者可以通过wx.reserveChannelsLive唤起预约弹窗,用户可以进行预约操作。成功唤起弹窗即为接口调用成功,通过state可以获取用户具体操作行为。
获取预告信息会给到如下信息:
其中noticeId是用于后续预约预告用的,没什么可说的,比较让人疑惑的是status和reservable字段,你可能会将status理解成目前的预告状态,reservable理解成用户是否已预约,没毛病,笔者刚开始也是那么理解的,但真实调用后发现status只会存在0这种状态,如果预告被取消了或者已用,那直接就走到fail回调里面了。而reservable也不是是否已预约的意思,不管用户是否预约,该字段都是返回true。
所以,status和reservable字段目前给不到更多有价值的信息(后期可能会调整),若你想得知用户是否已预约,只能自己写接口去记录了。
获取直播预告信息后,开发者可以通过wx.reserveChannelsLive唤起预约弹窗,不同于跳转直播间,预约弹窗可随时唤起,不需要用户有点击操作,且支持在异步回调中调用。
预约弹窗唤起后,根据用户的行为,会在success回调中返回相应的state值:
这里特别要说明的是,如果是正在直播中的状态,wx.reserveChannelsLive不再会唤起预约弹窗,而是直接唤起跳转直播弹窗,与wx.openChannelsLive的效果类似:
关于视频号预告,还有一点冷知识,当实际时间到达预告时间时,预告不会立即消失,而是会再保持一个小时,若一个小时后还未开始直播,预告才会被移除,并且在移除之前,预约相关的接口都可以正常调用。
五、总结
本文地址:http://syank.xrbh.cn/quote/2199.html 迅博思语资讯 http://syank.xrbh.cn/ , 查看更多