敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议。
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20251122.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package
【优惠说明】通过一门平台链接登录云信控制台并成功注册账号,云信将提供特别的渠道版套餐,低至五折接入;
基本设置
网易云信 上创建的应用 AppKey
appKey:
是否开启会话已读多端同步,false 即不支持多端同步会话未读数
sessionReadAck:
群通知消息是否计入未读数,false 即群消息不计入未读数
teamNotificationMessageMarkUnread:
是否启用群消息已读功能,false 即关闭群消息已读功能
enableTeamMsgAck:
是否需要将被撤回的消息计入未读数,false 即撤回消息不影响未读数
shouldConsiderRevokedMessageUnreadCount:
登录时的自定义字段,登录成功后同步给其他端
loginCustomTag:
是否同步置顶会话,false 即不同步置顶会话
notifyStickTopSession:
是否开启最近联系人会话时间索引,false 即不开启
enableRecentContactsTimeIndex:
是否开启聊天室空间消息功能,false 即不开启
enableChatRoomLocation:
是否支持圈组消息缓存,false 即不开启
enabledQChatMessageCache:
true 则消息状态是否成功会结合是否被拉入黑名单进行判断
fixMsgStatusByBlackList:
是否开启圈组自动订阅,true 开启圈组自动订阅;false 关闭圈组自动订阅
qchatAutoSubscribe:
小米推送 appId
mixPushConfig.xmAppId:
小米推送 appKey
mixPushConfig.xmAppKey:
小米推送证书,请在云信管理后台申请
mixPushConfig.xmCertificateName:
华为推送 appId
mixPushConfig.hwAppId:
华为推送证书,请在云信管理后台申请
mixPushConfig.hwCertificateName:
魅族推送 appId
mixPushConfig.mzAppId:
魅族推送 appKey
mixPushConfig.mzAppKey:
族推送证书,请在云信管理后台申请
mixPushConfig.mzCertificateName:
VIVO推送证书,请在云信管理后台申请
mixPushConfig.vivoCertificateName:
OPPO推送 appId
mixPushConfig.oppoAppId:
OPPO推送 appKey
mixPushConfig.oppoAppKey:
OPPO推送 appSecret
mixPushConfig.oppoAppSecret:
OPPO推送证书,请在云信管理后台申请
mixPushConfig.oppoCertificateName:
荣耀推送证书,请在云信管理后台申请
mixPushConfig.honorCertificateName:
FCM推送证书,请在云信管理后台申请(海外客户使用)
mixPushConfig.fcmCertificateName:
是否根据token自动选择推送类型
mixPushConfig.autoSelectPushType:
iOS APNs 推送证书名
mixPushConfig.apnsCername:
iOS PushKit 推送证书名
mixPushConfig.pkCername:
安卓版包名,用于跨平台互推消息
mixPushConfig.androidPackageName:
是否需要响铃提醒
statusBarNotificationConfig.ring:
是否需要振动提醒
statusBarNotificationConfig.vibrate:
呼吸灯的颜色,建议尽量使用绿色、蓝色、红色等基本颜色,不要去用混合色。
statusBarNotificationConfig.ledARGB:
吸灯亮时的持续时间(毫秒)
statusBarNotificationConfig.ledOnMs:
呼吸灯熄灭时的持续时间(毫秒)
statusBarNotificationConfig.ledOffMs:
不显示消息详情开关, 同时也不再显示消息发送者昵称
statusBarNotificationConfig.hideContent:
免打扰设置开关
statusBarNotificationConfig.downTimeToggle:
免打扰的开始时间, 格式为HH:mm(24小时制)
statusBarNotificationConfig.downTimeBegin:
免打扰的结束时间, 格式为HH:mm(24小时制)。如果结束时间小于开始时间,免打扰时间为开始时间-24:00-结束时间。
statusBarNotificationConfig.downTimeEnd:
免打扰期间,是否显示通知
statusBarNotificationConfig.downTimeEnableNotification:
通知栏提醒的标题是否只显示应用名
statusBarNotificationConfig.titleOnlyShowAppName:
消息通知栏的折叠类型。 all 折叠所有通知栏消息为一条通知, expand 不折叠通知栏消息, contact 将同一个会话下的消息折叠为一条通知,不同会话之间不折叠
statusBarNotificationConfig.notificationFoldStyle:
消息通知栏颜色
statusBarNotificationConfig.notificationColor:
是否APP图标显示未读数(红点)
statusBarNotificationConfig.showBadge:
如果群名称为null 或者空串,则使用customTitleWhenTeamNameEmpty 作为通知栏title
statusBarNotificationConfig.customTitleWhenTeamNameEmpty:
jsBridge.yxIm.init({
//网易云信 上创建的应用 AppKey
appKey: "{{init.appKey}}",
//是否开启会话已读多端同步,false 即不支持多端同步会话未读数
sessionReadAck: {{init.sessionReadAck}},
//群通知消息是否计入未读数,false 即群消息不计入未读数
teamNotificationMessageMarkUnread: {{init.teamNotificationMessageMarkUnread}},
//是否启用群消息已读功能,false 即关闭群消息已读功能
enableTeamMsgAck: {{init.enableTeamMsgAck}},
//是否需要将被撤回的消息计入未读数,false 即撤回消息不影响未读数
shouldConsiderRevokedMessageUnreadCount: {{init.shouldConsiderRevokedMessageUnreadCount}},
//登录时的自定义字段,登录成功后同步给其他端
loginCustomTag: "{{init.loginCustomTag}}",
//是否同步置顶会话,false 即不同步置顶会话
notifyStickTopSession: {{init.notifyStickTopSession}},
//是否开启最近联系人会话时间索引,false 即不开启
enableRecentContactsTimeIndex: {{init.enableRecentContactsTimeIndex}},
//是否开启聊天室空间消息功能,false 即不开启
enableChatRoomLocation: {{init.enableChatRoomLocation}},
//是否支持圈组消息缓存,false 即不开启
enabledQChatMessageCache: {{init.enabledQChatMessageCache}},
//true 则消息状态是否成功会结合是否被拉入黑名单进行判断
fixMsgStatusByBlackList: {{init.fixMsgStatusByBlackList}},
//是否开启圈组自动订阅,true 开启圈组自动订阅;false 关闭圈组自动订阅
qchatAutoSubscribe: {{init.qchatAutoSubscribe}},
//第三方厂商通道离线推送配置
mixPushConfig: {
//小米推送 appId
xmAppId: "{{init.mixPushConfig.xmAppId}}",
//小米推送 appKey
xmAppKey: "{{init.mixPushConfig.xmAppKey}}",
//小米推送证书,请在云信管理后台申请
xmCertificateName: "{{init.mixPushConfig.xmCertificateName}}",
//华为推送 appId
hwAppId: "{{init.mixPushConfig.hwAppId}}",
//华为推送证书,请在云信管理后台申请
hwCertificateName: "{{init.mixPushConfig.hwCertificateName}}",
//魅族推送 appId
mzAppId: "{{init.mixPushConfig.mzAppId}}",
//魅族推送 appKey
mzAppKey: "{{init.mixPushConfig.mzAppKey}}",
//族推送证书,请在云信管理后台申请
mzCertificateName: "{{init.mixPushConfig.mzCertificateName}}",
//VIVO推送证书,请在云信管理后台申请
vivoCertificateName: "{{init.mixPushConfig.vivoCertificateName}}",
//OPPO推送 appId
oppoAppId: "{{init.mixPushConfig.oppoAppId}}",
//OPPO推送 appKey
oppoAppKey: "{{init.mixPushConfig.oppoAppKey}}",
//OPPO推送 appSecret
oppoAppSecret: "{{init.mixPushConfig.oppoAppSecret}}",
//OPPO推送证书,请在云信管理后台申请
oppoCertificateName: "{{init.mixPushConfig.oppoCertificateName}}",
//荣耀推送证书,请在云信管理后台申请
honorCertificateName: "{{init.mixPushConfig.honorCertificateName}}",
//FCM推送证书,请在云信管理后台申请(海外客户使用)
fcmCertificateName: "{{init.mixPushConfig.fcmCertificateName}}",
//是否根据token自动选择推送类型
autoSelectPushType: {{init.mixPushConfig.autoSelectPushType}},
//iOS APNs 推送证书名
apnsCername: "{{init.mixPushConfig.apnsCername}}",
//iOS PushKit 推送证书名
pkCername: "{{init.mixPushConfig.pkCername}}",
//安卓版包名,用于跨平台互推消息
androidPackageName: "{{init.mixPushConfig.androidPackageName}}"
},
//安卓在线消息通知栏提醒配置项 详细说明请参考这里
statusBarNotificationConfig: {
//是否需要响铃提醒
ring: {{init.statusBarNotificationConfig.ring}},
//是否需要振动提醒
vibrate: {{init.statusBarNotificationConfig.vibrate}},
//呼吸灯的颜色,建议尽量使用绿色、蓝色、红色等基本颜色,不要去用混合色。
ledARGB: "{{init.statusBarNotificationConfig.ledARGB}}",
//吸灯亮时的持续时间(毫秒)
ledOnMs: {{init.statusBarNotificationConfig.ledOnMs}},
//呼吸灯熄灭时的持续时间(毫秒)
ledOffMs: {{init.statusBarNotificationConfig.ledOffMs}},
//不显示消息详情开关, 同时也不再显示消息发送者昵称
hideContent: {{init.statusBarNotificationConfig.hideContent}},
//免打扰设置开关
downTimeToggle: {{init.statusBarNotificationConfig.downTimeToggle}},
//免打扰的开始时间, 格式为HH:mm(24小时制)
downTimeBegin: "{{init.statusBarNotificationConfig.downTimeBegin}}",
//免打扰的结束时间, 格式为HH:mm(24小时制)。如果结束时间小于开始时间,免打扰时间为开始时间-24:00-结束时间。
downTimeEnd: "{{init.statusBarNotificationConfig.downTimeEnd}}",
//免打扰期间,是否显示通知
downTimeEnableNotification: {{init.statusBarNotificationConfig.downTimeEnableNotification}},
//通知栏提醒的标题是否只显示应用名
titleOnlyShowAppName: {{init.statusBarNotificationConfig.titleOnlyShowAppName}},
//消息通知栏的折叠类型。 all 折叠所有通知栏消息为一条通知, expand 不折叠通知栏消息, contact 将同一个会话下的消息折叠为一条通知,不同会话之间不折叠
notificationFoldStyle: "{{init.statusBarNotificationConfig.notificationFoldStyle}}",
//消息通知栏颜色
notificationColor: "{{init.statusBarNotificationConfig.notificationColor}}",
//是否APP图标显示未读数(红点)
showBadge: {{init.statusBarNotificationConfig.showBadge}},
//如果群名称为null 或者空串,则使用customTitleWhenTeamNameEmpty 作为通知栏title
customTitleWhenTeamNameEmpty: "{{init.statusBarNotificationConfig.customTitleWhenTeamNameEmpty}}"
}
}, function(success, res) {
if (success) {
alert('成功' + JSON.stringify(res));
} else {
alert('失败' + JSON.stringify(res));
}
});
jsBridge.yxIm.info(function(success, res) {
if (success) {
alert('成功' + JSON.stringify(res));
} else {
alert('失败' + JSON.stringify(res));
}
/** 成功时 res 参数返回
{
sdkVersion SDK版本
hasInit 是否已初始化
accid 当前登录的 accid
status 当前用户状态
}
**/
});
云信 IM 账号 的 accid
accid:
登录鉴权 token
token:
鉴权方式:
//0 通过静态 token 鉴权;
//1 通过动态 token 鉴权;
//2 基于第三方回调的 token 鉴权方式,使用该方式时必须传入 loginExt 参数
authType:
登录自定义扩展字段,用于第三方服务器鉴权,当 authType 为 2 时必须传入本参数
loginExt:
音视频通话是否使用 自定义用户昵称和头像,如果启用请务必在 setListener 中处理 CallkitUserInfoHelper 事件设置昵称和头像。
useCustomCallkitUserInfo:
示例说明
priorityPushPayload.oppoField.category:
jsBridge.yxIm.login({
//云信 IM 账号 的 accid
accid: "{{login.accid}}",
//登录鉴权 token
token: "{{login.token}}",
//鉴权方式:
//0 通过静态 token 鉴权;
//1 通过动态 token 鉴权;
//2 基于第三方回调的 token 鉴权方式,使用该方式时必须传入 loginExt 参数
authType: {{login.authType}},
//登录自定义扩展字段,用于第三方服务器鉴权,当 authType 为 2 时必须传入本参数
loginExt: "{{login.loginExt}}",
//音视频通话是否使用 自定义用户昵称和头像,如果启用请务必在 setListener 中处理 CallkitUserInfoHelper 事件设置昵称和头像。
useCustomCallkitUserInfo: {{login.useCustomCallkitUserInfo}},
//新增或覆盖到 离线推送 payload 里面去的高优先级字段,任意 JSON Object
priorityPushPayload: {
//请参考网易文档查看字段说明
oppoField: {
//示例说明
category: "{{login.priorityPushPayload.oppoField.category}}"
}
}
}, function(success, res) {
if (success) {
alert('成功' + JSON.stringify(res));
} else {
alert('失败' + JSON.stringify(res));
}
});
jsBridge.yxIm.logout(function(success, res) {
if (success) {
alert('成功' + JSON.stringify(res));
} else {
alert('失败' + JSON.stringify(res));
}
});
云信 IM 账号的 accid:
昵称
nickname:
//登录 login 时需启用 useCustomCallkitUserInfo
//需在 setListner 的 CallkitUserInfoHelper -> fetchNickname 中调用
jsBridge.yxIm.setCallkitUserNickname({
//云信 IM 账号的 accid
accid: "{{setCallkitUserNickname.accid}}",
//昵称
nickname: "{{setCallkitUserNickname.nickname}}"
}, function(success, res) {
if (success) {
alert('成功' + JSON.stringify(res));
} else {
alert('失败' + JSON.stringify(res));
}
});
云信 IM 账号的 accid:
昵称
nickname:
//登录 login 时需启用 useCustomCallkitUserInfo
//需在 setListner 的 CallkitUserInfoHelper -> loadAvatar 中调用
jsBridge.yxIm.setCallkitUserAvatar({
//云信 IM 账号的 accid
accid: "{{setCallkitUserAvatar.accid}}",
//头像
nickname: "{{setCallkitUserAvatar.avatar}}"
}, function(success, res) {
if (success) {
alert('成功' + JSON.stringify(res));
} else {
alert('失败' + JSON.stringify(res));
}
});
事件监听
• 如需处理接口调用事件,请设置此监听器;
jsBridge.yxIm.setListener(function(event, res) {
switch (event) {
//登录 login 时需启用 useCustomCallkitUserInfo 才会有此回调事件
case "CallkitUserInfoHelper": {
switch (res.action) {
//异步请求用户昵称,res.data 为正在请求获取的 { accid: "xxx" }
//准备好数据后请调用 setCallkitUserNickname 接口设置昵称
case "fetchNickname": {
jsBridge.yxIm.setCallkitUserNickname({
accid: res.data.accid,
nickname: "一门 Callkit 测试"
});
break;
}
//异步请求用户头像,res.data 为正在请求获取的 { accid: "xxx" }
//准备好数据后请调用 setCallkitUserAvatar 接口设置头像
case "loadAvatar": {
jsBridge.yxIm.setCallkitUserAvatar({
accid: res.data.accid,
avatar: "https://www.yimenapp.com/assets/trtc/a.png"
});
break;
}
}
break;
}
//通讯录标题栏
case "ContactListTitleBar": {
switch (res.action) {
//点击了右侧图标
//打开通讯录时需提供 titleBarRightIcon 才会有此回调,否则为系统默认行为
case "titleBarRightClick": {
jsBridge.toast("Contact titleBarRightClick");
break;
}
//点击了右2图标
//打开通讯录时需提供 titleBarRight2Icon 才会有此回调,否则为系统默认行为
case "titleBarRight2Click": {
jsBridge.toast("Contact titleBarRight2Click");
break;
}
}
break;
}
//会话列表标题栏
case "ConversationListTitleBar": {
switch (res.action) {
//点击了左侧图标
//打开会话列表时需提供 titleBarLeftIcon 才会有此回调,否则为系统默认行为
case "titleBarLeftClick": {
jsBridge.toast("Conversation titleBarLeftClick");
break;
}
//点击了右侧图标
//打开会话列表时需提供 titleBarRightIcon 才会有此回调,否则为系统默认行为
case "titleBarRightClick": {
jsBridge.toast("Conversation titleBarRightClick");
break;
}
//点击了右2图标
//打开会话列表时需提供 titleBarRight2Icon 才会有此回调,否则为系统默认行为
case "titleBarRight2Click": {
jsBridge.toast("Conversation titleBarRight2Click");
break;
}
}
break;
}
}
//此函数仅用于显示回调参数在本 DEMO 页面上
showResult({
event: event,
res : res
});
});
//请拉到页面底部查看回调数据信息
$('html,body').animate({ scrollTop: $('#view').offset().top }, 500);
/**
回调参数说明:
event //事件代码,字符串类型
res //事件数据,JSON 对象
{
action //事件名称,字符串类型
data //事件参数
}
**/
//移除监听器,不会再收到回调通知 //在需要时可重新调用 setListener jsBridge.yxIm.removeListener();
网易云信 IM 即时通讯
震动
vibrateMode:
响铃
ringMode:
是否听筒播放
handsetMode:
是否显示已读状态
showReadStatus:
-
deleteWithAlias:
-
multiPortPushMode:
jsBridge.yxIm.setGlobalOptions({
//震动
vibrateMode: {{setGlobalOptions.vibrateMode}},
//响铃
ringMode: {{setGlobalOptions.ringMode}},
//是否听筒播放
handsetMode: {{setGlobalOptions.handsetMode}},
//是否显示已读状态
showReadStatus: {{setGlobalOptions.showReadStatus}},
//-
deleteWithAlias: {{setGlobalOptions.deleteWithAlias}},
//-
multiPortPushMode: {{setGlobalOptions.multiPortPushMode}}
}, function(success, res) {
if (success) {
alert('成功' + JSON.stringify(res));
} else {
alert('失败' + JSON.stringify(res));
}
});
jsBridge.yxIm.getGlobalOptions(function(success, res) {
if (success) {
const s = JSON.stringify(res);
alert(`成功 ${s}`);
jsBridge.setClipboardText(s);
jsBridge.toast("已复制");
} else {
alert("失败" + JSON.stringify(res));
}
});
主题
theme:
界面路径
path:
目标用户云信 IM 账号的 accid
accid:
昵称
nickname
头像
avatar
目标群组ID
teamId:
通话类型
callType:
是否显示标题栏
showTitleBar:
是否显示右侧图标
showTitleBarRightIcon:
是否显示右侧图标2
showTitleBarRight2Icon:
右侧图标链接
titleBarRightIcon:
右侧图标2链接
titleBarRight2Icon:
标题
titleBarTitle:
标题颜色
titleBarTitleColor:
是否显示头部(验证、黑名单、群)
showHeader:
是否显示标题栏
showTitleBar:
是否显示左侧图标
showTitleBarLeftIcon:
是否显示右侧图标
showTitleBarRightIcon:
是否显示右侧图标2
showTitleBarRight2Icon:
左侧自定义图标链接
titleBarLeftIcon:
右侧自定义图标链接
titleBarRightIcon:
右侧自定义图标2链接
titleBarRight2Icon:
标题
titleBarTitle:
标题颜色
titleBarTitleColor:
列表项标题大小
itemTitleSize:
列表项标题颜色
itemTitleColor:
列表项内容大小
itemContentSize:
列表项内容颜色
itemContentColor:
列表项时间大小
itemDateSize:
列表项时间颜色
itemDateColor:
头像圆角
avatarCornerRadius:
列表项背景色
itemBackgroundColor:
列表项高亮色
itemStickTopBackgroundColor:
jsBridge.yxIm.navigate({
//主题,fun 为通用版,其他则为基础版
theme : "{{navigate.theme}}",
//界面路径
path : "{{navigate.path}}",
//参数
params: {
accid: "{{navigate.params.accid}}",
nickname: "{{navigate.params.nickname}}",
avatar: "{{navigate.params.avatar}}",
teamId: "{{navigate.params.teamId}}",
//按序显示的工具栏按钮列表,null 则为系统默认按钮组,空数组 [] 则不显示任何按钮
//如下可选值分别为:录音、表情、相册、更多
inputBarItems: [ "record", "emoji", "album", "more" ],
//按序显示展开的更多按钮列表,null 则为系统默认按钮组,空数组 [] 则不显示任何按钮
//如下可选值分别为:拍摄、位置、文件、音视频通话
inputMoreItems: [ "camera", "file", "location", "call" ],
callType: "{{navigate.params.callType}}",
//自定义通讯录界面 UI
//是否显示标题栏
showTitleBar: {{navigate.params.showTitleBar}},
//是否显示右侧图标
showTitleBarRightIcon: {{navigate.params.showTitleBarRightIcon}},
//是否显示右侧图标2
showTitleBarRight2Icon: {{navigate.params.showTitleBarRight2Icon}},
//右侧自定义图标,留空则为默认图标、默认点击行为
titleBarRightIcon: "{{navigate.params.titleBarRightIcon}}",
//右侧自定义图标2,留空则为默认图标、默认点击行为
titleBarRight2Icon: "{{navigate.params.titleBarRight2Icon}}",
//标题
titleBarTitle: "{{navigate.params.titleBarTitle}}",
//标题颜色,留空则为系统默认色
titleBarTitleColor: "{{navigate.params.titleBarTitleColor}}",
//是否显示头部(验证、黑名单、群)
showHeader: {{navigate.params.showHeader}},
//自定义会话消息界面 UI
//是否显示标题栏
showTitleBar: {{navigate.params.showTitleBar}},
//是否显示左侧图标
showTitleBarLeftIcon: {{navigate.params.showTitleBarLeftIcon}},
//是否显示右侧图标
showTitleBarRightIcon: {{navigate.params.showTitleBarRightIcon}},
//是否显示右侧图标2
showTitleBarRight2Icon: {{navigate.params.showTitleBarRight2Icon}},
//左侧图标,留空则为默认图标、默认点击行为
titleBarLeftIcon: "{{navigate.params.titleBarLeftIcon}}",
//右侧图标,留空则为默认图标、默认点击行为
titleBarRightIcon: "{{navigate.params.titleBarRightIcon}}",
//右侧图标2,留空则为默认图标、默认点击行为
titleBarRight2Icon: "{{navigate.params.titleBarRight2Icon}}",
//标题
titleBarTitle: "{{navigate.params.titleBarTitle}}",
//标题颜色,留空则为系统默认色
titleBarTitleColor: "{{navigate.params.titleBarTitleColor}}",
//列表项标题大小,小于1则为系统默认大小
itemTitleSize: {{navigate.params.itemTitleSize}},
//列表项标题颜色,留空则为系统默认色
itemTitleColor: "{{navigate.params.itemTitleColor}}",
//列表项内容大小,小于1则为系统默认大小
itemContentSize: {{navigate.params.itemContentSize}},
//列表项内容颜色,留空则为系统默认色
itemContentColor: "{{navigate.params.itemContentColor}}",
//列表项时间大小,小于1则为系统默认大小
itemDateSize: {{navigate.params.itemDateSize}},
//列表项时间颜色,小于0则为系统默认
itemDateColor: "{{navigate.params.itemDateColor}}",
//头像圆角,小于0则为系统默认圆角大小
avatarCornerRadius: {{navigate.params.avatarCornerRadius}},
//列表项背景色,留空则为系统默认色
itemBackgroundColor: "{{navigate.params.itemBackgroundColor}}",
//列表项高亮色,留空则为系统默认色
itemStickTopBackgroundColor: "{{navigate.params.itemStickTopBackgroundColor}}"
}
}, function(success, res) {
if (success) {
//成功
//在本页面底部显示返回数据
showResult(res);
/*
contact/selector 选择联系人时返回
{
selected_friends: [ "accid1", "accid2" ]
}
*/
} else {
alert(JSON.stringify(res));
}
});
监听回调数据: