起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 6085|回复: 12

[分享] IM集成分享,适合WEX5

  [复制链接]

11

主题

33

帖子

157

积分

初级会员

Rank: 2

积分
157
QQ
发表于 2017-2-21 19:54:51 | 显示全部楼层 |阅读模式
本帖最后由 yyx8136 于 2017-4-27 13:58 编辑

使用的是容联的IM,可以单聊 群聊  视频语音通讯
个人信息 是不支持头像的,推荐建个头像储存数据库,如果不需要音视频的话,可以直接使用自己建的用户库;
引入   <script src="http://app.cloopen.com/im50/ytx-web-im-min-new.js"></script>
可以使用 require("http://app.cloopen.com/im50/ytx-web-im-min-new.js"); 引入 但是实现sign的md5加密 是不能用WEX5自带的。。。
地址:http://www.yuntongxun.com/doc/sdk/web/2_4_1_2.html
文档挺简洁,最多一天就能集成进去 而且整个过程无错误!!! 不会用铛铛的 来这个最好了


这里用的是直接使用用户名登录
效果:
S70217-221705.jpg 实时获得离线消息,可以获取在线状态和使用网络 S70217-221315.jpg 单聊 新建文件夹S70217-243806.jpg 可以很容易实现群聊





至于聊天界面可以使用铛铛的
只是简单的集成    有这些足够写出来了   还有问题可以加我QQ群 514674130
简易代码和官方demo:链接:http://pan.baidu.com/s/1c12UAVA 密码:tm8i
另外说一下发送图片是的问题  

Model.prototype.file1Change = function(event) {
                var self = this;
                // 从选取文件对话框返回后,检查用户是否选择了文件,是否选择了图片文件
                if (!event.target.files) {
                        return;
                }
                var $inputImage = $(this.getElementByXid('inputImage'));
                var file = event.target.files[0];
                if (/^image\/\w+$/.test(file.type)) {
                $(this.getElementByXid('inputImage')).val();
                        //file = URL.createObjectURL(file);
                        //file = $(this.getElementByXid('inputImage')).val()[0]
                        //alert(.fileName)
                        //这里需要对文件 file.fileName 要有,不然无法发送
                        this.owner.getModel().fasmsg(sfwq,id,4,file);
                } else {
                        layer.msg('请选择图片文件!');

                }

        };




1011

主题

4364

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
10924
QQ
发表于 2017-2-21 20:02:39 | 显示全部楼层
大赞贴主
孤舟蓑笠翁,独钓寒江雪。
X5牛刀交流民间第一群:30057529
提供有偿服务,联系WX:18332024
bex5疑难问题解决方案
回复

使用道具 举报

1011

主题

4364

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
10924
QQ
发表于 2017-2-21 20:11:17 | 显示全部楼层
用户量有没有限制
孤舟蓑笠翁,独钓寒江雪。
X5牛刀交流民间第一群:30057529
提供有偿服务,联系WX:18332024
bex5疑难问题解决方案
回复 支持 反对

使用道具 举报

11

主题

33

帖子

157

积分

初级会员

Rank: 2

积分
157
QQ
 楼主| 发表于 2017-2-21 20:40:37 | 显示全部楼层
本帖最后由 yyx8136 于 2017-2-21 20:42 编辑
ecoolper 发表于 2017-2-21 20:11
用户量有没有限制

这个应该没有限制  把铛铛的界面提取的也开源出来吧 至于多的 我都没时间提取了 只实现了 图片和文字 后面自己加吧 很简单  我这种菜鸟都会 文档也很简易
回复 支持 反对

使用道具 举报

11

主题

33

帖子

157

积分

初级会员

Rank: 2

积分
157
QQ
 楼主| 发表于 2017-2-21 20:41:03 | 显示全部楼层
css:
.form-control {
        margin-bottom: 10px;
        box-shadow:none;
        border-color:#efefef;
        border-radius: 0px;
}
.nopadding{ padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;}
.nopadding.col{ padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;}

.btn-onclick{
        background-color: #FF8000;
        color: #cccccc;
        transition:all .5s ease;
       
}
.btn-onclick{
        background-color: #FF8000;
        color: #cccccc;
        transition:all .5s ease;
       
}
.listitem {
        margin-top: 10px;
}
.o-messageBox1,.o-messageBox2 {
        position: relative
}

.o-messageBox1 {
        padding-right: 50px;
}

.o-messageBox1 span.msgContent{
        float: left;
        padding: 8px 10px;
        margin-left: 7px;
        font-size: 18px;
        border: 1px solid #d2d2d2;
        border-radius: 5px;
        background-color: #fafafa;
}
.o-messageBox1 .photoMsg{
        float: left;
        padding: 8px 10px;
        margin-left: 7px;
        font-size: 18px;
        border: 1px solid #d2d2d2;
        border-radius: 5px;
        background-color: #fafafa;
}

.msgContent1{
        float: left;
        padding: 8px 10px;
        margin-left: 7px;
        font-size: 18px;
        border: 1px solid #d2d2d2;
        border-radius: 5px;
        background-color: #fafafa;
}
.o-messageBox1.msgContent{
        float: left;
        padding: 8px 10px;
        margin-left: 7px;
        font-size: 18px;
        border: 1px solid #d2d2d2;
        border-radius: 5px;
        background-color: #fafafa;
}


.o-messageBox1 .o-icon {
        width: 8px;
        height: 14px;
        position: absolute;
        left: 0;
        top: 32px;
        z-index: 1;
}

.o-messageBox2 {
        padding-left: 50px;
}

.o-messageBox2 span.msgContent {
        float: right;
        padding: 8px 10px;
        margin-right: 7px;
        font-size: 18px;
        border: 1px solid rgba(137, 174, 86, 0.8);
        border-radius: 5px;
        background-color: #b1e866;
}
.o-messageBox2 .photoMsg {
        float: right;
        padding: 8px 10px;
        margin-right: 7px;
        font-size: 18px;
        border: 1px solid rgba(137, 174, 86, 0.8);
        border-radius: 5px;
        background-color: #b1e866;
}


.o-messageBox2 .o-icon {
        width: 8px;
        height: 14px;
        position: absolute;
        right: 0;
        top: 32px;
        z-index: 1;
}


.o-messageBox2 span.photoMsg,
.o-messageBox1 span.photoMsg,
.o-messageBox2 span.audioMsg,
.o-messageBox1 span.audioMsg,
.o-messageBox2 span.videoMsg,
.o-messageBox1 span.videoMsg{
        padding:2px;
}
.o-messageBox1 span.x-touch{
        background-color : gainsboro;
}
.o-messageBox2 span.x-touch{
        background-color : darkseagreen;
}
.msgContent {
        width:auto; display:block; white-space:pre-wrap; word-wrap:break-word; word-break:break-all; overflow:hidden;
        -webkit-touch-callout:none;
}

.x-messageTime{
        margin-right:8px;
        font-size:smaller;
        float: left;
}
.media {
        margin-bottom: 10px;
}

.media-body {
        vertical-align: middle;
}
回复 支持 反对

使用道具 举报

11

主题

33

帖子

157

积分

初级会员

Rank: 2

积分
157
QQ
 楼主| 发表于 2017-2-21 20:41:24 | 显示全部楼层
js:
define(function(require){
        var $ = require("jquery");
        var justep = require("$UI/system/lib/justep");
        var sfwq = 0;
        var id = null;
        var Model = function(){
        this.sfkyfs = justep.Bind.observable(false);
                this.callParent();
        };
        Model.prototype.backBtnClick = function(event){
                if(sfwq ==0){
                lxr = lxrdata.find(['ID'], [id], true,false,false);
                if(lxr.length!=0)lxr[0].val("xxsl", 0);}
                this.owner.close();
        };
        Model.prototype.sendBtnClick = function(event){
                this.sendMsg();
        };
        Model.prototype.sendMsg = function(){

                var msg= this.comp("msgContent").val();
                var me =this;
                var list=this.comp("list1");

                if(msg==null||msg.trim().length==0){
                        layer.msg ("不能发送空消息");
                        return;
                }
                this.owner.getModel().fasmsg(sfwq,id,1,msg);
//

                me.comp("scrollView").scrollTo("end");
                //清空内容
                this.comp("msgContent").clear();



                me.comp("scrollView").scrollTo("end");







        };
        Model.prototype.msgContentKeypress = function(event){

                // 回车键事件  
                if(event.which == 13) {  
                        this.sendMsg();
                }  

        };


        Model.prototype.sendBtnTouchstart = function(event){
         
        };


        Model.prototype.sendBtnTouchend = function(event){
       this.comp("sendBtn").removeClass("btn-onclick");
        };


        Model.prototype.modelLoad = function(event){
               
        };
        Model.prototype.setxxgl = function(row){
                this.comp("scrollView").scrollTo("end");
                if(sfwq == 0){
                        //row.val(row.val())
                        if(row.val("sfwg") != 0)return false;
                        if(row.val("Uid") != id)return false;
                }else if(row.val("Gid") != id)return false;
                return true;
        };


        Model.prototype.modelParamsReceive = function(event){
                sfwq = event.params.data.sfwq;
                id = event.params.data.id;
                var name = event.params.data.name;
                if(sfwq == 0){
                this.comp("backBtn").set({"label" : "与  " + name + " 聊天"});
                this.comp("buttonbt").set({"label" : ""});
                }
                else {
                this.comp("buttonbt").set({"label" :  name });
                this.comp("backBtn").set({"label" : ""});
                }
                this.comp("list1").refresh();
        };


        Model.prototype.pdsj = function(createTime){
                var time = justep.Date.fromString(createTime,'yyyy-MM-dd hh:mm:ss');
                var currentTime = new Date();
                var ges= "hh:mm";
                if(!createTime)return "null";if(between === 0)return "";
                /*var between = justep.Date.diff(time,currentTime,'h');
                if(between === 0)return "";*/
                var between = justep.Date.diff(time,currentTime,'h');
                if(between >= 24)
                {
                        between = justep.Date.diff(time,currentTime,'m');
                        if(between < 12)ges = "MM/dd hh:mm";
                        else ges = "yyyy-MM-dd hh:mm";
                }
                return justep.Date.toString(time, ges);
               
        };
        Model.prototype.i4Click = function(event){
                var row = event.bindingContext.$object;
                this.getParentModel().retruefasmsg(row.val("hdsj"));
        };
        Model.prototype.button1Click = function(event){
                $(this.getElementByXid('inputImage')).click();
        };
        Model.prototype.file1Change = function(event) {
                var self = this;
                // 从选取文件对话框返回后,检查用户是否选择了文件,是否选择了图片文件
                if (!event.target.files) {
                        return;
                }
                var $inputImage = $(this.getElementByXid('inputImage'));
                var file = event.target.files[0];
                if (/^image\/\w+$/.test(file.type)) {
                $(this.getElementByXid('inputImage')).val();
                        //file = URL.createObjectURL(file);
                        //file = $(this.getElementByXid('inputImage')).val()[0]
                        //alert(.fileName)
                       
                        this.owner.getModel().fasmsg(sfwq,id,4,file);
                } else {
                        layer.msg('请选择图片文件!');

                }

        };


        Model.prototype.msgContentChange = function(event){
        alert("");
                /*if(this.comp("msgContent").val() != "")this.sfkyfs.set(true);
                else this.sfkyfs.set(false);*/
                /*if(this.comp("msgContent").val() != ""){this.comp("sendBtn").addClass("btn-onclick");}
                else this.comp("sendBtn").removeClass("btn-onclick");*/
        };


        return Model;
});
回复 支持 反对

使用道具 举报

11

主题

33

帖子

157

积分

初级会员

Rank: 2

积分
157
QQ
 楼主| 发表于 2017-2-21 20:41:49 | 显示全部楼层
html
<?xml version="1.0" encoding="UTF-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window" design="device:m;">  
  <div component="$UI/system/components/justep/model/model" xid="model" onParamsReceive="modelParamsReceive" style="height:auto;top:102px;left:392px;"></div>
<div component="$UI/system/components/justep/panel/panel" class="x-panel x-full" xid="panel2">
   <div class="x-panel-top" xid="top1">
    <div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar" xid="titleBar2" style="color:#000000;background-color:#FFFFFF;">
     <div class="x-titlebar-left" xid="left2">
      <a component="$UI/system/components/justep/button/button" class="btn btn-link" xid="backBtn" icon="linear linear-volumehigh" style="color:#000000;" onClick="backBtnClick">
       <i xid="i3" class="linear linear-volumehigh"></i>
       <span xid="span3"></span></a> </div>
     <div class="x-titlebar-title" xid="title2"><a component="$UI/system/components/justep/button/button" class="btn btn-link" xid="buttonbt" style="margin-top:-8px;font-weight:bolder;">
   <i xid="i5"></i>
   <span xid="span7"></span></a></div>
     <div class="x-titlebar-right reverse" xid="right2"></div></div> </div>
   <div class="x-panel-content  x-scroll-view" xid="content1" _xid="C768485446C00001816E1C2CC7301471" style="bottom:55px;background-color:#E8E8E8;">
    <span xid="span5"></span>
    <div class="x-scroll" component="$UI/system/components/justep/scrollView/scrollView" xid="scrollView">
     <div class="x-content-center x-pull-down container" xid="div1">
      <i class="x-pull-down-img glyphicon x-icon-pull-down" xid="i1"></i>
      <span class="x-pull-down-label" xid="span1">下拉刷新...</span></div>
     <div class="x-scroll-content" xid="div2">
      <div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="zxxdata.datas" autoLoad="true" filter="$model.setxxgl($row) != null" limit="-1" style="margin-top:15px;">
       <ul class="x-list-template x-min-height" xid="listTemplateUl1" componentname="$UI/system/components/justep/list/list#listTemplateUl" id="undefined_listTemplateUl1">
         <li xid="li1" class="x-min-height" componentname="li(html)" id="undefined_li1">
   <div xid="div4" style="padding-right:10px;padding-left:10px;padding-top:1px;"><div class="media" xid="media1" bind-visible='val("syzl") == 1 &amp;&amp;   $model.setxxgl($object)'>
   <div class="media-left" xid="mediaLeft1">
    <img src="$UI/syxykf/main_sf/pt_img/ico_80.png" alt="" xid="image4" style="height:47px;position:relative;width:47px;margin-top:10px;" class="img-circle" bind-attr-src='val("yhtx")'></img></div>
   <div class="media-body o-messageBox1" xid="mediaBody1">
   
  
  <div xid="rwxx" style="padding-left:5px;"><span xid="span4" bind-text='val("yhname") ' bind-visible='val("Uid") == val("Gid") ? false : true'></span>
  <span xid="span9" bind-text='$model.pdsj(val("hdsj"))' style="font-size:x-small;padding-left:5px;color:#808080;"></span></div><div xid="send">
  <img alt="" class="o-icon" src="./pt_img/tb1.png" xid="image"></img>
  <img src="" alt="" xid="image5" bind-attr-src='val("xxnr")' class="photoMsg img-responsive" bind-visible='val("type") == 4 ? true : false'></img><span xid="span6" bind-html='ref("xxnr")' class="msgContent" bind-visible='val("type") == 1 ?  true : false'></span>
  </div>
  </div> </div><div class="media" xid="media2" bind-visible='val("syzl") == 0 &amp;&amp;  $model.setxxgl($object)'>
   
   <div class="media-body text-right o-messageBox2" xid="mediaBody2">
   
  
  <div xid="div6" style="padding-right:5px;">
   <span xid="span10" bind-text='$model.pdsj(val("hdsj"))' style="font-size:x-small;color:#808080;padding-right:5px;"></span></div><div xid="recey"><img alt="" class="o-icon" src="./pt_img/tb2.png" xid="image3"></img><img src="" alt="" xid="image1" bind-attr-src='val("xxnr")' class="photoMsg img-responsive" bind-visible='val("type") == 4 ? true : false'></img><span bind-touchcancel="touchEnd" class="text-left msgContent" oncontextmenu="return false;" xid="me" bind-text='val("xxnr")' bind-visible='val("type") == 1 ?  true : false'></span>
  </div>
  <i xid="i4" class="linear linear-directionltr" style="font-size:medium;margin-right:5px;color:#FF0000;font-weight:bolder;" bind-visible='val("sfcg") == 0 ? true : false' bind-click="i4Click"></i></div>
  <div class="media-right" xid="mediaRight1">
   <img alt="" xid="image2" style="height:47px;margin-top:10px;" bind-attr-src='minedata.val("yhtx") == null ? require.toUrl("./main_sf/user_img/Head_user") : minedata.val("yhtx")' class="img-circle" src="$UI/syxykf/main_sf/pt_img/ico_80.png"></img></div></div>
  </div>
   
  </li></ul> </div> </div>
  </div>
  </div>
   <div class="x-panel-bottom" xid="bottom1" height="55">
    <div component="$UI/system/components/justep/row/row" class="x-row" xid="row1" style="height:55px;">
     <div class="x-col x-col-10" xid="col1" style="height:48;">
      <a component="$UI/system/components/justep/button/button" class="btn btn-link btn-only-icon" xid="button2" onClick="button1Click" icon="glyphicon glyphicon-plus-sign" style="font-size:x-large;margin-top:-5px;width:100%;margin-left:-10px;color:#C0C0C0;">
   <i xid="i6" class="glyphicon glyphicon-plus-sign"></i>
   <span xid="span12"></span></a></div>
      
  <div class="x-col" xid="col4"><input component="$UI/system/components/justep/input/input" class="form-control" xid="msgContent" bind-keypress="msgContentKeypress" style="border-width:0px 0px 2px 0px;"></input></div><div class="x-col x-col-10" xid="col2" style="width:auto;height:55px;margin-right:32px;">
      <a component="$UI/system/components/justep/button/button" class="btn btn-link" xid="sendBtn" onClick="sendBtnClick" style="font-size:large;width:100%;padding-right:10px;" label="发送">
       <i xid="i2"></i>
       <span xid="span2">发送</span></a> </div></div> </div> </div>
  <input type="file" value="" xid="inputImage" bind-change="file1Change" accept="image/*" style="display:none;"></input></div>
回复 支持 反对

使用道具 举报

31

主题

109

帖子

411

积分

中级会员

Rank: 3Rank: 3

积分
411
QQ
发表于 2017-3-6 14:21:47 | 显示全部楼层

lz 下载链接怎么没了
回复 支持 反对

使用道具 举报

8

主题

56

帖子

142

积分

初级会员

Rank: 2

积分
142
QQ
发表于 2017-4-7 02:49:29 | 显示全部楼层
支持分享~~谢谢~
回复 支持 反对

使用道具 举报

20

主题

149

帖子

410

积分

中级会员

Rank: 3Rank: 3

积分
410
QQ
发表于 2017-4-18 10:00:31 | 显示全部楼层
引入容联的JS文件与wex5自带的Base64冲突!
在执行 LoginBuilder  时报错:Base64 is not defind
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-9-27 21:23 , Processed in 0.107214 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表