敬告:此 demo 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,云顶集团3118-云顶集团3118acm登录入口。
♦ js-sdk 引用方式:
♦ 普通网页 script 方式加载:下载最新版 ,请在页面上调用 jsbridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge
【优惠说明】通过一门平台链接登录云信控制台并成功注册账号,云信将提供特别的渠道版套餐,低至五折接入;
【、】;
基本设置
上创建的应用 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: "{{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}}, //是否使用,如果启用请务必参考示例处理 setlistener 的 fetchuserinfo 事件 usecustomuserinfodelegate: {{init.usecustomuserinfodelegate}}, //第三方厂商通道离线推送配置 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}}" } }, 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 当前用户状态 } **/ });
的 accid
accid:
token
token:
鉴权方式:
//0 通过静态 token 鉴权;
//1 通过动态 token 鉴权;
//2 基于第三方回调的 token 鉴权方式,使用该方式时必须传入 loginext 参数
authtype:
登录自定义扩展字段,用于第三方服务器鉴权,当 authtype 为 2 时必须传入本参数
loginext:
音视频通话是否使用 ,如果启用请务必在 setlistener 中处理 callkituserinfohelper 事件设置昵称和头像。
usecustomcallkituserinfo:
jsbridge.yxim.login({ // 的 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}} }, 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: "{{setcallkitusernickname.accid}}", //昵称 nickname: "{{setcallkitusernickname.nickname}}" }, 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: "{{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) { //用户信息 //初始化 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 //事件参数 } **/
//移除监听器,不会再收到回调通知 //在需要时可重新调用 setlistener jsbridge.yxim.removelistener();
网易云信 im 即时通讯
云信 im 账号的 accid
users[0].accid:
昵称
users[0].nickname:
头像
users[0].avatar:
//初始化 init 时需启用 usecustomuserinfodelegate //需在 setlistner 的 customuserinfodelegate -> fetchuserinfo 中调用 jsbridge.yxim.setuserinfo({ //一个或多个用户资料数组 users: [ { //云信 im 账号的 accid accid: "{{setuserinfo.users[0].accid}}", //昵称 nickname: "{{setuserinfo.users[0].nickname}}", //头像 avatar: "{{setuserinfo.users[0].avatar}}" } //...可以一次设置多个用户 ] }, function(success, res) { if (success) { alert('成功' json.stringify(res)); } else { alert('失败' json.stringify(res)); } });
震动
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) { 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 : "{{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}}", // //是否显示标题栏 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}}, // //是否显示标题栏 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)); } });
监听回调数据: