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
});