在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官网中自定义事件的介绍