MUI:页面传参终极版
来源:互联网 发布:淘宝2017双十一交易 编辑:程序博客网 时间:2024/05/22 15:38
页面传参数是一种比较常见的业务需求,根据实现原理及适用环境可以分为两大类。
在普通浏览器端常用的方法有如下几种:
1.利用URL传参
在页面跳转的时候通过设置window.location.href添加参数,在接收参数的页面通过window.location.search获取参数字符串。
发送参数的页面:
接收参数的页面:
2.利用本地存储传参
可以使用本地存储的方式,可以使用cookie、sessionStorage和localStorage。
发送参数的页面:
接收参数的页面:
mui框架根据业务场景不同,提供了两种传值模式:
1.页面初始化时,通过扩展参数传值
HTML5+ webview中在创建新窗口的时候有一个extras参数,用于创建Webview窗口的额外扩展参数。
注意:id是WebviewObject的一个属性,所以extras不能使用id作为参数名。
mui在初始化页面时,提供了extras配置参数,通过该参数可以设置页面参数,从而实现页面间传值。
mui框架在如下几种场景下,会执行页面初始化操作:
- 通过mui.openWindow()打开新页面(若目标页面为已预加载成功的页面,则在openWindow方法中传递的extras参数无效);
- 通过mui.init()方法创建子页面;
- 通过mui.init()方法预加载页面;
- 通过mui.preload()方法预加载页面
以打开新页面为例说明浏览器和基于5+的APP的兼容写法:
想获取某个webview页面的拓展参数,可以通过webview对象获取。例如在new.html页面可以通过下面的方法获取拓展参数:
至于浏览器和APP兼容的写法自己根据上面的方法和这个方法结合一下就OK了。
2.页面已创建,通过自定义事件传值
Webview窗口对象窗口对象WebviewObject有一个evalJS方法,可以将js脚本发送到Webview窗口中运行,可用于实现Webview窗口间的数据通讯。
参数说明:
- target: Type: WebviewObject 需传值的目标webview
- event:Type: String 自定义事件名称
- data:Type: JSON json格式的数据
发送参数的页面:
接收参数的页面:
注:这里要重写back,不然默认为close,当我们返回的时候再次打开show的时候需要重新创建。
显然这样写有点复杂,为此mui将evalJS传值的机制进行了封装,通过自定义事件实现页面传值,可以使用mui.fire()方法可触发目标窗口的自定义事件。
发送参数的页面:
接收参数的页面:
这里需要特别说明一下的是,很多人在使用mui.fire传参数的时候会提前预加载接收参数的页面,结果发现接收不到传的参数,这是一种非常常见的错误,这里需要说明的是当预加载了页面后,页面上的代码都已经执行,如果在loaded事件未完成就执行webview.evalJS或mui.fire,此时页面接收参数失效。此时应该将接受参数的逻辑写在webview loaded或者show监听事件中:
验证一个webview的loaded事件是否完成的方法:
验证一个webview的show事件是否完成的方法:
- MUI:页面传参终极版
- MUI:页面传参终极版
- mui 页面传参
- 页面传参终极版
- 6、mui 页面传参
- hbuilder mui 移动网页 页面传参
- MUI-页面传参数
- mui页面传参 页面跳转事件委托
- HTML5,MUI方式页面传值
- mui页面间的传值
- mui中的页面传值方法
- mui中页面之间传值
- 使用MUI实现父子页面传值
- mui返回传参
- MUI 反向传参
- Hbuilder MUI 页面刷新及页面传值问题
- Hbuilder MUI 页面刷新及页面传值问题
- MUI-页面初始化
- mysql学习基础(一)
- 给Ubuntu16.04服务器安装TP-LINK随身wifi(rtl8192eu)驱动
- 产品技术恩仇记:这个需求真的很简单吗?
- Java中自动装箱与拆箱详解
- 关于使用zuul遇到的坑
- MUI:页面传参终极版
- java.lang.OutOfMemoryError:GC overhead limit exceeded c3p0 mysql connection版本 Druid HttpClient正确关闭
- setTimeOut、setInterval、Timer 的区别和用法
- 程序猿和星座之间不可不谈的事
- 框架和库的区别
- 富文本框Ueditor jquery ecplise
- Android+Burp suite 配置
- Thinking in java 异常总结
- Python使用pdb进行调试