“@”功能—用Appcan的API实现—众学

一、窗口与浮动窗口的机制

  当前项目下，打开的界面实际上分成两部分：   窗口（head）和浮动窗口（普通的界面）

    进入初始页面（每个模块下的index.html）后，点击相应的功能，比如在im下的index.html页面，点击群组消息，此时的调用线路：jump(types,conversionId)-->openwin(types, head, '2')

function openwin(winName,url,anim){
   * uexWindow.open(winName, "0", url, anim, "", "", "4", "275");
}

带星号的方法为AppCan的API，其中url为地址，winName为打开的窗口的名称，此名称需唯一。一个页面可以多次被调用，并且显示不同的内容，都是因为带入的窗口名称不同。如系统消息，私聊和群聊都是公用同一个head，但是由于传入的winName不同，所以显示的效果也不同。

窗口打开后，同样通过载入时候的方法打开浮动窗口

   

 zy_con('content', types + '.html', 0, $$('header').offsetHeight, $$('footer').offsetHeight);
 
 -->function zy_con(id,url,x,y){
   
    var s=window.getComputedStyle($$(id),null);
    var scale=getScale(id);   
    if(localStorage['device']=='android'){
        var b=0;
        if(arguments.length==5){
            b+=int(arguments[4]);
        }
        uexWindow.openPopover(id,"0",url,"",int(x)*scale,int(y)*scale,int(s.width)*scale,"",int(s.fontSize)*scale,"4",b);
    }else{
        uexWindow.openPopover(id,"0",url,"",int(x)*scale,int(y)*scale,int(s.width)*scale,int(s.height)*scale,int(s.fontSize)*scale,"4","0");
    }
}

 uexWindow.openPopover方法中的id也可以是唯一，如果不唯一则打开其它的浮动窗口便会把当前的浮动窗口覆盖，由于真实项目中手机只会打开一个浮动窗口，所以当前项目下就将id设置为content，打开其它窗口时就将原窗口覆盖。

打开的位置和窗口大小则在被封装的方法：

function zy_resize(id,x,y)
{
    var s=window.getComputedStyle($$(id),null);
    var scale=getScale(id);  
    uexWindow.setPopoverFrame(id,int(x)*scale,int(y)*scale,int(s.width)*scale,int(s.height)*scale);
}

进行设定（具体问网页美工）

---------------------------------------------------------------------------------------------------------------------------

二、“@”功能的实现

    由于“@”功能只在群组消息下使用，在私聊情况下不会出现，所以在打开群组消息，也就是head和group_message后，在uexOnload功能下加入：

if(types == "group_message"){
                $("#text-input").on("keyup", function() {
                    var txt = $("#text-input").text();
                    var last_txt = txt.charAt(txt.length - 1);
                    if (last_txt == "@") {
                        jump("group_user");
                    }
                })
                }

定位到文本框，获取其中的文本，然后进行扫描检查，如果发现前一个字母是“@”，就跳转。具体的jump方法看当前head下的设定。

在跳转的页面下，点击相应的用户后：

function group_user_info(group_id,user_id,user_nick_name){
        if(source != "group_message"){
           params.current_user_id = user_id;                   
          jump("group_user_info", "群名片");
          }else{
          uescript(source,"call_friend_back('"+user_nick_name+"')");           1
          uescript('', 'closewin()');                                          2
          }
    }

判断source（由params携带），如果是group_message，就会调用另一个窗口下的浮动窗口中的方法，将当前用户的昵称传入，然后再调用当前窗口的closewin()方法，将窗口关闭，完成“@”功能；

-----------------------------------------------------------------------------------------------------------------------------

三、注意

function uescript(wn, scr){
    uexWindow.evaluateScript(wn,'0',scr);
}

uexWindow.evaluateScript是调用窗口中的方法，wn就是窗口的名称，默认为当前的窗口，scr是方法名

function ueppscript(wn, pn, scr){
    uexWindow.evaluatePopoverScript(wn,pn,scr);
}

uexWindow.evaluatePopoverScript是打开浮动窗口的方法，wn是窗口的名称，pn是浮动窗口的名称，scr是被调用的方法。

转载于:https://my.oschina.net/u/2357858/blog/493031