DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2014-09-23 14:42
  • 更新:2019-07-12 12:20
  • 阅读:252093

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

41 关注 分享
小小雨 damdmen Mr丶Leo wang_ Ayumi 互帮互助 凌风 choujjss flax 薇妮儿的阳光雨 Esong shfnooy tolerious WaKing imengxin 小小时光 chen214123158 肥陈 星辰和星空 王大大 Eric_ou roller 546578965@qq.com HCloud wangqianjiao@126.com 492064002@qq.com Trust 绝云气 清风脱然至 husheng 274111451@qq.com 963427592@qq.com gaohuazi jtshushu amyzyli@163.com 雪之梦技术驿站 937933034@qq.com 辰欤小迟 Warn 1368722994@qq.com 陈沐沐

要回复文章请先登录注册

lifeng_dev

lifeng_dev

从首页跳转到二维码扫描界面,怎么传值,好像demo打开二维码扫描的界面用的不是openWindow方法,求教
2019-07-12 12:20
1057796814@qq.com

1057796814@qq.com

这种页面传值是不是用到了h5+的东西,请问这个h5+咋使用呢
2019-06-27 14:41
EasyTuan

EasyTuan

https://github.com/EasyTuan/mui-kidApp
基于 MUI 构建一个具有 90 +页面的APP应用
2018-08-21 11:25
阿姨不可以

阿姨不可以

用模拟器(例如mumu模拟器)或者真机运行
2018-07-20 14:25
阿姨不可以

阿姨不可以

回复 727169395@qq.com:
真机调试啊
2018-07-20 14:24
1978203717@qq.com

1978203717@qq.com

我解决了这个问题,代码如下:
index.html页面代码
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
</body>
<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
mui.openWindow({
url: "index2.html",
id: "index2",
extras: {
account: 'is me'
}
})
})
</script>
</html>

index2.html代码如下
<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />

</head>

<body>
<h1 id="h"></h1>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.plusReady(function(){
var abc = plus.webview.currentWebview('index');
alert(abc.account)
})
</script>
</body>

</html>

有一点需要注意:你需要在模拟器里面运行这些代码,否则没有效果!!!!
2018-05-24 16:44
s3530538@126.com

s3530538@126.com

回复 G_Pig:
羡慕
2018-05-16 11:06
505561389@qq.com

505561389@qq.com

哎, 还是用localStorage传吧,, 直接接收也不知道为什么,都是undefined
2017-11-03 17:11
727169395@qq.com

727169395@qq.com

回复 tina_xia:
最后怎么解决的呢?
2017-11-02 15:45
G_Pig

G_Pig

我写的:
a.html代码:
<div class="class">
<div class="class1></div>
</div>
以下js代码:
mui('.class').on('tap','.class1', function(){
mui.openWindow({
url:"b.html",
id:"b.html",
extras:{
transId:transId
}
})
})
----------------------------------------------------------------------
b.html代码:
mui.plusReady(function(){
var self = plus.webview.currentWebview();
transId= self.transId;
console.log(transId)
})
我成功了 但是我也不知道为啥就成功了。
2017-09-26 17:37
qq421065846

qq421065846

从七月中旬开始做混合app,到8月中下旬app上线。已经完成了一个简单的app并且在腾讯和苹果appstore上线了,这期间遇到过无数的坑,主要是熟悉和使用mui框架,h5+,以及调用原生api等,入坑已深,现在正准备开发一款旅游类的混合app,原型图已经出。现在准备开工了。同时,希望有一起做混合app的,有兴趣加qq群654230427一起讨论交流学习,爬坑,共同进步。
2017-09-11 22:27
liruicheng1992@sina.com

liruicheng1992@sina.com

我已经放弃用MUI的方法了,改用在跳转的链接后加参数

父页面在跳转时链接带上参数
url:"selfHelpDetail.html?"+detailID

子页面获取参数
var href = location.href;
var detailID = href.split("?")[1];

感觉这个方法也不是很好,但是起码可以解决问题
2017-07-13 11:21
ddse

ddse

回复 等烟雨:
请问解决了么。我也是遇到这个问题
2017-06-04 14:12
xkm_mxp

xkm_mxp

回复 947701418@qq.com:
你解决了么,是怎么解决的
2017-05-02 15:19
xkm_mxp

xkm_mxp

A页面:
mui.openWindow({
url: 'B.html',
id:'B.html',
extras:{
bicycleId:resIdArr[1]
}
});
跳转B页面:
mui.plusReady(function(){
var self = plus.webview.currentWebview();
bicyleId = self.bicyleId;
});
代码和你的一模一样呀,为什么bicyleId 还是没有值?
2017-05-02 15:17
满哥儿

满哥儿

既然大家都遇到问题,就不能写个完整的代码看看?文档的很多地方都是说一半留一半,对于新手都要靠猜测。
2017-03-23 18:47
amyzyli@163.com

amyzyli@163.com

正好用到,不错!!!!
2017-03-21 22:37
947701418@qq.com

947701418@qq.com

oLogin1.addEventListener('tap',function(){
mui.openWindow({
url:'renewals.html',
id:'renewals',
extras:{
//设备号

deviceId:'detail'
}
});
})
在另一个页面获取值显示为Undefined;为什么呀?
mui.plusReady(function(){
//获取当前窗体对象
var self=plus.webview.currentWebview();
//接受上一页面传过来的值;
var received=self.deviceId;
console.log('接收到值'+received);
});
2017-01-04 17:42
草原狼

草原狼

我在进行传参的时候,如果是 prepare(异步) 的话,在进行fire 传参数时候,因为 那个 新窗口 plusReady 的 addEventListener 没有初始化,没有传参成功。 用preload(同步),因为窗口过多,估计有10+左右,然后就提示webview过多,出现闪退。有办法解决么?
2016-12-19 11:12
大头木木

大头木木

Uncaught TypeError: b.evalJS is not a function at js/mui.min.js:6
报这个错是为什么啊
2016-12-16 10:03
乙亥

乙亥

回复 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
乙亥

乙亥

回复 DCloud_UNI_CHB:
请问,input.value的值如何赋值到extras:{name:‘’}中传递,传递成功后,又如何把值替换页面上的内容?
2016-11-16 15:52
1272768836@qq.com

1272768836@qq.com

回复 等烟雨:
不知你解决了没
2016-11-14 21:57
986511905@qq.com

986511905@qq.com

怎么一点儿都不懂这什么意思啊?该怎么学这个页面传值
2016-11-13 19:11
Smile_微笑

Smile_微笑

回复 moiste:
没有定义啊
2016-10-28 19:48
670278953

670278953

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

hoofa

回复 贰大的:
父页面写事件,子页面fire事件时把参数传过去
2016-09-08 09:57
aunide@foxmail.com

aunide@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
770579166@qq.com

770579166@qq.com

回复 luopan:
请问你这个问题解决了吗?
2016-08-12 09:14
小权

小权

extras 参数长度有限制吗?
2016-08-11 16:23
caipy0904@163.com

caipy0904@163.com

a页面中 打开 b页面, b页面关掉(mui.back()方法我用的是),a页面怎么获取b页面的值
2016-07-16 15:57
tomatozq@163.com

tomatozq@163.com

如果是用openWindow传extras,注意不要进行mui.init进行预加载,否则传参在detail页面会为undefined。
2016-07-13 09:19
历练

历练

父页面不能向子页面传参,真的是郁闷,有没有解决此问题呀?????
2016-06-29 14:49
澹台苍鸿

澹台苍鸿

回复 DCloud_UNI_CHB:
为什么要用plusReady事件
2016-05-21 10:23
cloudError

cloudError

回复 完蛋:
你好!能贴一下你的父页面传值给子页面的代码么?我现在遇到这个问题了,谢谢!
2016-05-04 10:35
northlander@126.com

northlander@126.com

plus.ready根本就不执行,不知道是怎么回事
2016-05-01 11:31
649339351@qq.com

649339351@qq.com

2. plus对象是否存在
可以在js里判断plus对象是否存在,但需要注意一种情况,如果你的js代码里恰好还定义了一个名为plus的js对象,则这种方法将无法准确判断运行环境。

文档说plus可以判断多端环境,web环境下plus不存在?那么怎么传值,还有文档上的代码很多错别字和漏写的地方
2016-04-21 00:51
974986907@qq.com

974986907@qq.com

mui.plusReady根本无响应啊!
2016-04-20 17:01
邹胜林

邹胜林

我按照官方自定义方法传值,昨天还可以,今天就不行了,plus.webView.getWebviewById("service_details.html")获取到的子页面引用也是null,我实在搞不懂了,请教各位
2016-04-16 10:46
小清新怎么了

小清新怎么了

预加载失败一般是什么情况
2016-04-13 17:59
星陨

星陨

回复 星陨:
暂时用的html5的 sessionStorage和localStorage
2016-04-07 16:17
星陨

星陨

回复 Zhao:
我新建的web项目,不是app项目;目前页面传值用的缓存
2016-04-07 16:15
Zhao

Zhao

回复 星陨:
接收参数的时候必须在mui.plusReady里写。
2016-03-31 11:06
星陨

星陨

回复 tina_xia:
webapp官网的传值用不了
2016-03-24 11:36
星陨

星陨

web app 用不了,另外自定义事件也不行,求解决页面传值其他解决方案。
2016-03-23 12:54
杨杨

杨杨

回复 moiste:
我这样取的值也全是undefined,请问你怎么解决的?
2016-03-01 15:17
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 过山车:
web app,可以考虑通过localstorage传值
2016-02-25 04:41
Sirormy

Sirormy

希望官方出一套API的文档
2016-02-24 15:51
过山车

过山车

回复 tina_xia:
同问,求解答
2016-01-27 09:00
tina_xia

tina_xia

mui.openWindow这个方法只能用在移动App项目里面吗?我在移动web页面用这个做页面跳转页可以,但是怎么获取参数啊?用例里面用的是 plus.获取的
2016-01-11 16:51
完蛋

完蛋

父页面传值给子页面没有任何问题,但是子页面自定义参数如何再传递父页面?
2015-12-25 22:09
X灬X

X灬X

回复 X灬X:
写错了 是传到a页面
2015-12-22 10:51
X灬X

X灬X

比如是一个选择信息需求 a页面有个选择员工或者其他按钮要跳转到b页面进选择 那么b页面选择好的员工信息如何传到b页面呢?
2015-12-22 10:50
tuchaofu

tuchaofu

回复 蚂蚁马乙:
mui.plusReady();只执行了一次
2015-12-18 12:49
蚂蚁马乙

蚂蚁马乙

回复 cszchong:
我获取的也是undefined ,最后解决了么?
2015-12-16 15:33
蚂蚁马乙

蚂蚁马乙

回复 moiste:
我获取的也是undefined ,最后解决了么?
2015-12-16 15:33
gengjun

gengjun

其实最稳妥的方法是用本地存储 localStorage.setItem()
2015-12-15 17:45
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 haorooms:
参考:http://dev.dcloud.net.cn/mui/window/#closewindow,页面关闭时,可以重写mui.back,在其中通过自定义事件传值;或者实现beforeback函数
2015-11-25 12:18
haorooms

haorooms

页面关闭可以传递参数吗?
2015-11-25 09:56
luopan

luopan

回复 DCloud_UNI_CHB:
是存在的,因为alert是取的到innerText的数据的,是不是预加载完的页面不能再操作他的dom?
2015-11-12 16:43
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 luopan:
检查js代码位置,看totalCollec对象是否存在;
2015-11-11 14:45
luopan

luopan

子页面:
mui.preload({
url: 'inp_earnings.html',
id: 'inp_earnings'
});
var pages = plus.webview.getWebviewById('inp_earnings');
mui.fire(pages,'getid',{
id:s
});
父页面:
window.addEventListener('getid',function(e){
var totalCollec=document.getElementById('totalCollec');
var id=e.detail.id;
totalCollec.innerText=id;
alert(totalCollec.innerText);
});
值传过来了,但是不能显示到界面上,求助!!!!
2015-11-10 11:24
小影

小影

plusReady事件发生后可以,子页面接收值写在plusReady里;
function plusReady() {

var self = plus.webview.currentWebview();
var urerid= self.userid;
}
2015-09-15 20:28
cszchong

cszchong

回复 moiste:
我获取的值也是undefined,请问你最后是怎么解决的
2015-08-13 17:15
凌风

凌风

对我很有帮助
2015-08-05 11:30
Nicksxs

Nicksxs

回复 等烟雨:
怎么解决的?
2015-07-15 16:09
wang_

wang_

父页面可以向子页面传值,但子页面怎么向父页面传值?self.evalJS("plus.webview.getWebviewById('info.html').name='abc'");后,self.name好像还是'mui'
2015-06-17 15:19
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 wang_:
你的语法错误,mui.openWindow方法中应该穿参数,不能写代码;
2015-06-16 17:16
wang_

wang_

mui.openWindow(
var li =self.element.querySelector('.mui-table-view-cell');
alert(li);
);
为什么一直报第二行错?
2015-06-15 17:46
贰大的

贰大的

回复 hoofa:
同问 最后怎么解决了?
2015-06-10 16:15
一卡通

一卡通

为什么不加到文档里?!
2015-05-20 11:04
hoofa

hoofa

父页面可以向子页面传值,但子页面怎么向父页面传值?self.evalJS("plus.webview.getWebviewById('info.html').name='abc'");后,self.name好像还是'mui'
2015-02-11 02:19
等烟雨

等烟雨

确实是plusready时间没有执行完,解决了,谢谢
2015-02-07 09:06
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 等烟雨:
自定义事件要想有响应,必须等目标webview窗口的plusReady事件发生,可能是你的子webview尚未初始化完成造成的,你可以尝试timeout试试。
2015-02-06 17:03
等烟雨

等烟雨

回复 DCloud_UNI_CHB:
你好想问一下,一个主页面预加载一个子页面,并且通过自定义事件传参,这个实现了,然后这个子页面再预载一个子页面并且通过自定义事件传参,就出问题了,但是不知道什么问题,页面是跳转了,但是什么都没有执行,有什么注意事项吗
2015-02-05 18:41
jh201320

jh201320

回复 DCloud_UNI_CHB:
好的,谢谢 去试试
2014-12-11 12:10
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 jh201320:
两种方案:
1、在父页面中获得自定义参数后,再将该参数作为子页面的自定义参数传过去;
2、预加载新页面,通过自定义事件实现直接向子页面传递参数
2014-12-10 19:12
jh201320

jh201320

通过mui.openWindow()打开的页面,打开的页面有子页面的,子页面怎么获取到传过来的值
2014-12-10 17:16
moiste

moiste

页面传参有哪些注意事项吗?
2014-09-24 14:11
moiste

moiste

大小写改了,但是一样undefined
2014-09-24 14:10
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 moiste:
js大小写是区分的,你传入的是userId,获取的却是userid;
2014-09-24 11:17
moiste

moiste

按照你说的方式,我获取的值都是undefined
主页面
var param = {userId:userId,toKen:toKen,userRole:userRole};
function SendPage(pageId,linkUrl,pageParam)
{
mui.openWindow({
url: linkUrl,
id: pageId,
extras:param
});
}
子页面
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
function plusReady(){
var self = plus.webview.currentWebview();
alert(self.userid);
GetUserGroup(self.toKen,self.userid,'zztable');
}
能帮我看下这里又什么问题吗?这个问题已经困扰我两天了
2014-09-24 10:28
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 moiste:
要使用plus,需要等待plusReady事件发生后才能使用;例如:
mui.plusReady(function(){
plus.webview.currentWebview();
});
2014-09-23 19:11
moiste

moiste

Uncaught ReferenceError: plus is not defined 请问这个怎么解决?我是新手
2014-09-23 15:51