appcan-学习随记（界面通信，传值）

来源：互联网发布：淘宝公示30天是啥用途编辑：程序博客网时间：2024/06/04 19:53

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

0 0