APICloud知识教程 | sendEvent、execScript的应用附源码（上）

阅读更多

给大家分享一个小demo，关于sendEvent和execScript的使用，由于内容过多，本期内容将分为上、下两篇为大家奉上。

sendEvent和execScript 这两个API个人觉得还比较常用的，经常在论坛里看到开发者对这两个API的使用存在一些疑惑，所以分享一些经验。

先看看首页页面： 

index代码（win）：







  

  

  

  

  





  

首页

  

          

              

              

首页

          

          

              

              

我的

          

      

在win页面里用了aui的tab

然后是homepage（frame）的代码：






      

      

      

      

      

      

      





      

              

                      

                          

                                  

                          

                      

                      

              

              

                      

轮播图(vue.js+aui.css+swiper.js)

                     

为啥在这写个轮播图呢？因为扔个空页面也太尴尬了。。。

                     

我在这个页面js里写了一个监听事件和一个供别的页面调用的函数。

                     

在“我的”页面里，点击相应的按钮，此页面会发生一些变化呦，我写了计时，所以点完就过来查看。^_^”

             

              

                      

发送监听消息代码：

                      

api.sendEvent({

                      

name: 'showCode',

                      

extra: {

                      

key1: 'value1',

                      

key2: 'value2'

                      

}

                      

});

                      

接受监听消息的代码：

                      

api.addEventListener({

                      

name: 'showCode'

                      

}, function(ret, err) {

                      

vm.show_addEventListener_code = true;

                      

setTimeout(function(){

                      

vm.show_addEventListener_code = false;

                      

},10000);

                      

});

              

              

                      

发送跨页面执行函数代码：

                      

api.execScript({

                      

name: 'root',

                      

frameName: 'homepage',

                      

script: "fnExecScriptTest()"

                      

});

                      

执行函数代码：

                      

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);

                      

};

              

      

为了不让页面太空，我加了一个轮播图，个人比较喜欢使用swiper做轮播。然后在这个页面写了监听事件和待触发的函数。这个页面代码的查看，都是设了10s的定时。


这个页面是首页的第二个frame页面：

贴一下代码，很简单只是放了几个按钮：







  

  

  

  

  





      

              

放几个按钮吧

              

                  

试试sendEvent

                  

试试execScript

                  

打开另一个win

              

              

                      

快去首页看执行效果，发送监听消息代码如下：

                      

api.sendEvent({

                      

name: 'showCode',

                      

extra: {

                      

key1: 'value1',

                      

key2: 'value2'

                      

}

                      

});

              

              

                      

快去首页看执行效果，发送跨页面执行函数代码：

                      

api.execScript({

                      

frameName: 'homepage',

                      

script: "fnExecScriptTest(0)"

                      

});

              

      

在这个页面就可以点击按钮来触发homepage页面的监听事件和待执行的函数了。

本文转载自APICloud官方论坛，感谢“杨愿”的分享！

如果你也有干货想跟大家分享，或者有技术相关的疑问，欢迎进入APICloud官方社区进行交流。