MUI 页面传递参数（父传子）

最新推荐文章于 2021-08-19 17:11:34 发布
最新推荐文章于 2021-08-19 17:11:34 发布
阅读量3.4k 收藏 2
点赞数 1
分类专栏： mui 文章标签： mui 参数传递 mui 页面传参
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wk15038187622/article/details/77678284
版权

MUI的页面参数，这里使用的是官方的配置写法，通过打开新页面进行传递参数

1.需要传递的 HTML+JS

<body> 
       	<div class="qu" style="margin-top: 50px;">
       	     <p>去了下一页面</p>	
 		</div>
        <span class="aa">问天下</span>
    </body>  
    <script type="text/javascript">
    	var txt = $(".aa").text();
    	$(".qu").on('tap',function(){
    		mui.openWindow({
    			url:'two.html',
	    		id:'two',
	    		extras:{  
				        wenben:txt,  
				        bianma:'0.5.8'  
				}  
    		})
    		
    	})

2.接收数据的页面HTML+JS

 <body> 
       	<div class="qu">
       	     <p>接收数据的</p>	
 		</div>
        <span class="aa"></span><br/>
        <span class="bb"></span>
    </body>  
    <script type="text/javascript">
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var txt = self.wenben;
				var visi = self.bianma;
				$('.aa').text(txt);
				$('.bb').text(visi);
			})
    </script>

  


以上数据只能在真机测试的情况下看到数据，浏览器上看不到数据！！


Mr-K
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mui-子页面调用父页面方法
06-11
MUI: 最接近原生APP体验的高性能前端框架... 可从https://www.dcloud.io下载Hbuilder,选择新建“移动APP”,并选择“Hello MUI”工程模板,创建工程;然后通过数据线
mui中页面之间传值
风雨落
07-30 1132
一种是在加载跳转页面时附加参数mui('.mui-table-view').on('tap','.mui-table-view-cell',function(){ var cell_id = this.getAttribute('id'); mui.openWindow({ id:'dynamics_detail.h
MUI之跳转页面传值
qq_42750027的博客
05-20 433
传递参数： mui('.adver-right').on('tap', 'div', function(e) { mui.openWindow({ url: 'notice.html', //跳转路径 id: 'notice.html', extras: { name: 123 //传递参数 }, }); }); 接受参数： 注...
mui框架----传递数据到另一页面（父子页面传值）
weixin_45667289的博客
08-19 793
APP端与WEB端不同，APP端的页面的数据是要每次从服务器端请求下来的，即是通过接口把数据请求下来，然后重新渲染到页面上，每个页面都是要接口的。而WEB端是可以将接口的数据直接传输到子页面，而不需要重新刷新页面。 mui的官方文档上就已经写好了mui传值的方法。（https://dev.dcloud.net.cn/mui/event/） 即：假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻，详情页面再动态向服务器请求数据。 mui要实现
Hbuilder MUI 页面刷新及页面传值问题
02-05
Hbuilder MUI 页面刷新及页面传值问题
使用MUI实现父子页面传值
coreyC的博客
11-16 2541
在MUI中使用父子页面传值的时候与在PC端是大致相同的。 如果你在PC端使用了类似layer弹窗的话，那么这个传值就很容易理解了 我们先使用两个页面   一个父页面father ，一个子页面son 首先在父页面获取需要传递的值，我们直接定义为1 var fire = function(obj){ var sonWV = plus.webview.getWeb
系列教程之mui页面间传值的几种方式
种麦南山下的博客
10-26 1533
一、页面预加载时传值 mui.init({ preloadPages:[{ url:prelaod-page-url, id:preload-page-id, styles:{}, extras:{ name:'zqm' },//在这里添加要传递的参数 ... }, ...] }); 或如下 var page = mui.preload({ url:new-page-url,
mui的页面传值
weixin_42067668的博客
06-27 167
总共有四种方式： 方法一、 使用URL携带参数，稍微麻烦，接收端还要解析 A页面 B页面： var searchURL = window.location.search; console.log(searchURL); searchURL = searchURL.substring(1, searchURL.length); console.log(searchURL); va...
mui页面间传值
大白z的博客
09-25 322
在App开发中，页面间传值是很常见的开发需求，mui框架根据业务场景不同，提供了两种传值模式。 1、页面初始化时，通过扩展参数传值； mui在初始化页面时，提供了extras配置参数，通过该参数可以设置页面参数，从而实现页面间传值； mui框架在如下几种场景下，会执行页面初始化操作： 通过mui.openWindow()打开新页面（若目标页面为已预加载成功的页面，则在openWindow方法中传递...
MUI之父页面刷新
12-12
这个是MUI框架父页面刷新的Demo，MUI是一个比较好用的国产前端H5框架
mui back 返回刷新页面的实例
08-28
下面小编就为大家分享一篇mui back 返回刷新页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
mui单页面应用框架（含demo）
03-13
基于mui框架开发的单页面应用框架（含demo），实现页面跳转路由，单页面开发html应用，避免页面跳转导致的用户体验差的问题
mui框架 页面无法滚动的解决方法(推荐)
08-28
下面小编就为大家分享一篇mui框架 页面无法滚动的解决方法(推荐)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
MUI-页面传值2种形式
weixin_34082789的博客
04-25 143
2019独角兽企业重金招聘Python工程师标准>>> ...
移动端开发框架mui之页面之间参数传递（多种方式）
zgphacker2010的专栏
04-18 1776
方式一：mui---通过mui.openWindow传递参数 openWindow_send_page.html(发送页面) <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,ini
mui页面传值
qq_38026437的博客
01-25 957
做一个简单页面传值的demo 两个页面，分别是1.html 和2.html 在1.html中加入 var mid = 2; function go2html(mid) { let list = {mid: mid} mui.openWindow({ url: '2.html?mid='+mid, id: 'cropper', ...
MUI开发指南（四） MUI 页面间传值
LHL62411570的专栏
11-16 283
MUI开发指南（四） MUI 页面间传值 http://dev.dcloud.net.cn/mui/window/#openwindow extras 新窗口的额外扩展参数，可用来处理页面间传值；例如：var webview = mui.openWindow({ url:'info.html', extras:{ name:'mui'...
MUI中Loading加载动画设置
热门推荐
Mr-k的博客
10-25 2万+
MUI跳转页面之后，加载数据的时候，页面上会出现短暂的空白，这样给用的体验会不太好，所以，可以通过H5+的 nativeUI 模块中的showWaiting显示系统等待对话框 var wt = plus.nativeUI.showWaiting("",{loading:{icon:"/image/12.png",interval:'100000ms',height:'50px'},size:
mui中extras传递的参数在新页面怎么接收
最新发布
05-27
在UI 中，可以通过 `mui.openWindow()` 方法打开一个新页面，并通过 `extras` 参数传递数据。接收数据的方式有两种： 1. 使用 `currentWebview` 对象接收 在新页面中，可以通过 `plus.webview.currentWebview()` 获取当前窗口的 `webview` 对象，该对象包含了在打开该窗口时传递的 `extras` 数据。可以通过访问 `currentWebview` 对象的 `extras` 属性来获取数据。 例如，在打开新页面时传递了一个名为 `name` 的参数： ```javascript mui.openWindow({ url: 'newPage.html', extras: { name: 'John' } }); ``` 在新页面中可以通过以下方式获取该参数： ```javascript var currentWebview = plus.webview.currentWebview(); var name = currentWebview.extras.name; console.log(name); // 输出：John ``` 2. 使用 `options` 参数接收 在新页面中，可以使用 `options` 参数接收传递的数据。在打开新页面时，可以将 `options` 对象传递给 `mui.openWindow()` 方法的第二个参数。在新页面中，可以通过访问 `options` 对象获取数据。 例如，在打开新页面时传递了一个名为 `name` 的参数： ```javascript mui.openWindow('newPage.html', { name: 'John' }); ``` 在新页面中可以通过以下方式获取该参数： ```javascript var options = mui.extend(true, {}, plus.webview.currentWebview().options); var name = options.name; console.log(name); // 输出：John ``` 需要注意的是，如果在新页面中使用了 `mui.init()` 方法初始化了当前页面，`options` 对象会被 MUI 自动转换为 `window.__mui_options` 对象，因此可以通过访问 `window.__mui_options` 对象获取数据。例如： ```javascript mui.init({ keyEventBind: { backbutton: false // 禁用后退按钮 } }); console.log(window.__mui_options.name); // 输出：John ``` 以上就是在 MUI 中通过 `extras` 参数传递数据并在新页面中接收的两种方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值