liveUI

来自于：开发者立即使用

openLiveUI addUserInfo addUserInfoList setMemberCounts isShowGuanZhuBtn delUserInfo showDanmu showMessage showMessageList showSystemMessage clearMessage hiddenLiveUI showLiveUI closeLiveUI

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码供您参考。

概述

本模块实现了iOS和Android的直播界面ui效果，实现了用户头像显示、直播观众列表显示、弹幕、互动消息列表展示、观众进入房间提示消息、系统提示消息展示。丰富了直播功能界面，让您的app更灵动。(备注：本模块是根据手机的屏幕大小来布局的，请在需要设置本模块的界面为全屏，这样才能完全显示完模块的UI元素。)

模块效果图如下： 描述

固件要求

Android：4.0及以上 iOS：7.0及以上

模块接口

openLiveUI

打开直播UI界面

openLiveUI({params}, callback(ret, err))

params

uid：

  • 类型：字符串
  • 描述：（必填项）主播用户id

name：

  • 类型：字符串
  • 描述：（可选项）主播名称
  • 默认值：直播

roomName：

  • 类型：字符串
  • 描述：（可选项）直播房间名称

headpic：

  • 类型：字符串
  • 描述：（可选项）主播用户的头像地址（图片不存在时有默认头像，请用圆形图片），支持http:// fs://、widget:// 协议。
  • 默认值：默认用户头像

starpic：

  • 类型：字符串
  • 描述：（可选项）主播等级图标（图片不存在时有默认等级图标，请用圆形图片），支持http:// fs://、widget:// 协议。
  • 默认值：无等级

isDanmu：

  • 类型：布尔型
  • 描述：（可选项）是否开启弹幕。(true:开启弹幕 false:关闭弹幕)
  • 默认值：true（开启弹幕）

isShowGuanZhuBtn：

  • 类型：布尔型
  • 描述：（可选项）是否显示关注按钮 。
  • 默认值：true（显示关注按钮）

memberCounts：

  • 类型：数字型
  • 描述：（可选项）观看人数 。
  • 默认值：0

userList：

  • 类型： 数组对象
  • 描述：（必填项）观众用户列表
  • 内部字段：
  1. [{
  2.     uid: '',   //（必填项）(字符串)；用户id
  3.     nickname: '',   //（必填项）字符串；用户名称
  4.     headpic: '', //（可选项）字符串；用户头像，支持http:// fs:// widget://
  5.     starpic: '', //（可选项）字符串；等级图标，支持http:// fs:// widget://
  6. }]

messageList：

  • 类型： 数组对象
  • 描述：（必填项）用户消息列表
  • 内部字段：
  1. [{
  2.     uid: '',   //（必填项）(字符串)；用户id
  3.     startnum: 1,   //（必填项）(数字型)；用户等级id
  4.     nickname: "小气鬼"+new Date().getTime(),   //（必填项）字符串；用户名称
  5.     nicknameColor: '#BA55D3',   //（可选项）字符串；用户名称字体颜色
  6.     message: "🎁🎁🎁 ☕️☕️☕️😝😝  可以试试消息能不能发送emjo标清",   //（必填项）字符串；消息内容
  7.     messageColor: '#BA55D3',   //（可选项）字符串；消息内容字体颜色
  8. }]

fixedOn：

  • 类型：字符串
  • 描述：（可选项）模块所属 Frame 的名字，若不传则模块归属于当前 Window

fixed：

  • 类型：布尔值
  • 描述：（可选项）模块是否随所属 Window 或 Frame 滚动
  • 默认值：true（不随之滚动）

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true,      //布尔型；true||false
  3.     eventType : 'show',//show              打开ui模块
  4.                        //onClickHeadIcon   点击主播头像
  5.                        //onClickGuanZhu    点击关注按钮
  6.                        //onClickUserList   点击观众列表某用户头像
  7.                        //onClickMessage    点击消息列表某条消息
  8.     uid : '1',            //用户id（根据不同事件返回对应的用户id）
  9.     nickname : ''         //用户名称(仅onClickUserList事件才有此参数)
  10. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. var userList = new Array();
  3. var msgList = new Array();
  5. for(var i =0;i<5;i++){
  6.     var data1 = {
  7.         uid : i,//用户id
  8.         nickname : "小气鬼"+new Date().getTime(),//用户名称
  9.         headpic : "widget://image/mac.png",//用户头像
  10.         starpic : "widget://image/icon_live_toolbar_send_star.png"//等级图标
  11.     };
  12.     userList.push(data1);
  14.     var data = {
  15.         uid : i,//用户id
  16.         startnum : 1,
  17.         nickname : "小气鬼"+new Date().getTime(),
  18.         nicknameColor : "#BA55D3",
  19.         message : "🎁🎁🎁 ☕️☕️☕️😝😝  可以试试消息能不能发送emjo标清",
  20.                     messageColor : "#DDA0DD"
  21.     };
  23.     msgList.push(data);
  24. }
  26. var param = {
  27.     roomName : "映票:9116683", //房间名称
  28.     uid : '12333', //用户id
  29.     name : "直播",//用户名称或者直播名称
  30.     headpic : "widget://image/mac.png", //用户头像或者直播房间头像
  31.     starpic : "widget://image/icon_live_toolbar_send_star.png",//等级图标
  32.     isDanmu : true,//是否开启弹幕
  33.     isShowGuanZhuBtn : true,//是否显示关注按钮
  34.     memberCounts : 100,//观看人数
  35.     userList : userList,
  36.     messageList : msgList,
  37.     fixedOn : api.frameName,
  38.     fixed : true
  39. };
  40. demo.openLiveUI(param, function(ret, err) {
  41.     api.toast({msg : JSON.stringify(ret)+"  "+JSON.stringify(err)});
  42. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addUserInfo

添加观众用户加入接口

addUserInfo({params}, callback(ret, err))

params

uid：

  • 类型： 字符串
  • 描述：（必填项）用户id

nickname：

  • 类型： 字符串
  • 描述：（必填项）用户名称

headpic：

  • 类型： 字符串
  • 描述：（可选项）用户头像（图片不存在时有默认头像，请用圆形图片），支持http:// fs:// widget://
  • 默认值：默认用户头像

starpic：

  • 类型： 字符串
  • 描述：（可选项）用户等级图片（图片不存在时有默认等级图片，请用圆形图片），支持http:// fs:// widget://
  • 默认值：无等级

isJoinView：

  • 类型：布尔型
  • 描述：（可选项）是否隐藏登场消息框
  • 默认值：true(不显示)

backgroundPic：

  • 类型： 字符串
  • 描述：（可选项）登场消息框背景图片（图片不存在时有默认背景图片），支持http:// fs:// widget://

startnum：

  • 类型： 数字型
  • 描述：（可选项）用户等级

nicknameColor：

  • 类型： 字符串
  • 描述：（可选项）用户名称字体颜色
  • 默认值：#D08600

message：

  • 类型： 字符串
  • 描述：（可选项）登场消息内容
  • 默认值：进入

messageColor：

  • 类型： 字符串
  • 描述：（可选项）登场消息内容字体颜色
  • 默认值：#FE1E4D

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true   //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. var param = {
  3.     uid : new Date().getTime(),//用户id
  4.     nickname : "小气鬼"+new Date().getTime(),//用户名称
  5.     headpic : "widget://image/mac.png",//头像图片
  6.     starpic : "widget://image/icon_live_toolbar_send_star.png",//等级图片
  8.     isJoinView : false,  //是否显示闪亮登场消息框 默认 true 不显示｜false 显示
  9.     backgroundPic : "widget://image/listview_messgage_jion_background.png",//闪亮登场的背景图片
  10.     startnum : 99,//等级
  11.     nicknameColor : "#B03060",//用户名称字体颜色
  12.     message : "闪亮登场",//消息内容
  13.     messageColor : "#836FFF"//消息字体颜色
  14. };
  15. demo.addUserInfo(param, function(ret, err) {
  16.     api.toast({msg : JSON.stringify(ret)+"  "+JSON.stringify(err)});
  17. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addUserInfoList

批量添加观众用户加入接口

addUserInfoList({params}, callback(ret, err))

params

userList：

  • 类型： 数组对象
  • 描述：（必填项）加入观众用户列表
  • 内部字段：
  1. [{
  2.     uid: '1',   //（必填项）(字符串)；用户id
  3.     nickname: '',   //（必填项）字符串；用户名称
  4.     headpic: '', //（可选项）字符串；用户头像，支持http:// fs:// widget://
  5.     starpic: '', //（可选项）字符串；等级图标，支持http:// fs:// widget://
  6. }]

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true   //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. var userList = new Array();
  3. for(var i =0;i<5;i++){
  4.     var data1 = {
  5.         uid : i,//用户id
  6.         nickname : "小气鬼"+new Date().getTime(),//用户名称
  7.         headpic : "widget://image/mac.png",//用户头像
  8.         starpic : "widget://image/icon_live_toolbar_send_star.png"//等级图标
  9.     };
  10.     userList.push(data1);
  11. }
  12. demo.addUserInfoList({
  13.     userList : userList
  14. }, function(ret, err) {
  15.     api.toast({msg : JSON.stringify(ret)+"  "+JSON.stringify(err)});
  16. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setMemberCounts

仅设置显示置观众人数，和观众列表纪录数无关

setMemberCounts({params}, callback(ret, err))

params

memberCounts：

  • 类型：数字型
  • 描述：（必填项）观看人数。

callback(ret,err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true   //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. demo.setMemberCounts({
  3.     memberCounts : 99999//观看人数
  4. }, function(ret,err) {
  5.     api.toast({msg : JSON.stringify(ret));
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

isShowGuanZhuBtn

是否显示关注按钮

isShowGuanZhuBtn({params}, callback(ret, err))

params

isShowGuanZhuBtn：

  • 类型：布尔型
  • 描述：（可选项）是否显示关注按钮。
  • 默认值：true（显示）

callback(ret,err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true   //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. demo.setMemberCounts({
  3.     isShowGuanZhuBtn : false
  4. }, function(ret,err) {
  5.     api.toast({msg : JSON.stringify(ret));
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

delUserInfo

观看用户退出

delUserInfo({params}, callback(ret, err))

params

uid：

  • 类型：字符串
  • 描述：（可选项）用户id。

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true   //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg : ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. demo.delUserInfo({
  3.     uid : ''
  4. }, function(ret,err) {
  5.     api.toast({msg : JSON.stringify(ret));
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

showDanmu

发送弹幕消息

showDanmu({params}, callback(ret, err))

params

nickname：

  • 类型： 字符串
  • 描述：（必填项）用户名称

nicknameColor：

  • 类型： 字符串
  • 描述：（可选项）用户名称字体颜色
  • 默认值：#D08600

headpic：

  • 类型： 字符串
  • 描述：（可选项）用户头像（图片不存在时有有默认头像，请用圆形图片），支持http:// fs:// widget://
  • 默认值：默认用户头像

starpic：

  • 类型： 字符串
  • 描述：（可选项）等级图标(图片不存在时有默认等级图标，请用圆形图片)，支持http:// fs:// widget://
  • 默认值：无等级

message：

  • 类型： 字符串
  • 描述：（必填项）弹幕消息内容

messageColor：

  • 类型： 字符串
  • 描述：（可选项）弹幕消息内容字体颜色
  • 默认值：#FE1E4D

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.   status: true|false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. var param = {
  3.     nickname : "小气鬼",  //用户名称
  4.     headpic : "widget://image/mac.png", //用户头像
  5.     starpic : "widget://image/icon_live_toolbar_send_star.png",//等级图片
  6.     message : "🎁🎁🎁 ☕️☕️☕️😝😝  可以试试消息能不能发送emjo标清" + new Date().getTime()  //弹幕消息内容
  7. };
  8. demo.showDanmu(param, function(ret, err) {
  9.     api.toast({msg : JSON.stringify(ret)+"  "+JSON.stringify(err)});
  10. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

showMessage

消息列表显示消息信息

showMessage({params}, callback(ret, err))

params

uid：

  • 类型： 字符串
  • 描述：（必填项）用户id

startnum：

  • 类型： 数字型
  • 描述：（可选项）用户等级

nickname：

  • 类型： 字符串
  • 描述：（必填项）用户名称

nicknameColor：

  • 类型： 字符串
  • 描述：（可选项）用户名称字体颜色
  • 默认值：#D08600

message：

  • 类型： 字符串
  • 描述：（必填项）发送消息内容

messageColor：

  • 类型： 字符串
  • 描述：（可选项）发送消息内容字体颜色
  • 默认值：#FE1E4D

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.   status: true,      //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. var param = {
  3.     uid : new Date().getTime(),//用户id
  4.     startnum : 1,  //等级
  5.     nickname : "小气鬼"+new Date().getTime(),//用户名称
  6.     nicknameColor : "#BA55D3",//用户名称字体颜色
  7.     message : "🎁🎁🎁 ☕️☕️☕️😝😝  可以试试消息能不能发送emjo标清",//消息
  8.     messageColor : "#DDA0DD"//消息字体颜色
  9. };
  10. demo.showMessage(param, function(ret, err) {
  11.     api.toast({msg : JSON.stringify(ret)+"  "+JSON.stringify(err)});
  12. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

showMessageList

批量添加消息列表显示消息信息

showMessageList({params}, callback(ret, err))

params

messageList：

  • 类型： 数组对象
  • 描述：（必填项）用户消息列表
  • 内部字段：
  1. [{
  2.     uid: '',   //（必填项）(字符串)；用户id
  3.     startnum: 1,   //（必填项）(数字型)；用户等级id
  4.     nickname: "小气鬼"+new Date().getTime(),   //（必填项）字符串；用户名称
  5.     nicknameColor: '#BA55D3',   //（可选项）字符串；用户名称字体颜色
  6.     message: "🎁🎁🎁 ☕️☕️☕️😝😝  可以试试消息能不能发送emjo标清",   //（必填项）字符串；消息内容
  7.     messageColor: '#BA55D3',   //（可选项）字符串；消息内容字体颜色
  8. }]

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true   //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. var messageList = new Array();
  3. for(var i =0;i<5;i++){
  4.     var data1 = {
  5.         uid : new Date().getTime(),//用户id
  6.         startnum : 1,  //等级
  7.         nickname : "小气鬼"+new Date().getTime(),//用户名称
  8.         nicknameColor : "#BA55D3",//用户名称字体颜色
  9.         message : "🎁🎁🎁 ☕️☕️☕️😝😝  可以试试消息能不能发送emjo标清",//消息
  10.         messageColor : "#DDA0DD"//消息字体颜色
  11.     };
  12.     messageList.push(data1);
  13. }
  14. demo.showMessageList({
  15.     messageList : messageList
  16. }, function(ret, err) {
  17.     api.toast({msg : JSON.stringify(ret)+"  "+JSON.stringify(err)});
  18. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

showSystemMessage

显示直播系统消息

showSystemMessage({params}, callback(ret, err))

params

title：

  • 类型： 字符串
  • 描述：（必填项）用户名称

titleColor：

  • 类型： 字符串
  • 描述：（可选项）用户名称字体颜色
  • 默认值：#D08600

message：

  • 类型： 字符串
  • 描述：（必填项）系统消息内容

messageColor：

  • 类型： 字符串
  • 描述：（可选项）系统消息内容字体颜色
  • 默认值：#FE1E4D

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true,      //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. var param = {
  3.     title : "直播消息：",//标题
  4.     titleColor : "#BA55D3",//标题颜色
  5.     message : "哲宝宝入住贡献榜，空降头等舱",//消息
  6.     messageColor : "#DDA0DD"//消息字体颜色
  7. };
  8. demo.showSystemMessage(param, function(ret, err) {
  9.     api.toast({msg : JSON.stringify(ret)+"  "+JSON.stringify(err)});
  10. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

clearMessage

清空消息列表

clearMessage(callback(ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true,      //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. demo.clearMessage(function(ret, err) {
  3.     api.toast({msg : JSON.stringify(ret)});
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hiddenLiveUI

隐藏直播ui

hiddenLiveUI(callback(ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true,      //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. demo.hiddenLiveUI(function(ret, err) {
  3.     api.toast({msg : JSON.stringify(ret)});
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

showLiveUI

显示直播ui

showLiveUI(callback(ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true,      //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

示例代码

  1. var demo = api.require('liveUI');
  2. demo.showLiveUI(function(ret, err) {
  3.     api.toast({msg : JSON.stringify(ret)});
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

closeLiveUI

关闭直播ui

closeLiveUI(callback(ret, err))

示例代码

  1. var demo = api.require('liveUI');
  2. demo.closeLiveUI(function(ret, err) {
  3.     api.toast({msg : JSON.stringify(ret)});
  4. });

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true,      //布尔型；true||false
  3. }

err：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''
  3. }

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本