登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

查看: 858|回复: 6

知识教程 | sendEvent、execScript的应用附源码(上)

[复制链接]

51

主题

62

帖子

278

安币

攻城狮

Rank: 3Rank: 3

发表于 2018-3-24 13:33:33 | 显示全部楼层 |阅读模式
给大家分享一个小demo,关于sendEvent和execScript的使用,由于内容过多,本期内容将分为上、下两篇为大家奉上。

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

先看看首页页面:  

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>
                      <p class="aui-text-default" style="text-indent: 2em;">我在这个页面js里写了一个监听事件和一个供别的页面调用的函数。</p>
                      <p class="aui-text-default" style="text-indent: 2em;">在“我的”页面里,点击相应的按钮,此页面会发生一些变化呦,我写了计时,所以点完就过来查看。^_^”</p>
              </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的定时。
这个页面是首页的第二个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" tapmode>试试sendEvent</div></p>                   <p><div class="aui-btn aui-btn-success aui-btn-block aui-btn-sm aui-margin-b-10" tapmode>试试execScript</div></p>                   <p><div class="aui-btn aui-btn-primary aui-btn-block aui-btn-sm aui-margin-b-10" 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页面的监听事件和待执行的函数了。


434

主题

1048

帖子

489

安币

手工艺人

发表于 2018-3-24 13:34:07 | 显示全部楼层
支持,感谢,祝巴士越来越好~

28

主题

1万

帖子

1384

安币

Android大神

小白

Rank: 6Rank: 6

发表于 2018-3-24 13:35:48 | 显示全部楼层
不错不错,楼主辛苦了。。。

0

主题

9147

帖子

2081

安币

Android大神

Rank: 6Rank: 6

发表于 2018-3-24 13:42:39 | 显示全部楼层
楼主威武,以后多发干货,多办活动~!

314

主题

952

帖子

705

安币

手工艺人

发表于 2018-3-24 13:56:59 | 显示全部楼层
感谢大神~

449

主题

1078

帖子

1978

安币

手工艺人

发表于 2018-3-24 14:01:59 | 显示全部楼层
楼主是好人,回个帖会有安币吗?

497

主题

1129

帖子

1054

安币

手工艺人

发表于 2018-3-24 14:04:29 | 显示全部楼层
感谢大神~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站长推荐

通过邮件订阅最新安卓weekly信息
上一条 /4 下一条

下载安卓巴士客户端

全国最大的安卓开发者社区
联系我们
关闭
合作电话:
15618560077
Email:
805941275@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表