「@」功能—用Appcan的API實現—衆學

1、窗口與浮動窗口的機制

  當前項目下，打開的界面實際上分紅兩部分：   窗口（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);
}

進行設定（具體問網頁美工）

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

2、「@」功能的實現

    因爲「@」功能只在羣組消息下使用，在私聊狀況下不會出現，因此在打開羣組消息，也就是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()方法，將窗口關閉，完成「@」功能；

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

3、注意

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是被調用的方法。