商城系统 注册

微信小程序直播订阅提醒功能组件引入

2020-08-21|HiShop
导读:微信小程序直播订阅提醒功能组件如下,用户进入直播间内,可对一场未开播的直播进行单次订阅,开播时直播组件会自动下发开播提醒给用户。 【订阅】组件(注:若要使用该组件,...

微信小程序直播订阅提醒功能组件如下,用户进入直播间内,可对一场未开播的直播进行单次订阅,开播时直播组件会自动下发开播提醒给用户。

【订阅】组件(注:若要使用该组件,需在主包/分包先引入直播组件)

功能解释:用户进入直播间内,可对一场未开播的直播进行单次订阅,开播时直播组件会自动下发开播提醒给用户,无需开发者额外开发

组件使用:如果需要在直播组件页以外小程序其他页面也有同样的开播提醒的功能,可以引入【订阅】组件 subscribe(开播前才会显示,直播开始后自动消失该组件);需在 page 页面(如 home 页面)的 home.json 引用订阅组件,可通过 stopPropagation 属性控制是否阻止事件冒泡(默认不阻止事件冒泡,stopPropagation 为 false)。

示例代码如下:

{

"usingComponents": {

"subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"

}

}

然后便可在 home.wxml 里使用订阅组件,其中直播房间 id 可通过下面 获取直播房间列表 API 获取。 同时,订阅组件支持自定义颜色和大小以及携带自定义参数,参数说明如下:

width:表示宽度,类型为 Number

height:表示高度,类型为 Number

font-size:表示字号,类型为 Number

color:表示字体颜色,类型为 String

background-color:表示背景色,类型为 String

custom-params:表示自定义参数,类型为 String

let width = 120

let height = 41

let fontSize = 17

let color = '#FFFFFF'

let backgroundColor = '#6467F0'

let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在订阅组件上携带自定义参数(如示例中的path和pid参数),后续可以在 App onShow 生命周期的 options 里获取(上限600个字符,超过部分会被截断)

this.setData({

width,

height,

fontSize,

color,

backgroundColor,

customParams

})
<subscribe room-id="[直播房间id]" width="{{width}}" height="{{height}}" font-size="{{fontSize}}" color="{{color}}" background-color="{{backgroundColor}}" custom-params="{{customParams}}"></subscribe>

电话咨询 预约演示 0元开店