APICloud知识教程 | sendEvent、execScript的应用附源码（上）
kkcode 2018-03-24
给大家分享一个小demo，关于sendEvent和execScript的使用，由于内容过多，本期内容将分为上、下两篇为大家奉上。
sendEvent和execScript这两个API个人觉得还比较常用的，经常在论坛里看到开发者对这两个API的使用存在一些疑惑，所以分享一些经验。
先看看首页页面：
index代码（win）：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<metaname="format-detection"content="telephone=no,email=no,date=no,address=no">
<title>index</title>
<linkrel="stylesheet"type="text/css"href="./css/aui.css"/>
</head>
<body>
<headerclass="aui-baraui-bar-nav"id="header">首页</header>
<footerclass="aui-baraui-bar-tab"id="footer">
<divclass="aui-bar-tab-itemaui-active"tapmode>
<iclass="aui-iconfontaui-icon-home"></i>
<divclass="aui-bar-tab-label">首页</div>
</div>
<divclass="aui-bar-tab-item"tapmode>
<iclass="aui-iconfontaui-icon-my"></i>
<divclass="aui-bar-tab-label">我的</div>
</div>
</footer>
</body>
<scripttype="text/javascript"src="./script/api.js"></script>
<scripttype="text/javascript"src="./script/aui-tab.js"></script>
<scripttype="text/javascript">
/**
*api初始化
*/
apiready=function(){
//状态栏沉浸式
$api.fixStatusBar($api.dom('header'));
api.parseTapmode();
fnInitGroup();
};
/**
*初始化frame组
*/
functionfnInitGroup(){
frameIndex=0;
title=["首页","我的"];
frames_main=["homepage","frame3"];
openFrame(frameIndex);
};
/**
*打开frame
*
*@param{Object}index
*/
functionopenFrame(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,
});
};
/**
*点击底部按钮
*/
vartab=newauiTab({
element:document.getElementById("footer"),
index:1,
repeatClick:false
},function(ret){
frameIndex=ret.index-1;
openFrame(frameIndex);
});
</script>
</html>
在win页面里用了aui的tab
然后是homepage（frame）的代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<metaname="format-detection"content="telephone=no,email=no,date=no,address=no">
<title>云API</title>
<linkrel="stylesheet"type="text/css"href="../../css/aui.css"/>
<linkrel="stylesheet"type="text/css"href="../../css/swiper.min.css"/>
<style>
img{width:100%;}
.banner{width:100%;padding:012px;}
[v-cloak]{display:none;}
</style>
</head>
<body>
<divclass="aui-content"v-cloak>
<divclass="swiper-container">
<divclass="swiper-wrapper">
<divclass="swiper-slide"v-for="iteminswiper">
<img:src="item.url"/>
</div>
</div>
<divclass="swiper-pagination"></div>
</div>
<divclass="aui-content-padded">
<pclass="aui-text-default">轮播图(vue.js+aui.css+swiper.js)</p>
<pclass="aui-text-default">为啥在这写个轮播图呢？因为扔个空页面也太尴尬了。。。</p>
<pclass="aui-text-default"style="text-indent:2em;">我在这个页面js里写了一个监听事件和一个供别的页面调用的函数。</p>
<pclass="aui-text-default"style="text-indent:2em;">在“我的”页面里，点击相应的按钮，此页面会发生一些变化呦，我写了计时，所以点完就过来查看。^_^”</p>
</div>
<divclass="aui-content-padded":class="show_addEventListener_code?'':'aui-hide'">
<p>发送监听消息代码：</p>
<p>api.sendEvent({</p>
<pstyle="text-indent:2em;">name:'showCode',</p>
<pstyle="text-indent:2em;">extra:{</p>
<pstyle="text-indent:4em;">key1:'value1',</p>
<pstyle="text-indent:4em;">key2:'value2'</p>
<pstyle="text-indent:2em;">}</p>
<p>});</p>
<p>接受监听消息的代码：</p>
<p>api.addEventListener({</p>
<pstyle="text-indent:2em;">name:'showCode'</p>
<p>},function(ret,err){</p>
<pstyle="text-indent:2em;">vm.show_addEventListener_code=true;</p>
<pstyle="text-indent:2em;">setTimeout(function(){</p>
<pstyle="text-indent:4em;">vm.show_addEventListener_code=false;</p>
<pstyle="text-indent:2em;">},10000);</p>
<p>});</p>
</div>
<divclass="aui-content-padded":class="show_exceScript_code?'':'aui-hide'">
<p>发送跨页面执行函数代码：</p>
<p>api.execScript({</p>
<pstyle="text-indent:2em;"class="aui-hide"id="tag">name:'root',</p>
<pstyle="text-indent:2em;">frameName:'homepage',</p>
<pstyle="text-indent:2em;">script:"fnExecScriptTest()"</p>
<p>});</p>
<p>执行函数代码：</p>
<p>functionfnExecScriptTest(stauts){</p>
<pstyle="text-indent:2em;">vm.show_exceScript_code=true;</p>
<pstyle="text-indent:2em;">if(stauts==1){</p>
<pstyle="text-indent:4em;">$api.removeCls($api.dom("#tag"),'aui-hide');</p>
<pstyle="text-indent:2em;">}else{</p>
<pstyle="text-indent:4em;">$api.addCls($api.dom("#tag"),'aui-hide');</p>
<pstyle="text-indent:2em;">};</p>
<pstyle="text-indent:2em;">setTimeout(function(){</p>
<pstyle="text-indent:4em;">vm.show_exceScript_code=false;</p>
<pstyle="text-indent:2em;">},10000);</p>
<p>};</p>
</div>
</div>
</body>
<scripttype="text/javascript"src="../../script/api.js"></script>
<scripttype="text/javascript"src="../../script/swiper.min.js"></script>
<scripttype="text/javascript"src="../../script/vue.min.js"></script>
<scripttype="text/javascript">
varvm;
/**
*api初始化
*/
apiready=function(){
//vue初始化
vm=newVue({
el:'.aui-content',
data:{
swiper:[],
show_addEventListener_code:false,//监听代码显示开关
show_exceScript_code:false//跨页面代码显示开关
}
});
fnInitData();
fnInitEvent();
};
/**
*初始化页面数据
*/
functionfnInitData(){
//随便找了一组图片
swiper_data=[
{"url":"../../image/l1.png"},
{"url":"../../image/l2.png"},
{"url":"../../image/l3.png"}
];
fnInitView();
};
/**
*初始化页面布局
*/
functionfnInitView(){
vm.swiper=swiper_data;
vm.$nextTick(function(){
if(vm.swiper.length>1){
varmySwiper=newSwiper('.swiper-container',{
autoplay:true,//可选选项，自动滑动
loop:true,
autoHeight:true,//高度随内容变化
pagination:{
el:'.swiper-pagination',
}
});
};
});
};
/**
*监听事件
*/
functionfnInitEvent(){
api.addEventListener({
name:'showCode'
},function(ret,err){
vm.show_addEventListener_code=true;
setTimeout(function(){
vm.show_addEventListener_code=false;
},10000);
});
};
/**
*测试调用函数
*
*@param{Object}stauts判断状态
*/
functionfnExecScriptTest(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的定时。
这个页面是首页的第二个frame页面：
贴一下代码，很简单只是放了几个按钮：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<metaname="format-detection"content="telephone=no,email=no,date=no,address=no">
<title>我的</title>
<linkrel="stylesheet"type="text/css"href="../../css/aui.css"/>
</head>
<body>
<divclass="aui-content">
<divclass="aui-text-center">放几个按钮吧</div>
<divclass="aui-content-padded">
<p><divclass="aui-btnaui-btn-primaryaui-btn-blockaui-btn-smaui-margin-b-10"onclick="fnSendEvent()"tapmode>试试sendEvent</div></p>
<p><divclass="aui-btnaui-btn-successaui-btn-blockaui-btn-smaui-margin-b-10"onclick="fnExecScript()"tapmode>试试execScript</div></p>
<p><divclass="aui-btnaui-btn-primaryaui-btn-blockaui-btn-smaui-margin-b-10"onclick="fnOpenWin()"tapmode>打开另一个win</div></p>
</div>
<divclass="aui-content-paddedaui-hide"id="sendEnvet-code">
<p>快去首页看执行效果，发送监听消息代码如下：</p>
<p>api.sendEvent({</p>
<pstyle="text-indent:2em;">name:'showCode',</p>
<pstyle="text-indent:2em;">extra:{</p>
<pstyle="text-indent:4em;">key1:'value1',</p>
<pstyle="text-indent:4em;">key2:'value2'</p>
<pstyle="text-indent:2em;">}</p>
<p>});</p>
</div>
<divclass="aui-content-paddedaui-hide"id="execScript-code">
<p>快去首页看执行效果，发送跨页面执行函数代码：</p>
<p>api.execScript({</p>
<pstyle="text-indent:2em;">frameName:'homepage',</p>
<pstyle="text-indent:2em;">script:"fnExecScriptTest(0)"</p>
<p>});</p>
</div>
</div>
</body>
<scripttype="text/javascript"src="../../script/api.js"></script>
<scripttype="text/javascript">
/**
*api初始化
*/
apiready=function(){
api.parseTapmode();
};
/**
*发送监听消息
*/
functionfnSendEvent(){
$api.removeCls($api.dom("#sendEnvet-code"),"aui-hide");
api.sendEvent({
name:'showCode',
extra:{
key1:'value1',
key2:'value2'
}
});
};
/**
*跨页面执行函数
*/
functionfnExecScript(){
$api.removeCls($api.dom("#execScript-code"),"aui-hide");
api.execScript({
frameName:'homepage',
script:"fnExecScriptTest(0)"
});
};
/**
*打开新页面
*/
functionfnOpenWin(){
api.openWin({
name:"newWin",
url:"new_win.html"
})
}
</script>
</html>
在这个页面就可以点击按钮来触发homepage页面的监听事件和待执行的函数了。
本文转载自APICloud官方论坛，感谢“杨愿”的分享！
如果你也有干货想跟大家分享，或者有技术相关的疑问，欢迎进入APICloud官方社区进行交流。
