伟鹏即时通商城版网页客户端集成

客户端集成以及步骤

客户端集成只需1~4步骤即可把伟鹏即时通网店网页版集成到您的网页中。更多个性定制请看第5步骤。

第1步：载入脚本

请载入Im服务器脚本。不要下载到本地，否者会导致无法正常加载网页版IM。
<script type="text/javascript" src="http://[服务器地址]/wpim_shop_im_min.js"></script>

第2步：实例化即时通

复制以下代码，到您的网站页面的Javascript代码中。
//信贸通网店版类实例化与初始化Javascript脚本
var shopIm = new WP.ShopIm({
    //isHideMainBar:false,       //是否显示主工具条，默认(true)显示
    loginType:1,                 //登陆类型，0：访客，1：会员
    urlLoginKey: "LoginKey.ashx" //登录安全Key提供地址,
    //通过登录安全Key,和您的网站用户一起登陆。
    //请看集成接口DEMO http://www.semot.com/im/api.htm
});

//即时通讯初始化
shopIm.init();

第3步：链接聊天

在网页的HTML中，可以根据您的需求插入各种聊天接入。

文字链接，效果如：开始交谈
<a href="javascript:shopIm.startChat(10013);">开始交谈(UIN:10013)</a>
图片链接，效果如：
<a href="javascript:shopIm.startChat(10013);"><img src="images/btn.gif" /></a>
带状态的图片链接，效果如：，图片地址请设置为接口服务器的地址。
<a href="javascript:shopIm.startChat(10013);">
<img src="http://[接口服务器地址]/WebService/Member/Face/?uin=10012&t=1" >
</a>

第4步：服务端集成

登陆安全Key提供，用户集成等服务端的集成，请参考网站集成开发接口所提供的演示代码。
完成这一步，您的IM已经完成初步的集成，如果需要更多的个性化定制请继续以下步骤。

第5步：个性定制

通过以下方式，您可以定制属于您的网页版IM。

5.1、登录窗口

/**
* 描述：【可选】覆盖该函数，可以根据实际应用的情况定制登录窗口显示的内容。
* 参数：
*   cfg  好友资料对象
*/
shopIm.buildLoginWinContent = function (cfg) {
    cfg.title = "信贸通登录";                     //登陆标题
    cfg.content = "您还没有登录，请点击登录。";      //未登录提示语
    cfg.hintMessage = "正在登录，请稍候...";       //正在登录提示语
    return cfg;
};

5.2、会话列表

/**
* 描述：【可选】覆盖该函数，可以根据实际应用的情况定制会话列表窗口显示的内容。
* 参数：
*   cfg  好友资料对象
*/
shopIm.buildListWinContent = function (cfg) {
    cfg.title = "信贸通会话列表";       //列表标题
    cfg.btnExitText = "退出";           //退出文本
    return cfg;
};

5.3、聊天窗口边栏

/**
* 描述：【可选】覆盖该函数，可以根据实际应用的情况定制聊天窗口显示的内容。
* 参数：
*   buddy  好友资料对象
*/
shopIm.buildChatWinSideContent = function (buddy,sideElt,winElt) {
    return {
        title: buddy.Nickname + "资料",
        content: [
                "<div><ul>",
                "<li><span>号码：</span>" + buddy.Uin + "<li>",
                "<li><span>昵称：</span>" + buddy.Nickname + "<li>",
                "<li><span>状态：</span>" + this.statusToDescr(buddy.Status) + "<li>",
                "</ul></div>",
                "<div>这里显示的内容，在集成到系统的时候都可以自定义。</div>"
            ].join("")
    };
};

5.4、聊天窗口打开后事件

/**
* 描述：【可选】聊天窗口打开后事件
* 参数：
*   eltId  HTML元素Id
*   toUin  需要聊天的对象的Uin
*/
shopIm.onChatWinOpened = function (eltId, toUin) {
    var win = $("#" + eltId);
    //演示重设窗口位置
    win.css({
        left: ($(window).width() - win.width()) / 2 + 'px',
        top: ($(window).height() - win.height()) / 2 + $(document).scrollTop() + 'px', 'display': 'block'
    });
};

5.5、收到消息事件

/**
* 描述：【可选】收到消息事件   
*/
shopIm.onBuddyMsg = function(msgObject){
    //console.log("收到消息");
    var uin = msgObject.json.From;  //获取消息来源
    shopIm.startChat(uin);          //打开对应的聊天窗口
};

5.6、好友状态改变事件

/** 
* 描述：【可选】好友状态改变事件 
*/
shopIm.onBuddySts = function(msgObject){
    //console.log("好友状态改变");
};

5.7、本地消息缓存改变事件

/**
* 描述：【可选】本地消息缓存改变 
*/
shopIm.onBuddyMsgCacheChange = function(msgObject){
    console.log("本地消息缓存改变");
};

5.8、登录失败事件

/**
* 描述：【可选】登录失败事件
*/
shopIm.onLoginFailCallback = function() {
    //salert("登录失败事件,可以Js中取消监听。");
};

5.9、正在登录事件

/**
*描述：【可选】用户登录 
*/
shopIm.onLoging = function(){
    //console.log("正在登录..");
};

5.10、已经登录成功事件

/**
* 描述：【可选】已经登录 
*/
shopIm.onLogined = function(userInfo){
    //console.log("已经登录...");
};

5.11、登录方法

//点击登录按钮时，会自动调用登录方法。如果您需要其他方式登录，可以代码中调用login方法。
shopIm.login();

5.12、登出/退出方法

//IM界面中已经包含退出按钮，如果您需要在其他地方退出，可以代码中调用loginOut方法。
shopIm.loginOut();

5.13、隐藏或显示主工具条 

/**
*隐藏或显示主工具条 
*/
shopIm.setMainBarVisible(false);  // false:隐藏, true:显示