• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >HBuilder教程 > MUI APP关于页面之间的传值,plusready和自定义事件

MUI APP关于页面之间的传值,plusready和自定义事件

作者:教程 字体:[增加 减小] 来源:互联网 时间:2017-05-31

本文主要包含mui.plusready,mui.plusready不执行,plusready,plusready事件, plusready function等相关知识,教程希望在学习及工作中可以帮助到您
"); </div>  最近在用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'
                

您可能想查找下面的文章:

  • mui开发之plusready和init
  • mui.plusReady无法加载
  • Android平台提前注入5+ API,支持在plusready事件前调用
  • MUI APP关于页面之间的传值,plusready和自定义事件
  • mui.plusready和mui.ready 随先随后?

相关文章

  • 2017-05-31HBuilder mui 上拉加载
  • 2017-05-31MUI jsonp 解决 webAPP 跨域问题
  • 2017-05-31移动端默认返回按键,使用h5+修改默认事件
  • 2017-05-31mui拍照、相册选择用户头像上传
  • 2017-05-31MUI H5+ app自动更新思路与实现
  • 2017-05-31hbuilder mui 页面的a连接跳转不能使用?
  • 2017-05-31MUI 地图定位问题终于解决了
  • 2017-05-31HBuilder开发App教程-定制图标,启动页以及打包
  • 2017-05-31mui popover 自定义、弹出位置、显示、隐藏
  • 2017-05-31mui实现底部凸起按钮的实现

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Hbuilder mui HTML动态生成模板加载数据(二)
    • HBuilder mui 里如何去掉滚动条
    • Native.js直接拨打电话-Android平台
    • Native.js获取安卓设备device.uuid-Android平台
    • Hbuilder MUI 下拉刷新全屏时高度如何调整?
    • MUI Hbuilder设置模拟器运行APP项目图文教程
    • Hbuilder移动app 开发微信支付-前后端要点
    • mui 在手机上打开pdf文件的方法
    • Hbuilder MUI 微信支付php版(微信支付V3)
    • MUI页面布局(打开新页面,预加载)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有