appcan-學習随記（界面通信，傳值）

最近在學習appcan,它是一款利用H5技術來進行跨平台開發的技術。剛剛結束了武進區的一個app的開發，用的是H5開發的。現在有點空餘時間，學習了仿美團的app開發。記錄一些學習随記。

一：Appcan子視窗關閉父視窗 首先在父視窗設定函數close1

js代碼	
function close1(){       
     appcan.window.close(-1);
}
           

然後在子視窗調用父視窗close1函數：

appcan.window.evaluateScript('父視窗名稱','close1()')
 
appcan.window.evaluateScript('','close1()')  //或者不寫第一個參數 預設為目前視窗父視窗
           

官網文檔如下：

appcan.window.evaluateScript(name,scriptContent,type)

在指定的視窗腳本執行

在指定的視窗腳本執行

        name:要執行腳本的視窗名稱
        scriptContent:要執行的腳本
        type:視窗類型

參數還可以以對象的形式傳參：

    {
        name:'',
        scriptContent:'',
        type:''
    }

例子:

     //在demo視窗執行腳本
    appcan.window.evaluateScript({
            name:'demo',
            scriptContent:'alert("hello world")'
        });
        //另一種使用方式
        var win = appcan.require('window');
        win.evaluateScript({
            name:'demo',
            scriptContent:'alert("hello world")'
        });
           

這個方法不僅可以關閉，還可以進行頁面之間的通信。

二：界面之間傳值：

1.利用本地存儲和讀取。

這個子產品是關于存儲的封裝，local是對本地存儲的封裝localStorage

• appcan.locStorage.getVal(key)
• appcan.locStorage.setVal(key，Val)
• appcan.locStorage.remove(key)
• appcan.locStorage.keys()
• appcan.locStorage.val(key,value)

2.利用通道。

這種方法類似OC的發送通知的機制：

官網文檔如下：

appcan.window.subscribe(channelId,callback)<p>   訂閱一個頻道，如果有消息發給該頻道，則會執行響應的回調
   如果是用超連結打開的頁面收不到消息</p><pre style="" class="prettyprint linenums prettyprinted"><ol class="linenums"><li class="L0"><code><span class="pln">channelId</span><span class="pun">:訂閱的的頻道</span><span class="typ">Id</span></code></li><li class="L1"><code><span class="pln">callback</span><span class="pun">(</span><span class="pln">msg</span><span class="pun">):當有消息發來的時候執行的對調，</span><span class="pln">msg</span><span class="pun">是傳來的消息</span></code></li></ol>
           

參數還可以以對象的形式傳參：

 
 {            
      
 channelId:'',            
      
 callback:''            
      
 }            
     
    

例如：

 
 //接收2通道的消息            
      
 appcan.window.subscribe('2',function(msg){});            
      
 //另外一種使用方式            
      
 var win = appcan.require('window');            
      
 win.subscribe('2',function(msg){});            
     
    

appcan.window.publish(channelId,msg)向指定通道發送消息 channelId:發送指定消息的通道 msg:要發送的消息内容參數還可以以對象的形式傳參： { channelId:'', msg:'' }例如： //向2通道發送消息 appcan.window.publish('2','hello') //另外一種使用方式 var win = appcan.require('window'); win.publish('2','hello')

可以利用msg進行頁面之間的傳值。同時這種方法非常好用，可以增強頁面之間的互動性，實作頁面之間的聯系和響應。如  我在一個頁面更新了資料，需要在另一個頁面重新整理UI。利用這種方法很簡單快捷。

三：底部多視窗切換（類似tabbar）

<div id="tabview" class="uf sc-bg ubt sc-border-tab"></div>
// JavaScript Document
var tabview = appcan.tab({
            selector: "#tabview",
            hasIcon: true,
            hasAnim: true,
            hasLabel: true,
            hasBadge: true,
            data: [{
                label: "QQ",
                "icon": "fa-qq"
            },
            {
                label: "微軟",
                "icon": "fa-windows"
            },
            {
                label: "微信",
                "icon": "fa-weixin",
                badge: 1
            }]
        });

        tabview.on("click",
        function(obj, index) {
            appcan.window.selectMulti("content", index);
        });

           appcan.ready(function() {
            var top = $('#header').offset().height;
            appcan.frame.open({
                "id": "content",
                url: [{
                    "inPageName": "QQ",
                    "inUrl": "QQ.html",
                },
                {
                    "inPageName": "微軟",
                    "inUrl": "weiruan.html",
                },
                {
                    "inPageName": "微信",
                    "inUrl": "weixin.html",
                }],
                "top": top,  //頂部邊距為header的高度
                "left": 0,   //左邊距為0
                "index": 0,  //預設選中第一個浮動視窗子頁
                "change":function(err,data){
                    if(err){
                         return;
                      }
               tableview.moveto(data.multiPopSelectedIndex);
                     }
        })
   appcan.button(".nav-btn", "btn-act", function() {
     appcan.window.close(-1);
})
           

看着代碼如果嫌麻煩，可以直接點appcan開發工具：Appcan IDE上面的APPCan，插入控件，選擇頁籤即可，然後自行定制。