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，插入控件，选择选项卡即可，然后自行定制。