mui框架如何实现页面间传值

分类：MUI

在App开发中，页面间传值是很常见的开发需求，mui框架根据业务场景不同，提供了两种传值模式。
1、页面初始化时，通过扩展参数传值；
mui在初始化页面时，提供了extras配置参数，通过该参数可以设置页面参数，从而实现页面间传值；
mui框架在如下几种场景下，会执行页面初始化操作：

通过mui.openWindow()打开新页面（若目标页面为已预加载成功的页面，则在openWindow方法中传递的extras参数无效）；
通过mui.init()方法创建子页面；
通过mui.init()方法预加载页面；
通过mui.preload()方法预加载页面

示例，假设我们有如下需求：
在首页中打开关于页面时，传递当前产品名称及版本号，然后在关于页面中读取这两个参数并显示出来；

首页实现代码：

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

关于页面实现代码：

var self = plus.webview.currentWebview();  
var name = self.name;  
var version = self.version;

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

乙亥

回复 DCloud_UNI_CHB ：

mui('body').on('tap','#save',function() {
var input = document.getElementById('sjnum');
var hao = input.value;
var sjhao = document.getElementById('shouji');
// alert(hao);

mui.openWindow({
url: 'wo.html',
id: 'wo',
extras: hao
});
sjhao.innerHTML = hao;
});
mui.plusReady(function() {
var self = plus.webview.currentWebview();
});
var sjhao = document.getElementById('shouji');
alert(self.hao);
// sjhao.innerHTML = self.hao;
求问underfined怎么解决

2016-11-17 10:39

请问，input.value的值如何赋值到extras：{name：‘’}中传递，传递成功后，又如何把值替换页面上的内容？

2016-11-16 15:52

1***@qq.com

回复等烟雨：

不知你解决了没

2016-11-14 21:57

9***@qq.com

怎么一点儿都不懂这什么意思啊？该怎么学这个页面传值

2016-11-13 19:11

Smile_微笑

回复 moiste ：

没有定义啊

2016-10-28 19:48

670278953

子页面传参数到父页面，参数可以传过去，父页面后台也成功接收参数，ul、li控件里值也成功放进去了，打印innerHtml也有正确的数值，但是父页面的显示就是没有改变，还是之前的老数据，但是打印出innerHtml又是新数据，说明后台数据更新了，但是前台没有显示出来，是不是bug呀？？

2016-10-18 22:21

hoofa

回复贰大的：

父页面写事件，子页面fire事件时把参数传过去

2016-09-08 09:57

a***@foxmail.com

子页面传值给父页面，并且调用父页面的function解决了。
父页面（my.html）代码：
window.addEventListener("pageflowrefresh", function (e) {
console.log(e.detail.id)
location.reload();
});
子页面（login.html）代码：
var main = plus.webview.currentWebview().opener();//获取父页面A对象
var main = plus.webview.getWebviewById('my.html');//或者通过A页面id获取A页面对象
mui.fire(main, "pageflowrefresh",{id:'34234'} );//触发A页面的pageflowrefresh方法
希望能对各位有所帮助

2016-08-25 15:48