mui框架搭建app不同页面间传值的问题

阅读更多

        最近这个礼拜在捣鼓使用hbuilder+mui来实现移动app,然后有个功能需要用到页面间传值,然后官网是说根据不同的业务场景,有两种方式实现页面间传值,一种是通过在mui.openWindow()方法中使用extras参数来给详情页面传递参数,如下所示:

        传值页面代码如下:

        mui.openWindow({

              id:"xxx.html",

              url:"xxx.html",

              extras:{

                    property1:value1,

                    property2:value2

              },

        });

        目标页面通过如下所示方式获取到传过来的参数:

         var   self=plus.webview.getCurrentWebview();

         var  property1=self.property1;

        另外一种方式就是通过自定义事件来传递参数了,先在mui.init方法中预加载目标页面,然后通过mui.fire方法来触发自定义事件,再在目标页面监听自定义事件;但是在自己的实践过程中,发现在相应的代码中,一直报目标页面找不到的错误Uncaught Error: webview[newsList.html] does not exist at js/mui.min.js:6

       列表代码如下所示:

                      mui.init({

                             preloadPages:[

                                        {

                                             id:"newsList.html",

                                             url:"newsList.html"

                                         }

                               ]

                     });

                    var detailPage=null;

                    mui.plusReady(function(){

                             /*detailPage=mui.preload({

                                     //注,下面的代码能够使得使用自定义事件在两页面传值成功

                                     id:"newsList.html",  

                                     url:"newsList.html"

                            })*/

                     //添加列表点击事件

                     mui("#newsList").on("tap","a",function(event){

                               var id=this.getAttribute("id");

                               //获得详情页面

                               if(!detailPage){

                                        detailPage=plus.webview.getWebviewById("newsList.html");

                                //因为是在mui.init()方法中使用的预加载方式,所以下面代码会显示为null

                                        alert(detailPage);    

                               };

                               //下面的代码是触发详情页面的newsId事件,其中detailPage为目标页面,

                               //newsId为在目标页面自定义的事件名称eventName

                               //第三个参数为封装的需要传递给目标页面的参数对象

                               mui.fire(detailPage,'newsId',{

                                        id:id

                                });

                                //打开详情页面

                               mui.openWindow({

                                        id:"newsList.html",

                                        /*extras:{       //利用extras方法传递简单的参数至另外一个页面

                                             names:"1234"

                                        }*/

                                  })

                             })

                        });

             如上述代码所示,通过在mui.init()方法中预加载的方式的话,就会报找不到详情页面,

            后面通过查找资料,发现得使用另外一种预加载的方式,即:mui.preload()方法,而且该方法得放到mui.plusReady()里面,具体代码如下所示:

                        mui.init();

                        var detailPage=null;

                        mui.plusReady(function(){

                                   detailPage=mui.preload({

                                                id:"newsList.html",

                                                url:"newsList.html"

                                   })

                                  //添加列表点击事件

                                  mui("#newsList").on("tap","a",function(event){

                                            var id=this.getAttribute("id");

                                            //获得详情页面

                                            if(!detailPage){

                                                  detailPage=plus.webview.getWebviewById("newsList.html");

                                                  alert(detailPage);

                                            };

                                           mui.fire(detailPage,'newsId',{

                                                  id:id

                                           });

                                           //打开详情页面

                                           mui.openWindow({

                                                   id:"newsList.html",

          //注意:在使用自定义事件传递参数时,当目标页面已经预加载成功后,此时再如下代码所示使用

          //使用extras传递参数,那么在目标页面无法获取该参数。

                                                   /*extras:{       //利用extras方法传递简单的参数至另外一个页面

                                                          names:"1234"

                                                    }*/

                                           })

                                   })

                           });

       以上就是使用自定义事件传递参数时的代码示例(使用自定义事件传递参数时,如果是在mui.init()方法中预加载目标页面的话,会导致在给列表项添加点击事件时,目标页面(即所谓的详情页面)会不存在的情况),所以建议在mui.plusReady()方法中使用mui.preload()方式预加载详情页面

你可能感兴趣的:(mui框架搭建app不同页面间传值的问题)