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官方社区进行交流。

相关推荐