最近在学习appcan,它是一款利用H5技术来进行跨平台开发的技术。刚刚结束了武进区的一个app的开发,用的是H5开发的。现在有点空余时间,学习了仿美团的app开发。记录一些学习随记。
首先在父窗口设置函数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)
这种方法类似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,插入控件,选择选项卡即可,然后自行定制。