mui页面间传值

矫情吗；* 2023-10-09 12:14 61阅读 0赞

在App开发中，页面间传值是很常见的开发需求，mui框架根据业务场景不同，提供了两种传值模式。  
**1、页面初始化时，通过扩展参数传值；**  
mui在初始化页面时，提供了extras配置参数，通过该参数可以设置页面参数，从而实现页面间传值；  
mui框架在如下几种场景下，会执行页面初始化操作：  
通过mui.openWindow()打开新页面（若目标页面为已预加载成功的页面，则在openWindow方法中传递的 extras参数无效）；  
通过mui.init()方法创建子页面；  
通过mui.init()方法预加载页面；  
通过mui.preload()方法预加载页面  
示例，假设我们有如下需求：  
在首页中打开关于页面时，传递当前产品名称及版本号，然后在关于页面中读取这两个参数并显示出来；

mui的打开页面的方法：

mui.openWindow({
        url:new-page-url,
        id:new-page-id,
        styles:{
          top:newpage-top-position,//新页面顶部位置
          bottom:newage-bottom-position,//新页面底部位置
          width:newpage-width,//新页面宽度，默认为100%
          height:newpage-height,//新页面高度，默认为100%
          ......
        },
        extras:{
          .....//自定义扩展参数，可以用来处理页面间传值
        },
        createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
        show:{
          autoShow:true,//页面loaded事件发生后自动显示，默认为true
          aniShow:animationType,//页面显示动画，默认为”slide-in-right“；
          duration:animationTime,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
          event:'titleUpdate',//页面显示时机，默认为titleUpdate事件时显示
          extras:{}//窗口动画是否使用图片加速
        },
        waiting:{
          autoShow:true,//自动显示等待框，默认为true
          title:'正在加载...',//等待对话框上显示的提示内容
          options:{
            width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度
            height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度
            ......
          }
        }
    })

传值实现代码：

mui.openWindow({  
        url:'info.html',  
        id:'info.html',  
        extras:{  
            name:'www',  
            version:'1.1'  
        }  
    });

接收页面实现代码：

mui.plusReady(function () {
      	var self = plus.webview.currentWebview();  
    	var name = self.name;  
    	var version = self.version;
    	//此时name=www,version = 1.1
    })

**2、页面已创建，通过自定义事件传值**  
参考mui官网中[自定义事件][Link 1]的介绍

[Link 1]: https://dev.dcloud.net.cn/mui/event/#customevent