最近在用MUI开发这个APP，发现有时候这个plusready不起作用，表现在，这个页面如果重复打开，这个plusready就进不去，然后上一个页面传过来的值，就没法接收了。这个经过MUI官方确认，是有可能发生的，所以，这里面的话，就需要通过自定义事件，来确保这个值能正确传递。

        首先，我先演示一下，通常我们页面之间的传值的方法，如下：
        参数生成页面：
                mui.openWindow({
                    id: 'lightMapMain.html',
                    url: 'lightMapMain.html',
                    show: {
                        aniShow: 'pop-in'
                    },
                    extras: {//extras里面的就是参数了
                        entrance: "mapDetail",
                        ProjectName: "工程名称"
                    },
                    waiting: {
                        autoShow: true, //自动显示等待框，默认为true
                    }
                }); 

        参数接收页面：
            //plusReady事件后，在里面接收参数
            mui.plusReady(function() {
                var wv = plus.webview.currentWebview();
                var vText = wv.ProjectName;//这样就能接收到上个页面传过来的值了
                document.getElementById("lbProjectName").innerHTML = vText;                

});

通常我们传参就这么进行，但是由于这个页面，多次打开，发生了类似缓存的现象，所以，有时候这个plusReady不能保证每次都能执行。所以，我根据而官方的提示，增加了一个自定义事件，来实现这个情况，实现方法如下（我是双管齐下，plusReady也获取值，自定义事件也获取值）
        好，下面演示我的方法（下面这个监听一个按钮，然后打开一个页面）：
            var vBtnCtrl = document.getElementById("btnCtrl");
            vBtnCtrl.addEventListener("tap", function() {
                var vNextPage = null;
                //获得下一个页面
                if (vNextPage == null) {
                    vNextPage = plus.webview.getWebviewById('lightMapMain.html');//这个是下一个页面的ID，第一次，他肯定为空，所以，这里面这个fire方法，是不会执行的。
                    if (vNextPage != null) {
                        //触发下一个页面的自定义事件
                        mui.fire(vNextPage, 'DIY_DATA', {
                            entrance: 'mapDetail',
                            ProjectName: vText
                        });
                    }
                }
                var vCurrentWebView = plus.webview.currentWebview();
                if (vCurrentWebView != null) {
                    vCurrentWebView.hide('none');
                }
                //上面这个代码是隐藏当前窗口，我这个是浮动的子窗口，到了下一个页面之后，我要把它隐藏起来，否则等下我返回，这个子窗口还在，就影响体验了。如果你们是整个页面的窗口，那么这个代码可以注释掉。
                mui.openWindow({
                    id: 'lightMapMain.html',//这个ID与上面的自定义事件传参的ID需要一致，因为第一次打开这个页面，上面是获取不到webview的，但是，你这次打开之后，下次再回到这个页面的时候，由于我们之前打开过这个页面，所以，那个自定义事件就会触发了。
                    url: 'lightMapMain.html',
                    show: {
                        aniShow: 'pop-in'
                    },
                    extras: {//这里面是传参了，想我们前面说到的
                        entrance: "mapDetail",
                        ProjectName: vText
                    },
                    waiting: {
                        autoShow: true, //自动显示等待框，默认为true
                    }
                });

})

接下来，我们就到了参数接收页面，如下（首先，我们还是要在plusReady里面接收一次，因为你不能保证这次是初次打开这个页面还是第二次，所以，这个还是需要的。）：
            //plusReady事件后，自动创建menu窗口；
            mui.plusReady(function() {
                var wv = plus.webview.currentWebview();
                var vText = wv.ProjectName;
                document.getElementById("lbProjectName").innerHTML = vText;

});

但是如果这个是非首次打开的话，就会不一定进来plusReady了，所以，参数可能接收失败了，这里面，我们就要接收自定义事件传过来的参数了，就是前面我们的fire那里了。
代码如下：
            //添加上一个页面自定义事件监听
            window.addEventListener('DIY_DATA', function(event) {
                //获得事件参数
                //`var id = event.detail.id;
                var vText = event.detail.ProjectName;
                document.getElementById("lbProjectName").innerHTML = vText;

});

这样，我们就能把这个参数获取到，双重保证，就冇问题啦，是不是。（如果你们需要谨慎一些，可以把这个自定义事件的监听延迟个300毫秒，保证接收的概率，因为如果是这个自定义事件优先执行了，然后他又去执行这个plusReady，那就会冲突了。所以，你们懂得。） 
好了，本次教程到此结束，转载请保留原作者地址以及姓名（本人无偿分享经验，有偿接单制作APP，有需要可以联系我。）；
 
作者：南宫萧尘  
E-mail：314791147@qq.com
日期：2016-04-03

MUI APP关于页面之间的传值，plusready和自定义事件相关推荐

  1. MUI+Htmlplus开发APP实现页面之间传值

    为了保持每个界面之间的数据通讯和相关联性,页面之间传值是开发hybrid app常见的一个问题.怎么实现页面之间数据交互呢?我试过两种方法: 利用缓存 mui页面的extras参数 利用缓存实现页面之 ...

  2. 页面传值、plusready、自定义事件

    最近在用 MUI 开发这个 APP ,发现有时候这个 plusready 不起作用,表现在,这个页面如果重复打开,这个 plusready 就进不去,然后上一个   页面传过来的值,就没法接收了.这个 ...

  3. c 向html页面传值,html页面之间的传值，获取元素和方法的调用

    这篇文章是自己在项目中遇到,同时参考了网上的资料,作为笔记参考使用 一.页面之间的传值 1.使用cookie传值 封装简单使用: //获取cookie function getCookie(name) ...

  4. Vue页面与页面之间的传值（router.push()编程式导航）

    页面与页面之间跳转传值,其实我们一般用两种,query传参或者用params 其实这两个方式都是页面导航的一种,编程式导航:通过调用JavaScript形式的API实现导航的方式,大家不了解的可以去官 ...

  5. 最简单的jsp页面之间的传值

    最简单的jsp页面之间的传值 要传值的页面使用便签 jsp页面传值 <a href="update.jsp?id=<%=article.getId()%>&titl ...

  6. MUI框架开发HTML5手机APP(二)--页面跳转传值底部选项卡切换

    原文链接:   一.MUI加载子页面 1加载子页面详解 在mobile app开发过程中,经常遇到卡头卡尾的页面,也就是说头部和尾部保持不动,而只有中间区域可以滚动,常见的就是新闻列表与详情页等情况: ...

  7. 项目分享三：页面之间的传值

    一.回调函数的使用 我们首先来看一下,页面间传值的一个经典例子,列表页与明细页之间的传值,如下面二张图所图.在列表页点击评价晒单,进入评价晒单页面,当用户在该页面完成操作后,列表页对应的选项,相应地改 ...

  8. 页面之间url传值,传循环数据里的值成功传值成功接收(动态数据传值)

    参考 js页面之间传参方式集合 实现思想:window.location 涉及知识点:escape(),unescape(),split() 效果图及实现的代码(贴重点): 传值的页面(实战传参.ht ...

  9. Mui --- app与服务器之间的交互原理、mui ajax使用

    1.APP与服务器之间的交互原理app端(客户端)与服务端的交互其实理解起来和容易,客户端想服务器端发送请求,服务器端进行数据运算后返回最终结果.结果可以是多种格式: 1.text 文本格式 2.xm ...

  10. angular路由模拟微信页面切换和页面之间的传值

    angular模拟微信页面的切换,页面之间传值.用路由. <!DOCTYPE html> <html><head><meta charset="UT ...

最新文章

  1. spring boot 系列之四：spring boot 整合JPA
  2. linux下常用软件下载
  3. oracle的那些事
  4. Python分式计算
  5. 腾讯企点总经理张晔：To B企业存在的价值是什么？丨鲸犀峰会
  6. C#不为人知的秘密-缓冲区溢出
  7. .NET Core etcd 配置源
  8. [渝粤题库]陕西师范大学《幼儿园课程》（专科）作业
  9. 面试题06. 从尾到头打印链表
  10. Android Studio 在res中新建文件夹不显示
  11. 浅入深出Vue：事件处理
  12. JavaScript基础笔记（十四）最佳实践
  13. Code[VS]1273 风战
  14. 支付宝免签在线支付要饭教程
  15. 深入浅出vuejspdf下载_vue下载pdf
  16. 弘辽科技：新品直通车怎么选词？怎样测试人群标签？
  17. Android aab打包
  18. 程序员平时如何学习提高技术
  19. 集成支付宝，跳转到支付宝后显示的不是支付页面
  20. 如何测试硬盘软件,如何进行硬盘测试？磁盘健康检测方法介绍

热门文章

  1. 【前端】如何实现一个简单地可折叠展开右侧悬浮工具栏？
  2. 鸡啄米vc++2010系列25（滚动条控件Scroll Bar）
  3. jQuery Form Plugin (二) ：使用AJAX提交Form表单
  4. 希望是一个全新的开始
  5. 星云的Linux专用学习手册
  6. P3935 Calculating
  7. (转)PLSQL Developer 12.0.7连接Oracle12c数据库
  8. 2012服务器在IIS部署的SLL(https)网址谷歌浏览器无法访问的问题解决
  9. caffe里的blocking_queue.hpp与.cpp干了点什么呢？？？
  10. 在powerDesigner中通过SQL生成pdm