上篇说到，经过按钮来触发homepage页面的监听事件和待执行的函数。最后还有一个打开新win的按钮，点击进入下一个页面。javascript
这个新win是干吗的？一脸懵逼，点击去一看，仍是几个按钮。可是你要清楚，这个win和index的win不是一个
win代码：css
<!doctype html>html
<html>vue
<head>java
<meta charset="utf-8">json
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>api
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">dom
<title>new_win</title>ide
<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" onclick="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" onclick="fnSendEvent()" tapmode>试试sendEvent</div></p>
<p><div class="aui-btn aui-btn-success aui-btn-block aui-btn-sm aui-margin-b-10" onclick="fnExecScript()" tapmode>试试execScript</div></p>
<p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm aui-margin-b-10" onclick="fnChangeTitle()" tapmode>改一下title</div></p>
<p><div class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm aui-margin-b-10" onclick="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" onclick="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" onclick="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官方论坛，感谢“杨愿”的分享！