MUI之移动APP页面之间传递参数
移动端传值问题——不同的场景对应着不同的传递方式
一、页面预加载时进行传值
1、mui.init()方法——向预加载页面进行传递参数
通过mui.init()方法向预加载页面进行传值
mui.init({ preloadPages:[{ url:prelaod-page-url, id:preload-page-id, styles:{}, extras:{ name:'csdn' },//在这里添加要传递的参数 ... }, ...] });
对应页面接受参数,即传过来的值
mui.plusReady(function(){ var self = plus.webview.currentWebview(); var name = self.name;//获得参数 });
2、mui.preload()方法——向预加载页面进行传递参数
通过mui.preload()向预加载页面传递参数
var page = mui.preload({ url:new-page-url, id:new-page-id, styles:{}, extras:{ name:'csdn' }//自定义扩展参数 });
对应页面接受参数,即传过来的值
mui.plusReady(function(){ var self = plus.webview.currentWebview(); var name = self.name;//获得参数 });
二、页面创建时进行传值
首先要判断此时的页面是否被预加载过
如果页面已经预加载过,这时候只会显示此页面,并不会创建,
这里传递的参数也不会被接收到,应该在页面预加载的地方传值。
如果页面没有被预加载过,每执行一次openWindow都会重新创建并打开页面,这样传值有效。
1、mui.openWindow()——向页面传递参数
mui.openWindow({ url:'info.html', id:'info.html', extras:{ name:'csdn' } });
对应页面接受传过来的参数
mui.plusReady(function(){ var self = plus.webview.currentWebview(); var name = self.name;//获得参数 });
2、mui.init()——向子页面传递参数
mui.init({ subpages:[{ url:your-subpage-url, id:your-subpage-id, styles:{}, extras:{}//在这里添加自定义参数 }] });
对应页面接收参数的方式
mui.plusReady(function(){ var self = plus.webview.currentWebview(); var name = self.name;//获得参数 });
总结:一和二可以统一被认为是页面初始化状态时(不管是预加载还是页面进行创建的时候,这个时候页面都处于初始化状态)
mui在初始化页面时,提供了extras配置参数,通过该参数可以设置页面参数,从而实现页面间传值。
mui框架在如下几种场景下,会执行页面初始化操作:
- 通过mui.openWindow()打开新页面(若目标页面为已预加载成功的页面,则在openWindow方法中传递的extras参数无效);
- 通过mui.init()方法创建子页面;
- 通过mui.init()方法预加载页面;
- 通过mui.preload()方法预加载页面
三、页面已经打开,传值(在已打开的页面间传值)
Webview窗口对象窗口对象WebviewObject有一个evalJS方法,
可以将JS脚本发送到Webview窗口中运行,可用于实现Webview窗口间的数据通讯。
mui.fire()方法——mui.fire(target, event, data)——自定义时间传值
参数说明:
- target: Type: WebviewObject 需传值的目标webview
- event:Type: String 自定义事件名称
- data:Type: JSON json格式的数据
1、 一和二进行传值的局限性:只能在页面初始化的时候进行传值
2、 当遇到以下一种情况时(列表详情)
(1)详情页一般采用预加载模式
(2)如果希望点击列表中某一项后,显示并更新详情页
这个时候就不能运用一和二里面的传递参数的方式了;这时候就需要自定义事件了。
情景题:假定现在有一个列表页list.html和一个详情页details.html
如果希望list给details传递一个名为”id”的自定义参数。
首先要知道怎样在list中调用details页面,在mui框架中,任意页面都有一个id,这个id默认和url一样,也可以自定义。
//App首页打开列表页 mui.openWindow({ url:'list.html', id:'list' }); //list页面中预加载details页面 mui.init({ preloadPages:[{ url:'details.html', id:'details' }] }); var detailPage; //点击list中某一项时触发details页面的"update"事件 mui('ul.mui-table-view').on('tap','li',function(evt){ if(!detailPage){//获得页面 detailPage = plus.webview.getWebviewById('details'); } mui.fire(detailPage,'update',{//触发事件 id:this.getAttribute('data-guid'); }); detailPage.show('slide-in-right',300);//显示详情页 }); //在details页面接收id参数 window.addEventListener('update',function(event){ //获得事件参数 var id = event.detail.id; //根据id向服务器请求新闻详情 ..... });
如果希望在详情页浏览完之后更新列表页对应块(比如更新阅读次数),
也可以在详情页中触发列表页的事件,然后在列表页监听事件:
//details.html中触发list的update事件 var list=plus.webview.getWebviewById('list'); mui.fire(list,'update',{//触发自定义事件 id:'myid' }); mui.webview.currentWebview().hide("auto", 300);//隐藏当前页面 //list页面中监听事件 window.addEventListener('update',function(evt){ var id=evt.detail.id; //do something });