上篇說到，經過按鈕來觸發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官方論壇，感謝「楊願」的分享！