codecamp

微信小程序 小程序直播·接入说明

小程序直播

小程序直播是微信官方提供的商家经营工具。通过调用该组件,商家可以在小程序中实现直播互动与商品销售闭环。

按照下面的使用说明接入,在你的小程序中引入直播组件即可实现直播功能。使用过程中如遇到问题,可在小程序直播社区发帖交流。

使用方法说明

1. 【直播组件】如何引入

版本限制:微信客户端版本 7.0.7 及以上(基础库版本2.9.x及以上支持同层渲染)可以观看直播及使用直播间的功能,低版本刚进入直播间时会提示用户升级微信客户端版本(低版本只能观看直播,无法使用直播间的功能)。

支持在主包或分包内引入【直播组件】 live-player-plugin 代码包(注:直播组件不计入代码包体积),项目根目录的 app.json 引用,示例代码如下:

(1) 主包引入

"plugins": {
    "live-player-plugin": {
        "version": "1.1.4", // 注意填写该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)
        "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)
    }
}

(2) 分包引入

"subpackages": [
    {
        "plugins": {
            "live-player-plugin": {
                "version": "1.1.4", // 注意该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)
                "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)
            }
        }
    }
]

2. 【直播组件】如何使用

按第1步的方法把组件代码包配置引入后,即可直接通过链接地址跳转到直播组件页面(即为进直播间页面)链接地址需要带上直播房间 id;房间 id 可通过下面 获取直播房间列表 API 获取。

示例代码如下:

(1) 使用 navigator 组件跳转进入直播间

index.js
let roomId = [直播房间id] // 填写具体的房间号,可通过下面【获取直播房间列表】 API 获取
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节(上限600个字符,超过部分会被截断)
this.setData({
    roomId,
    customParams
})
index.wxml
<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{roomId}}&custom_params={{customParams}}"></navigator>
// 其中wx2b03c6e691cd7370是直播组件appid不能修改

(2) 使用 navigateTo 方法跳转进入直播间

index.js
let roomId = [直播房间id] // 填写具体的房间号,可通过下面【获取直播房间列表】 API 获取
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节(上限600个字符,超过部分会被截断)
wx.navigateTo({
    url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
})
// 其中wx2b03c6e691cd7370是直播组件appid不能修改

通过该链接可跳转到直播组件页面(当前页面入口仅开放‘live-player-plugin’)。

示例效果图如下:

直播组件页面

直播组件和接口

【组件接口】

通过在主包/分包中引入直播组件,开发者可以很方便的实现订阅、获取直播状态、获取用户openid以及获取分享卡片链接参数等功能。

【服务端接口】

服务端接口包含直播间接口和商品管理接口。

  • 直播间管理接口是小程序直播提供给开发者对直播间进行批量操作的接口能力。开发者可以批量创建直播间,获取回放源视频,获取直播间列表等。
  • 商品管理接口是小程序直播提供给开发者对直播商品进行批量操作的接口能力。开发者可以对商品批量进行添加、提审、删除以及更新等操作。
类别 名称 功能说明
组件接口 订阅组件 subscribe 用户进入直播间内,可对一场未开播的直播进行单次订阅,开播时直播组件会自动下发开播提醒给用户
获取直播状态  getLiveStatus 首次获取立马返回直播状态,往后间隔1分钟或更慢的频率去轮询获取直播状态
获取用户openid参数getOpenid 在直播组件版本 1.1.4 及以上版本通过该接口获取用户openid参数
获取分享卡片链接参数getShareParams 在直播组件版本 1.1.4 及以上版本通过该接口获取以下参数,开发者可以根据这些参数建立用户、直播间、商品之间的映射关系
直播小窗控制参数 close_picture_in_picture_mode 通过参数设置是否关闭小窗
携带参数( 直播间到商详页面, 从群分享卡片返回直播间 直播组件版本 1.1.4 及以上支持携带以下参数,可用这些参数建立用户、直播间、商品之间的映射关系。
服务端接口 创建直播间 该接口可直接创建直播间,创建成功后直播间将在直播间列表展示
后台获取直播房间列表 该接口可获取直播房间列表
后台获取回放源视频 该接口可在直播结束后拿到回放源视频
往指定直播间导入已入库商品 调用此接口往指定直播间导入已入库的商品
商品添加并提审 调用此接口上传并提审需要直播的商品信息,审核通过后商品录入【小程序直播】商品库
撤回商品审核 调用此接口,可撤回直播商品的提审申请,消耗的提审次数不返还
重新提交商品审核 调用此接口可以对已撤回提审的商品再次发起提审申请
删除商品 调用此接口,可删除【小程序直播】商品库中的商品,删除后直播间上架的该商品也将被同步删除,不可恢复
更新商品 调用此接口可以更新商品信息,审核通过的商品仅允许更新价格类型与价格,审核中的商品不允许更新,未审核的商品允许更新所有字段, 只传入需要更新的字段
获取商品状态 调用此接口可获取商品的信息与审核状态
获取商品列表 调用此接口可获取商品列表


微信小程序 小程序搜索·商品数据接入(内侧)
微信小程序 服务端接口·直播间接口
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

微信小程序 指南

目录结构

开放能力

微信小程序 调试

微信小程序 实时日志

微信小程序 小程序测速

微信小程序 基础组件

微信小程序 API

媒体

界面

微信小程序API 绘图

微信小程序 服务端

接口调用凭证

统一服务消息

微信小程序 服务市场

微信小程序 生物认证

微信小程序 云开发

服务端

微信小程序云开发服务端API 数据库

SDK文档

微信小程序 扩展能力

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }