敬告：此 DEMO 演示为开放测试页面，仅用于开发者快速测试体验应用功能，请严格遵守开发者协议，了解更多。
♦ JS-SDK 引用方式：
♦ 普通网页 script 方式加载：下载最新版 jsBridge-v20250507.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:
是否使用自定义用户信息，如果启用请务必参考示例处理 setListener 的 fetchUserInfo 事件
useCustomUserInfoDelegate:
小米推送 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:
jsBridge.yxIm.init({
//网易云信 上创建的应用 AppKey
appKey: "526064e0004f34e8e1eab70b9e5687fa",
//是否开启会话已读多端同步，false 即不支持多端同步会话未读数
sessionReadAck: false,
//群通知消息是否计入未读数，false 即群消息不计入未读数
teamNotificationMessageMarkUnread: false,
//是否启用群消息已读功能，false 即关闭群消息已读功能
enableTeamMsgAck: false,
//是否需要将被撤回的消息计入未读数，false 即撤回消息不影响未读数
shouldConsiderRevokedMessageUnreadCount: false,
//登录时的自定义字段，登录成功后同步给其他端
loginCustomTag: "",
//是否同步置顶会话，false 即不同步置顶会话
notifyStickTopSession: false,
//是否开启最近联系人会话时间索引，false 即不开启
enableRecentContactsTimeIndex: false,
//是否开启聊天室空间消息功能，false 即不开启
enableChatRoomLocation: false,
//是否支持圈组消息缓存，false 即不开启
enabledQChatMessageCache: false,
//true 则消息状态是否成功会结合是否被拉入黑名单进行判断
fixMsgStatusByBlackList: false,
//是否开启圈组自动订阅，true 开启圈组自动订阅；false 关闭圈组自动订阅
qchatAutoSubscribe: false,
//是否使用自定义用户信息，如果启用请务必参考示例处理 setListener 的 fetchUserInfo 事件
useCustomUserInfoDelegate: false,
//第三方厂商通道离线推送配置
mixPushConfig: {
//小米推送 appId
xmAppId: "",
//小米推送 appKey
xmAppKey: "",
//小米推送证书，请在云信管理后台申请
xmCertificateName: "",
//华为推送 appId
hwAppId: "",
//华为推送证书，请在云信管理后台申请
hwCertificateName: "",
//魅族推送 appId
mzAppId: "",
//魅族推送 appKey
mzAppKey: "",
//族推送证书，请在云信管理后台申请
mzCertificateName: "",
//VIVO推送证书，请在云信管理后台申请
vivoCertificateName: "",
//OPPO推送 appId
oppoAppId: "",
//OPPO推送 appKey
oppoAppKey: "",
//OPPO推送 appSecret
oppoAppSecret: "",
//OPPO推送证书，请在云信管理后台申请
oppoCertificateName: "",
//荣耀推送证书，请在云信管理后台申请
honorCertificateName: "",
//FCM推送证书，请在云信管理后台申请(海外客户使用)
fcmCertificateName: "",
//是否根据token自动选择推送类型
autoSelectPushType: false,
//iOS APNs 推送证书名
apnsCername: "",
//iOS PushKit 推送证书名
pkCername: ""
}
}, 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:
jsBridge.yxIm.login({
//云信 IM 账号 的 accid
accid: "ym1",
//登录鉴权 token
token: "123456",
//鉴权方式：
//0 通过静态 token 鉴权；
//1 通过动态 token 鉴权；
//2 基于第三方回调的 token 鉴权方式，使用该方式时必须传入 loginExt 参数
authType: 0,
//登录自定义扩展字段，用于第三方服务器鉴权，当 authType 为 2 时必须传入本参数
loginExt: "",
//音视频通话是否使用 自定义用户昵称和头像，如果启用请务必在 setListener 中处理 CallkitUserInfoHelper 事件设置昵称和头像。
useCustomCallkitUserInfo: false
}, 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:
//需在 setListner 的 CallkitUserInfoHelper -> fetchNickname 中调用
jsBridge.yxIm.setCallkitUserNickname({
//云信 IM 账号的 accid
accid: "ym1",
//昵称
nickname: "一门 Callkit 测试"
}, function(success, res) {
if (success) {
alert('成功' + JSON.stringify(res));
} else {
alert('失败' + JSON.stringify(res));
}
});
云信 IM 账号的 accid:
昵称
nickname:
//需在 setListner 的 CallkitUserInfoHelper -> loadAvatar 中调用
jsBridge.yxIm.setCallkitUserAvatar({
//云信 IM 账号的 accid
accid: "ym1",
//头像
nickname: "https://www.yimenapp.com/assets/trtc/a.png"
}, function(success, res) {
if (success) {
alert('成功' + JSON.stringify(res));
} else {
alert('失败' + JSON.stringify(res));
}
});
事件监听
• 如需处理接口调用事件，请设置此监听器；
jsBridge.yxIm.setListener(function(event, res) {
switch (event) {
//用户信息
//初始化 init 时需启用 useCustomUserInfoDelegate 才会有此回调事件
case "CustomUserInfoDelegate": {
switch (res.action) {
//异步请求用户信息，res.data 为正在请求获取的 accid 数组
//准备好用户信息后请调用 setUserInfo 接口设置用户信息
case "fetchUserInfo": {
const DemoUsers = {
ym1: {
accid: "ym1",
nickname: "一门1",
avatar: "https://www.yimenapp.com/assets/trtc/a1.png"
},
ym2: {
accid: "ym2",
nickname: "一门2",
avatar: "https://www.yimenapp.com/assets/trtc/a2.png"
}
};
//正在请求获得的 accid 列表
const accids = res.data;
/* 示例
fetch(...).then(() => {
jsBridge.yxIm.setUserInfo(...)
});
*/
const users = [];
accids.forEach(function(accid) {
const user = DemoUsers[accid];
users.push(user ? user : {
accid: accid,
nickname: '未知昵称',
avatar: 'https://www.yimenapp.com/assets/trtc/a.png'
});
});
jsBridge.yxIm.setUserInfo({
users: users
});
break;
}
}
break;
}
//登录 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 //事件参数
}
**/
网易云信 IM 即时通讯
云信 IM 账号的 accid
users[0].accid:
昵称
users[0].nickname:
头像
users[0].avatar:
//初始化 init 时需启用 useCustomUserInfoDelegate
//需在 setListner 的 CustomUserInfoDelegate -> fetchUserInfo 中调用
jsBridge.yxIm.setUserInfo({
//一个或多个用户资料数组
users: [
{
//云信 IM 账号的 accid
accid: "ym1",
//昵称
nickname: "一门1",
//头像
avatar: "https://www.yimenapp.com/assets/trtc/a1.png"
}
//...可以一次设置多个用户
]
}, function(success, res) {
if (success) {
alert('成功' + JSON.stringify(res));
} else {
alert('失败' + JSON.stringify(res));
}
});
震动
vibrateMode:
响铃
ringMode:
是否听筒播放
handsetMode:
是否显示已读状态
showReadStatus:
-
deleteWithAlias:
-
multiPortPushMode:
jsBridge.yxIm.setGlobalOptions({
//震动
vibrateMode: true,
//响铃
ringMode: true,
//是否听筒播放
handsetMode: true,
//是否显示已读状态
showReadStatus: true,
//-
deleteWithAlias: false,
//-
multiPortPushMode: false
}, function(success, res) {
if (success) {
alert('成功' + JSON.stringify(res));
} else {
alert('失败' + JSON.stringify(res));
}
});
jsBridge.yxIm.getGlobalOptions(function(success, res) {
if (success) {
alert("成功" + JSON.stringify(res));
} 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 : "",
//界面路径
path : "contact/list",
//参数
params: {
//自定义通讯录界面 UI
//是否显示标题栏
showTitleBar: true,
//是否显示右侧图标
showTitleBarRightIcon: true,
//是否显示右侧图标2
showTitleBarRight2Icon: true,
//右侧自定义图标，留空则为默认图标、默认点击行为
titleBarRightIcon: "",
//右侧自定义图标2，留空则为默认图标、默认点击行为
titleBarRight2Icon: "",
//标题
titleBarTitle: "一门APP",
//标题颜色，留空则为系统默认色
titleBarTitleColor: "#333333",
//是否显示头部(验证、黑名单、群)
showHeader: true,
}
}, function(success, res) {
if (success) {
//成功
//在本页面底部显示返回数据
showResult(res);
/*
contact/selector 选择联系人时返回
{
selected_friends: [ "accid1", "accid2" ]
}
*/
} else {
alert(JSON.stringify(res));
}
});
监听回调数据：