給你們分享一個小demo，關於sendEvent和execScript的使用，因爲內容過多，本期內容將分爲上、下兩篇爲你們奉上。
sendEvent和execScript 這兩個API我的以爲還比較經常使用的，常常在論壇裏看到開發者對這兩個API的使用存在一些疑惑，因此分享一些經驗。
先看看首頁頁面：javascript
index代碼（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>index</title>
<link rel="stylesheet" type="text/css" href="./css/aui.css" />
</head>
<body>
<header class="aui-bar aui-bar-nav" id="header">首頁</header>
<footer class="aui-bar aui-bar-tab" id="footer">
<div class="aui-bar-tab-item aui-active" tapmode>
<i class="aui-iconfont aui-icon-home"></i>
<div class="aui-bar-tab-label">首頁</div>
</div>
<div class="aui-bar-tab-item" tapmode>
<i class="aui-iconfont aui-icon-my"></i>
<div class="aui-bar-tab-label">個人</div>
</div>
</footer>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/aui-tab.js"></script>
<script type="text/javascript">
/**
* api初始化
*/
apiready = function(){
//狀態欄沉浸式
$api.fixStatusBar($api.dom('header'));
api.parseTapmode();
fnInitGroup();
};
/**
* 初始化frame組
*/
function fnInitGroup(){
frameIndex=0;
title = ["首頁","個人"];
frames_main = ["homepage","frame3"];
openFrame(frameIndex);
};
/**
* 打開frame
*
* @param {Object} index
*/
function openFrame(index){
$api.text($api.dom("header"),title[index]);
api.openFrame({
name:frames_main[index],
url: "./html/main/"+frames_main[index]+".html",
rect: {
x:0,
y:$api.dom('header').offsetHeight,
w:api.winWidth,
h:api.winHeight - $api.dom('header').offsetHeight - $api.dom('footer').offsetHeight
},
scrollEnabled: false,
});
};
/**
* 點擊底部按鈕
*/
var tab = new auiTab({
element:document.getElementById("footer"),
index:1,
repeatClick:false
},function(ret){
frameIndex = ret.index-1;
openFrame(frameIndex);
});
</script>
</html>
在win頁面裏用了aui的tab
而後是homepage（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>雲API</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
<link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
<style>
img{width: 100%;}
.banner{width: 100%;padding: 0 12px;}
[v-cloak]{display: none;}
</style>
</head>
<body>
<div class="aui-content" v-cloak>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in swiper">
<img :src="item.url"/>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="aui-content-padded">
<p class="aui-text-default">輪播圖(vue.js+aui.css+swiper.js)</p>
<p class="aui-text-default">爲啥在這寫個輪播圖呢？由於扔個空頁面也太尷尬了。。。</p>css
<p class="aui-text-default" style="text-indent: 2em;">我在這個頁面js裏寫了一個監聽事件和一個供別的頁面調用的函數。</p>html
<p class="aui-text-default" style="text-indent: 2em;">在「個人」頁面裏，點擊相應的按鈕，此頁面會發生一些變化呦，我寫了計時，因此點完就過來查看。^_^」</p>vue
</div>
<div class="aui-content-padded" :class="show_addEventListener_code?'':'aui-hide'">
<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>
<p>接受監聽消息的代碼：</p>
<p>api.addEventListener({</p>
<p style="text-indent: 2em;">name: 'showCode'</p>
<p>}, function(ret, err) {</p>
<p style="text-indent: 2em;">vm.show_addEventListener_code = true;</p>
<p style="text-indent: 2em;">setTimeout(function(){</p>
<p style="text-indent: 4em;">vm.show_addEventListener_code = false;</p>
<p style="text-indent: 2em;">},10000);</p>
<p>});</p>
</div>
<div class="aui-content-padded" :class="show_exceScript_code?'':'aui-hide'">
<p>發送跨頁面執行函數代碼：</p>
<p>api.execScript({</p>
<p style="text-indent: 2em;" class="aui-hide" id="tag">name: 'root',</p>
<p style="text-indent: 2em;">frameName: 'homepage',</p>
<p style="text-indent: 2em;">script: "fnExecScriptTest()"</p>
<p>});</p>
<p>執行函數代碼：</p>
<p>function fnExecScriptTest(stauts){</p>
<p style="text-indent: 2em;">vm.show_exceScript_code = true;</p>
<p style="text-indent: 2em;">if(stauts == 1){</p>
<p style="text-indent: 4em;">$api.removeCls($api.dom("#tag"),'aui-hide');</p>
<p style="text-indent: 2em;">}else{</p>
<p style="text-indent: 4em;">$api.addCls($api.dom("#tag"),'aui-hide');</p>
<p style="text-indent: 2em;">};</p>
<p style="text-indent: 2em;">setTimeout(function(){</p>
<p style="text-indent: 4em;">vm.show_exceScript_code = false;</p>
<p style="text-indent: 2em;">},10000);</p>
<p>};</p>
</div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
var vm;
/**
* api初始化
*/
apiready = function(){
//vue初始化
vm = new Vue({
el:'.aui-content',
data:{
swiper:[],
show_addEventListener_code:false,//監聽代碼顯示開關
show_exceScript_code:false //跨頁面代碼顯示開關
}
});
fnInitData();
fnInitEvent();
};
/**
* 初始化頁面數據
*/
function fnInitData(){
//隨便找了一組圖片
swiper_data = [
{"url":"../../image/l1.png"},
{"url":"../../image/l2.png"},
{"url":"../../image/l3.png"}
];
fnInitView();
};
/**
* 初始化頁面佈局
*/
function fnInitView(){
vm.swiper = swiper_data;
vm.$nextTick(function(){
if(vm.swiper.length > 1){
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,//可選選項，自動滑動
loop:true,
autoHeight: true, //高度隨內容變化
pagination: {
el: '.swiper-pagination',
}
});
};
});
};
/**
* 監聽事件
*/
function fnInitEvent(){
api.addEventListener({
name: 'showCode'
}, function(ret, err) {
vm.show_addEventListener_code = true;
setTimeout(function(){
vm.show_addEventListener_code = false;
},10000);
});
};
/**
* 測試調用函數
*
* @param {Object} stauts 判斷狀態
*/
function fnExecScriptTest(stauts){
vm.show_exceScript_code = true;
if(stauts == 1){
$api.removeCls($api.dom("#tag"),'aui-hide');
}else{
$api.addCls($api.dom("#tag"),'aui-hide');
};
setTimeout(function(){
vm.show_exceScript_code = false;
},10000);
};
</script>
</html>
爲了避免讓頁面太空，我加了一個輪播圖，我的比較喜歡使用swiper作輪播。而後在這個頁面寫了監聽事件和待觸發的函數。這個頁面代碼的查看，都是設了10s的定時。java
這個頁面是首頁的第二個frame頁面：
貼一下代碼，很簡單只是放了幾個按鈕：api
<!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-primary aui-btn-block aui-btn-sm aui-margin-b-10" onclick="fnOpenWin()" tapmode>打開另外一個win</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;">frameName: 'homepage',</p>
<p style="text-indent: 2em;">script: "fnExecScriptTest(0)"</p>
<p>});</p>
</div>
</div>
</body>
<script type="text/javascript" src="../../script/api.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({
frameName: 'homepage',
script: "fnExecScriptTest(0)"
});
};
/**
* 打開新頁面
*/
function fnOpenWin(){
api.openWin({
name:"newWin",
url:"new_win.html"
})
}
</script>
</html>
在這個頁面就能夠點擊按鈕來觸發homepage頁面的監聽事件和待執行的函數了。app
本文轉載自APICloud官方論壇，感謝「楊願」的分享！dom
若是你也有乾貨想跟你們分享，或者有技術相關的疑問，歡迎進入APICloud官方社區進行交流。ide