APP开发平台 > Blog > sendEvent、execScript的应用附源码(下)

sendEvent、execScript的应用附源码(下)

上篇说到,通过按钮来触发homepage页面的监听事件和待执行的函数。最后还有一个打开新win的按钮,点击进入下一个页面。


这个新win是干嘛的?一脸懵逼,点击去一看,还是几个按钮。但是你要清楚,这个win和index的win不是一个

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>new_win</title>

    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />

</head>

<body>

    <header class="aui-bar aui-bar-nav">

    <a class="aui-pull-left aui-btn">

        <span class="aui-iconfont aui-icon-left" onclick="fnBackOff()" tapmode></span>

    </a>

    <div class="aui-title">新页面</div>

</header>

</body>

<script type="text/javascript" src="../../script/api.js"></script>

<script type="text/javascript">

    apiready = function(){

            $api.fixStatusBar($api.dom('header'));

            api.parseTapmode();

            api.openFrame({

                name:"newFrame",

                url: "./new_frame.html",

                rect: {

                        x:0,

                        y:$api.dom('header').offsetHeight, 

                        w:"auto",

                        h:"auto"

                },

        });

        fnInitEvent();

    };

    /**

     * 修改标题

     * @param {Object} title 标题内容

     */

    function fnExecScriptTest(title){

            $api.text($api.dom(".aui-title"),title);

    };

    /**

     * 返回按钮

     */

    function fnBackOff(){

            api.closeWin()

    };

    /**

     * 物初始化页面监听

     */

    function fnInitEvent(){

            /**监听物理返回键 */

        api.addEventListener({

            name: 'keyback'

        }, function(ret, err) {

                /**如果popwindow是打开状态*/

            if ($api.getStorage('isPopOpen') == '1') {

                    /**执行popwindow中的关闭方法*/

                    api.execScript({

                    frameName: 'popWindow',

                    script: 'fnClosePop();'

                });

            }else{

                    api.closeWin();

            };

        });

    };

</script>

</html>

复制代码

是的,这个页面也有一个待调用的函数,内容是修改标题,还有一个物理返回键监听,为什么监听呢?先卖个关子。请看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-info aui-btn-block aui-btn-sm aui-margin-b-10" onclick="fnChangeTitle()" tapmode>改一下title</div></p>

                        <p><div class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm aui-margin-b-10" onclick="fnOpenPop()" tapmode>打开一个popWindow</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;">name: 'root',</p>

                        <p style="text-indent: 2em;">frameName: 'homepage',</p>

                        <p style="text-indent: 2em;">script: "fnExecScriptTest(1)"</p>

                        <p>});</p>

                </div>

        </div>

</body>

<script type="text/javascript" src="../../script/api.js"></script>

<script type="text/javascript" src="../../script/aui-dialog.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({

                        name:'root',

                    frameName: 'homepage',

                    script: "fnExecScriptTest(1)"

                });

        };

        function fnChangeTitle(){

                var dialog = new auiDialog();

                dialog.alert({

                    title:"改个啥好呢?",

                    buttons:['取消','确定'],

                    input:true

                },function(ret){

                    if(ret.buttonIndex ==2 && ret.text!=""){

                            api.execScript({

                                    script: "fnExecScriptTest('"+ret.text+"')"

                                });

                    };

                });

        };

        /**

         * 打开pop窗口

         */

        function fnOpenPop(){

                $api.setStorage("isPopOpen",'1');

                api.openFrame({

                    name: 'popWindow',

                    url: './popWindow.html',

                    rect: {

                        x: 0,

                        y: 0,

                        w: 'auto',

                        h: 'auto'

                    },

                    pageParam: {

                                frameName:api.frameName

                    }

                });

        };

        /**

         * 选择的回调

         * @param {Object} data

         */

        function fnChooseCallback(data){

                api.toast({

                        msg: '你点击了第'+data.index+'个按钮,数据为:'+JSON.stringify(data.data)

                });

        };

</script>

</html>

第三个按钮,修改title,title是在当前win里边的dom元素,所以跨页面执行win里边的修改title方法,并且把要修改的title用参数传过去。

但是这第四个按钮是来搞笑的吗?

是的,正如您看到的,点击第四个按钮,出来一个弹窗,动画效果有点屎。。。但不影响讲解

打开这个弹窗的时候,我设置了一个$api.setStorage("isPopOpen",'1');这个是我后来用作判断是否打开pop页面的。

就是那个弹窗页面。点击空白处,和点击按钮都会退出这个页面,不同的是点击按钮会带着参数走,这次的参数不是string,是个json字符串。

代码:

<!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>Pop Window</title>

        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />

        <style>

                html,body{background: rgba(0,0,0,0);width: 100%;height: 100%;}

                .pop-fail{width: 100%;height: 100%;background: rgba(0,0,0,.6);}

                .pop-content{position: fixed;width: 100%;left:100%;background: #FFFFFF;}

                .pop-content.show{left: 0;transition: left 0.5s;}

                .pop-content.hide{left: -100%;transition: left 0.2s;}

        </style>

</head>

<body>

        <div class="pop-fail" onclick="fnClosePop()" tapmode></div>

        <div class="pop-content" >

                <div class="aui-content-padded" v-for="(item,index) in data">

                        <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" :data-tag = "index+1" onclick="fnClick(this)" tapmode>{{item.name}}</div></p>                        

                </div>

        </div>

</body>

<script type="text/javascript" src="../../script/api.js"></script>

<script type="text/javascript" src="../../script/vue.js"></script>

<script type="text/javascript">

        var vm;

        /**

         * api初始化

         */

        apiready = function(){

                /**vue初始化*/

                vm = new Vue({

                           el:'.pop-content',

                           data:{

                                   data:[]

                           }

            });

            fnInitData();

        };

        /**

         * 初始化页面数据

         */

        function fnInitData(){

                var data = [{name:'按钮1'},{name:'按钮2'},{name:'按钮3'},{name:'按钮4'}];

                fnInitView(data);

        };

        /**

         * 初始化页面布局

         * @param {Object} data

         */

        function fnInitView(data){

                vm.data = data;

                vm.$nextTick(function(){

                        var fail = $api.dom(".pop-fail");

                        var content = $api.dom(".pop-content");

                        var top = fail.offsetHeight/2 - content.offsetHeight/2;

                        content.style.top = top+'px';

                        $api.addCls($api.dom(".pop-content"),'show');

                        api.parseTapmode();

                });

        };

        /**

         * 点击某一个按钮

         * @param {Object} dom 

         */

        function fnClick(dom){

                var index = $api.attr(dom,"data-tag");

                var data = vm.data[index-1];

                var newJson = {index:index,data:data};

                $api.addCls($api.dom(".pop-content"),'hide');

                setTimeout(function(){

                        api.execScript({

                            frameName:api.pageParam.frameName,

                            script: 'fnChooseCallback('+JSON.stringify(newJson)+')'

                        });

                        $api.setStorage("isPopOpen",'0');

                        api.closeFrame();

                },200);

        };

        /**

         * 关闭页面

         */

        function fnClosePop(){

                $api.addCls($api.dom(".pop-content"),'hide');

                $api.setStorage("isPopOpen",'0');

                setTimeout(function(){

                        api.closeFrame();

                },200);

        };

</script>

</html>

点击按钮会退出,并且执行另一个frame里的api.toast。


你会不会疑问,点击物理返回键会怎样?

通常会closeWin也就是pop和上一个frame统统say goodbye。 但是记不记得我在win里有一段返回键监听?

是的,根据$api.getStorage('isPopOpen');选择直接closeWin()还是执行css动画再退出

更多APP资讯,请关注www.apicloud.com


2018-04-03 来源:APICloud

sendEvent

高效的App定制平台,标准化、便宜、快!

提交APP定制开发需求
x