`
薇拉Rachel
  • 浏览: 14180 次
文章分类
社区版块
存档分类
最新评论

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

阅读更多
给大家分享一个小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" 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页面的监听事件和待执行的函数了。

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

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

相关推荐

    APICloud(九):上拉加载数据和长按事件

    本篇我们将深入探讨如何在APICloud中实现上拉加载数据和长按事件,这两个功能在许多应用程序中都非常常见。 首先,我们来看上拉加载数据。在很多情况下,当用户滚动到页面底部时,我们希望动态地加载更多的内容,这...

    易语言 adb shell getevent 和 sendevent 详细讲解使用实现点击效果

    简介: ... ...3、/dev/input/event3 这个是事件路径。调试发现真机和模拟器事件路径不一样。...5、这个sendevent 事件还可以实现滑动、和多指触屏如果有这样需求在研究。 6、sendevent 相对 input tap 响应的速度要快一些。

    Android sendevent/getevent 用法

    在Android系统中,`sendevent`和`getevent`是两个用于交互和调试硬件输入设备的命令行工具。它们主要用于模拟输入事件,如触摸屏、按键等,这对于开发者测试应用程序或者理解设备输入处理流程非常有帮助。下面我们将...

    p1_lte_sendEvent触屏事件记录

    在IT行业中,对移动设备和应用的性能分析是至关重要的,尤其在优化用户体验时,触屏事件的记录和分析扮演着关键角色。标题"p1_lte_sendEvent触屏事件记录"提到了一个用于追踪和记录触屏事件的机制,这通常涉及到...

    自动把getevent转化为sendevent的工具

    自动把getevent转化为sendevent的工具,并且组装成可循环执行的shell,简易按键录制工具

    利用事件发送函数实现预定义键盘响应事件sendEvent()函数.zip

    在Qt框架中,UI交互是应用...在`sendEvent()`函数的压缩包文件中,可能包含了相关的示例代码或者更详细的教程,供开发者参考学习。结合这些资源,开发者可以更好地理解和掌握如何在Qt项目中实现预定义的键盘响应事件。

    ios系统点击源码,实现iphone手机上的系统点击事件

    - 使用` XCUIApplication()` 可以获取到应用的主窗口,进一步可以获取到屏幕上的任何元素,如按钮、文本框等,并对它们进行操作。 - 要模拟点击特定坐标,可以使用 `press(forDuration:thenDragTo:)` 方法,先按住...

    Android monkey 源码

    Android Monkey 是一个自动化测试工具,它是 Android SDK 的一部分,用于对 Android 应用程序进行压力测试。Monkey 通过模拟用户随机的触摸事件、按键输入、轨迹球运动以及系统级事件来实现这一目标,帮助开发者发现...

    Android代码实现模拟点击操作

    ADB是Android开发者常用的一个工具,它允许开发者在电脑上与连接的Android设备进行通信,进行调试、日志输出、安装应用、执行shell命令等操作。 2. **Shell命令** 在Android设备上,可以使用shell命令行来执行...

    spring-statemachine-2.02.release源码

    《Spring StateMachine 2.0.2.RELEASE 源码深度解析》 Spring StateMachine 是 Spring 生态系统中的一个重要组件,它为开发者提供了一种强大的状态管理框架,用于构建复杂的有状态应用。通过深入研究其源码,我们...

    JActor基础知识_request

    JActor 是一个基于Java的协程库,由William la Forge创建,旨在解决高并发场景下的问题。...JActor的教程和文档虽然稀缺,但是通过深入研究源代码和实践,可以掌握这一强大的工具,为Java应用带来新的并发解决方案。

    Qt 键盘源码

    下面我们将详细探讨Qt键盘事件的处理流程、关键类和接口,以及如何通过源码学习提升应用的键盘交互体验。 首先,Qt中的键盘事件主要由QEvent::KeyPress和QEvent::KeyRelease事件类型表示,它们分别对应于按键按下和...

    全志平台H313 H616安卓系统开发笔记.pdf

    在本文档中,我们将从基础知识开始,逐步深入Android系统的开发,包括Android应用基础、Android系统基础、全志平台源码目录结构、Android启动流程、全志平台编译流程、系统调试方法、全志平台定制、Android常用命令...

    android_自动化测试

    在移动应用开发过程中,自动化测试是确保应用质量的关键步骤之一。特别是对于Android平台来说,利用各种工具和技术进行自动化测试可以帮助开发者更高效地发现并修复问题。本文将详细介绍Android自动化测试的一些常见...

    BREW ProGramming Guide知识点小结

    这些知识点涵盖了BREW环境下的应用程序开发、事件处理机制、显示与字体管理等方面的重要内容。 ### 1. 文件结构与资源管理 - **文件扩展名**: 在BREW环境下,程序文件通常采用特殊的扩展名,如`.mif`或`.dll`等,...

    android EventBus源码.zip

    EventBus 是一个流行的 Android 库,它简化了应用程序组件之间的通信。这个库是基于发布/订阅模式设计的,使得组件间的交互更为灵活和轻量级,避免了过度依赖于生命周期方法,如 `onActivityResult` 或者 `接口回调`...

    6.0Permission2

    在Android系统中,权限管理是保护用户数据和应用安全的重要机制。从Android 6.0(API级别23)开始,Google引入了“运行时权限”(Runtime Permissions)的概念,也就是我们常说的“动态权限申请”。这个重大改变使得...

Global site tag (gtag.js) - Google Analytics