上篇说到,通过按钮来触发homepage页面的监听事件和待执行的函数。最后还有一个打开新win的按钮,点击进入下一个页面。
这个新win是干嘛的?一脸懵逼,点击去一看,还是几个按钮。但是你要清楚,这个win和index的win不是一个
win代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>new_win</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
</head>
<body>
<header class="aui-bar aui-bar-nav">
<a class="aui-pull-left aui-btn">
<span class="aui-iconfont aui-icon-left" οnclick="fnBackOff()" tapmode></span>
</a>
<div class="aui-title">新页面</div>
</header>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
$api.fixStatusBar($api.dom('header'));
api.parseTapmode();
api.openFrame({
name:"newFrame",
url: "./new_frame.html",
rect: {
x:0,
y:$api.dom('header').offsetHeight,
w:"auto",
h:"auto"
},
});
fnInitEvent();
};
/**
* 修改标题
* @param {Object} title 标题内容
*/
function fnExecScriptTest(title){
$api.text($api.dom(".aui-title"),title);
};
/**
* 返回按钮
*/
function fnBackOff(){
api.closeWin()
};
/**
* 物初始化页面监听
*/
function fnInitEvent(){
/**监听物理返回键 */
api.addEventListener({
name: 'keyback'
}, function(ret, err) {
/**如果popwindow是打开状态*/
if ($api.getStorage('isPopOpen') == '1') {
/**执行popwindow中的关闭方法*/
api.execScript({
frameName: 'popWindow',
script: 'fnClosePop();'
});
}else{
api.closeWin();
};
});
};
</script>
</html>
复制代码
是的,这个页面也有一个待调用的函数,内容是修改标题,还有一个物理返回键监听,为什么监听呢?先卖个关子。请看frame代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>我的</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
</head>
<body>
<div class="aui-content">
<div class="aui-text-center">也放几个按钮吧</div>
<div class="aui-content-padded">
<p><div class="aui-btn aui-btn-primary aui-btn-block aui-btn-sm aui-margin-b-10" οnclick="fnSendEvent()" tapmode>试试sendEvent</div></p>
<p><div class="aui-btn aui-btn-success aui-btn-block aui-btn-sm aui-margin-b-10" οnclick="fnExecScript()" tapmode>试试execScript</div></p>
<p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm aui-margin-b-10" οnclick="fnChangeTitle()" tapmode>改一下title</div></p>
<p><div class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm aui-margin-b-10" οnclick="fnOpenPop()" tapmode>打开一个popWindow</div></p>
</div>
<div class="aui-content-padded aui-hide" id="sendEnvet-code">
<p>快去首页看执行效果,发送监听消息代码如下:</p>
<p>api.sendEvent({</p>
<p style="text-indent: 2em;">name: 'showCode',</p>
<p style="text-indent: 2em;">extra: {</p>
<p style="text-indent: 4em;">key1: 'value1',</p>
<p style="text-indent: 4em;">key2: 'value2'</p>
<p style="text-indent: 2em;">}</p>
<p>});</p>
</div>
<div class="aui-content-padded aui-hide" id="execScript-code">
<p>快去首页看执行效果,发送跨页面执行函数代码:</p>
<p>api.execScript({</p>
<p style="text-indent: 2em;">name: 'root',</p>
<p style="text-indent: 2em;">frameName: 'homepage',</p>
<p style="text-indent: 2em;">script: "fnExecScriptTest(1)"</p>
<p>});</p>
</div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript">
/**
* api初始化
*/
apiready = function(){
api.parseTapmode();
};
/**
* 发送监听消息
*/
function fnSendEvent(){
$api.removeCls($api.dom("#sendEnvet-code"),"aui-hide");
api.sendEvent({
name: 'showCode',
extra: {
key1: 'value1',
key2: 'value2'
}
});
};
/**
* 跨页面执行函数
*/
function fnExecScript(){
$api.removeCls($api.dom("#execScript-code"),"aui-hide");
api.execScript({
name:'root',
frameName: 'homepage',
script: "fnExecScriptTest(1)"
});
};
function fnChangeTitle(){
var dialog = new auiDialog();
dialog.alert({
title:"改个啥好呢?",
buttons:['取消','确定'],
input:true
},function(ret){
if(ret.buttonIndex ==2 && ret.text!=""){
api.execScript({
script: "fnExecScriptTest('"+ret.text+"')"
});
};
});
};
/**
* 打开pop窗口
*/
function fnOpenPop(){
$api.setStorage("isPopOpen",'1');
api.openFrame({
name: 'popWindow',
url: './popWindow.html',
rect: {
x: 0,
y: 0,
w: 'auto',
h: 'auto'
},
pageParam: {
frameName:api.frameName
}
});
};
/**
* 选择的回调
* @param {Object} data
*/
function fnChooseCallback(data){
api.toast({
msg: '你点击了第'+data.index+'个按钮,数据为:'+JSON.stringify(data.data)
});
};
</script>
</html>
第三个按钮,修改title,title是在当前win里边的dom元素,所以跨页面执行win里边的修改title方法,并且把要修改的title用参数传过去。
但是这第四个按钮是来搞笑的吗?
是的,正如您看到的,点击第四个按钮,出来一个弹窗,动画效果有点屎。。。但不影响讲解
打开这个弹窗的时候,我设置了一个$api.setStorage("isPopOpen",'1');这个是我后来用作判断是否打开pop页面的。
这就是那个弹窗页面。点击空白处,和点击按钮都会退出这个页面,不同的是点击按钮会带着参数走,这次的参数不是string,是个json字符串。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Pop Window</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<style>
html,body{background: rgba(0,0,0,0);width: 100%;height: 100%;}
.pop-fail{width: 100%;height: 100%;background: rgba(0,0,0,.6);}
.pop-content{position: fixed;width: 100%;left:100%;background: #FFFFFF;}
.pop-content.show{left: 0;transition: left 0.5s;}
.pop-content.hide{left: -100%;transition: left 0.2s;}
</style>
</head>
<body>
<div class="pop-fail" οnclick="fnClosePop()" tapmode></div>
<div class="pop-content" >
<div class="aui-content-padded" v-for="(item,index) in data">
<p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" :data-tag = "index+1" οnclick="fnClick(this)" tapmode>{{item.name}}</div></p>
</div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript">
var vm;
/**
* api初始化
*/
apiready = function(){
/**vue初始化*/
vm = new Vue({
el:'.pop-content',
data:{
data:[]
}
});
fnInitData();
};
/**
* 初始化页面数据
*/
function fnInitData(){
var data = [{name:'按钮1'},{name:'按钮2'},{name:'按钮3'},{name:'按钮4'}];
fnInitView(data);
};
/**
* 初始化页面布局
* @param {Object} data
*/
function fnInitView(data){
vm.data = data;
vm.$nextTick(function(){
var fail = $api.dom(".pop-fail");
var content = $api.dom(".pop-content");
var top = fail.offsetHeight/2 - content.offsetHeight/2;
content.style.top = top+'px';
$api.addCls($api.dom(".pop-content"),'show');
api.parseTapmode();
});
};
/**
* 点击某一个按钮
* @param {Object} dom
*/
function fnClick(dom){
var index = $api.attr(dom,"data-tag");
var data = vm.data[index-1];
var newJson = {index:index,data:data};
$api.addCls($api.dom(".pop-content"),'hide');
setTimeout(function(){
api.execScript({
frameName:api.pageParam.frameName,
script: 'fnChooseCallback('+JSON.stringify(newJson)+')'
});
$api.setStorage("isPopOpen",'0');
api.closeFrame();
},200);
};
/**
* 关闭页面
*/
function fnClosePop(){
$api.addCls($api.dom(".pop-content"),'hide');
$api.setStorage("isPopOpen",'0');
setTimeout(function(){
api.closeFrame();
},200);
};
</script>
</html>
点击按钮会退出,并且执行另一个frame里的api.toast。
你会不会疑问,点击物理返回键会怎样?
通常会closeWin也就是pop和上一个frame统统say goodbye。 但是记不记得我在win里有一段返回键监听?
是的,根据$api.getStorage('isPopOpen');选择直接closeWin()还是执行css动画再退出
本文转载自APICloud官方论坛,感谢“杨愿”的分享!