## 聊天组件 说明 ~~~ 1.聊天面板组件rbk-chat-->历史消息事件chat.doLayout(jsonArray)、添加消息事件chat.addMsg(json)、头像点击事件绑定chat.bindHeadClick(function)、消息点击事件绑定chat.bindMsgClick(function) 2.聊天内容组件rbk-chatitem-->默认聊天组件、本人聊天组件rbk-chatself、系统消息组件rbk-chatsyetem 3.聊天组件输入框rbk-chatform-->发送按钮组件、功能面板组件、功能列表绑定chat.bindOffeFunc(offerName,offerImg,function)、发送消息方法chat.bindMsgFunc(myname,myHeadImg,function) 4.客户端相关组件 接收客户端推送消息接口 rbk.getAppMsg(function) 客户端访问手机相册接口 rbk.platform.accessGallery(function) 客户端拍照接口 rbk.platform.accessCamera(function) 聊天方法汇总： chat.title(text) 设置title内容 chat.doLayout(jsonArray) 向后添加聊天记录 chat.doLayoutBefore(jsonArray) 向前添加聊天记录 chat.addMsg(json) 添加一条消息 chat.addBeforeMsg(json) 向前添加一条消息 chat.bindHeadClick(function) 绑定头像点击事件 chat.bindMsgClick(function) 绑定消息点击事件 chat.bindOffeFunc(offerName,offerImg,function) 绑定功能项与事件 chat.bindMsgFunc(myname,myHeadImg,function) 绑定发送按钮点击事件 聊天组件集成了滑动刷新组件rbk-scroll，可以通过rbk.getCmp('scroll')获取组件，并使用方法，具体使用看例子 ~~~ * * * * *  数据结构 ~~~ var csjson = [{ type:'self', text:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈', headImg:'../../../dists/images/basic/head-default.png', name:'gege', //time字段，显示聊天记录时间，不写不显示 time:'9:02' },{ type:'self', headImg:'../../../dists/images/basic/head-default.png', imgurl:'../../../dists/images/basic/head-default.png', time:'9:08' },{ type:'system', text:'9:10' },{ text:'哈哈哈哈哈', headImg:'../../../dists/images/basic/head-default-normal.png', name:'gege', time:'10:10' },{ text:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈', headImg:'../../../dists/images/basic/head-default-normal.png', name:'gege', time:'11:10' },{ text:'哈哈哈哈哈', headImg:'../../../dists/images/basic/head-default-normal.png', name:'gege' },{ headImg:'../../../dists/images/basic/head-default-normal.png', name:'gege', imgurl:'https://rerubx.zwjk.com/v1.3.0/images/example/head01.png', time:'11:20' },{ text:'哈哈哈哈哈', headImg:'../../../dists/images/basic/head-default-normal.png', name:'gege', time:'12:10' },{ type:'self', text:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈', headImg:'../../../dists/images/basic/head-default.png', name:'gege' }] ~~~ html ~~~ <div class='rbk-chat'></div> ~~~ js ~~~ rbk.ready(function(opt) { //获取聊天组件 var chat = rbk.getCmp('chat'); //设置聊天对象 chat.title('聊天'); //获取聊天记录 chat.doLayout(csjson); //获取聊天记录（往前添加） chat.doLayoutBefore(csjson); //添加一条聊天记录 chat.addMsg({ type:'self', text:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈新加的', headImg:'../../../dists/images/basic/head-default.png', name:'gege' }) //发送事件绑定 msg为回调的输入框数值 chat.bindMsgFunc('我','../../../dists/images/basic/head-default.png',function(msg){ console.log(msg); /*chat.addMsg({ type:'system', text:'发送失败' })*/ }); //绑定功能项3个参数 功能名 功能图标url 功能点击事件方法 chat.bindOffeFunc('拍照','../../../dists/images/basic/camera.jpg','pz',function(){ rbk.platform.accessCamera(function(me){ chat.addMsg({ type:'self', headImg:'../../../dists/images/basic/head-default.png', imgurl:me.imageUrl }) }) }); chat.bindOffeFunc('相册','../../../dists/images/basic/gallery.jpg','fwxc',function(){ rbk.platform.accessGallery(function(me){ chat.addMsg({ type:'self', headImg:'../../../dists/images/basic/head-default.png', imgurl:me.imageUrl }) }) }); //收到推送事件绑定 系统获得推送时绑定的方法（自定义） rbk.getAppMsg(function(callback){ console.log('收到推送:'+callback); }); //头像点击事件绑定 itemCmp为回调的点击项 chat.bindHeadClick(function(itemCmp){ alert(itemCmp.raw) }); //聊天内容点击事件绑定 itemCmp为回调的点击项 chat.bindMsgClick(function(itemCmp){ if(!!itemCmp.raw.imgurl){ console.log(itemCmp.raw.imgurl); return; } alert(itemCmp.raw.text) }) //获取滚动刷新组件 var scroll = rbk.getCmp('scroll'); //模拟无聊天记录情况，设置一个值 var canscroll = 0; //添加下拉刷新查看聊天记录事件 scroll.scrollDown(function(){ setTimeout(function(){ //添加消息两种方法 一种是addBefoMsg（倒序），一种是doLayoutBefore /*chat.addBeforeMsg({ type:'self', text:'不错啊，这么帅，约一个？', headImg:'../../../dists/images/basic/head-default.png', name:'gege', time:'19:20' }); chat.addBeforeMsg({ headImg:'../../../dists/images/basic/head-default.png', name:'gege', time:'19:20', imgurl:'https://rerubx.zwjk.com/v1.3.0/images/example/head01.png' }); chat.addBeforeMsg({ type:'self', text:'帅哥，头像发一张给我看看', headImg:'../../../dists/images/basic/head-default.png', name:'gege', time:'19:20' });*/ chat.doLayoutBefore([{ type:'self', text:'帅哥，头像发一张给我看看', headImg:'../../../dists/images/basic/head-default.png', name:'gege', time:'19:20' },{ headImg:'../../../dists/images/basic/head-default.png', name:'gege', time:'19:20', imgurl:'https://rerubx.zwjk.com/v1.3.0/images/example/head01.png' },{ type:'self', text:'不错啊，这么帅，约一个？', headImg:'../../../dists/images/basic/head-default.png', name:'gege', time:'19:20' }]) scroll.refresh(); canscroll++; if(canscroll>0){ //模拟无聊天记录的情况，关闭下拉刷新功能 scroll.scrollDownEnd(); } },2000); },'下拉查看更多聊天记录'); }); ~~~