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

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

44 关注 分享
小小雨 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 陈沐沐 1106812539@qq.com 349285976@qq.com 574578944@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