HBuilder mui页面传值的几种方式

HBuilder开发思想和传统APP开发不太一样，页面间传值的方式也略有不同，不同的方式适用于不同的场景，简单总结下。

页面预加载有两种方式，mui.init()和mui.preload().前者支持同时预加载多个页面，后者只能每次预加载一个页面。

1.1 通过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;//获得参数
});

1.3 通过mui.preload()向预加载页面传递参数

var page = mui.preload({
    url:new-page-url,
    id:new-page-id,
    styles:{},
    extras:{
      name:"csdn"
    }//自定义扩展参数
});

接受参数同上

1.3 通过mui.openWindow()向页面传递参数

如果页面已经预加载过，这时候只会显示此页面，并不会创建，这里传递的参数也不会被接收到，应该在页面预加载的地方传值。如果页面没有被预加载过，每执行一次openWindow都会重新创建并打开页面，这样传值有效。

mui.openWindow({
    url:"info.html",
    id:"info.html",
    extras:{
        name:"csdn"
    }
});

1.4 通过mui.init()向子页面传递参数

mui.init({
    subpages:[{
      url:your-subpage-url,
      id:your-subpage-id,
      styles:{},
      extras:{}//在这里添加自定义参数
    }]
  });

子页面获取参数方法同上

上面介绍的方法都是在页面初始话的时候传值，有一定的局限性。在列表-详情页中，详情页一般采用预加载模式，如果希望点击列表中某一项后，显示并更新详情页，通过以上提到的方法是行不通的。这时候就需要自定义事件了。
假定现在有一个列表页list.html和一个详情页details.html。如果希望list给details传递一个名为”id”的自定义参数。
首先要知道怎样在list中调用details页面，在mui框架中，任意页面都有一个id，这个id默认和url一样，也可以自定义。
假设list和details定义如下：

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