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>

爲啥在這寫個輪播圖呢？因爲扔個空頁面也太尷尬了。。。

我在這個頁面js裏寫了一個監聽事件和一個供別的頁面調用的函數。

在“我的”頁面裏，點擊相應的按鈕，此頁面會發生一些變化呦，我寫了計時，所以點完就過來查看。^_^”

              </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知識教程 | sendEvent、execScript的應用附源碼（上）原

APP定製市場陷阱頻出，怎樣避開？

如何在APICloud平臺使用騰訊X5引擎

APICloud開發者進階之路 | 超級實用技巧原

乾貨教程 | 關於支付寶模塊apiPayPlus的使用轉

不止於小程序 APICloud推出react native純翻譯模式的UI引擎原

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

APICloud知識教程 | sendEvent、execScript的應用附源碼（上） 原

APICloud知識教程 | sendEvent、execScript的應用附源碼（上）原