HBuilder mui页面间传值的几种方式

采用MUI开发APP时,页面跳转传值无疑是很多初学者遇到的难题之一,我在开发时也遇到了同样的问题,所以在这里总结了一下,方便以后查阅。
一、页面预加载时传值

mui.init({
  preloadPages:[{
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},
      extras:{
        name:'zqm' 
       },//在这里添加要传递的参数      ...
    }]
});

或如下

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

通过上述方法预加载页面,然后在加载的那个页面中接受参数。

mui.plusReady(function(){
    var self = plus.webview.currentWebview();
    var name = self.name;//获得参数
});

二、通过mui.openWindow打开窗口向页面传递参数
这种传值方法通常我们的做法如下:
在参数生成页面中

mui.openWindow({
        id: 'list.html',
        url: 'list.html',
        show: {
                aniShow: 'pop-in'
         },
         extras: {    //extras里面的就是参数了
            name: "zqm"         
          },
          waiting: {
                autoShow: true,//自动显示等待框,默认为true         
           }
  });

在参数接收页面中

mui.plusReady(function(){
    var self = plus.webview.currentWebview();
    var name = self.name;//获得参数
});

通常我们传参就这么进行,但是由于这个页面,多次被打开,发生了类似缓存的现象,所以,有时候这个plusReady不能保证每次都能执行。所以,我增加了一个自定义事件,来改变这个情况,实现方法如下(我是双管齐下,plusReady也获取值,自定义事件也获取值)。
那好,下面我演示一下我的方法(下面这个监听一个按钮,然后打开一个页面);

var apage =null;
mui.plusReady(function() {
      mui.preload({
          url: "list.html",
          id: "list.html",//默认使用当前页面的url作为id
          styles: {},//窗口参数 
          extras: { name: "预加载的参数" }//自定义扩展参数          
      });
      document.getElementById("bbtn").addEventListener('tap',function({
          if(apage ==null) {    //要进入list.html,第一次,它肯定为空,所以,此时下面的这个fire方法,是不会执行的。
             apage = plus.webview.getWebviewById("list.html");
          }
           mui.fire(apage, 'hahaha',{ name: "zqm" });
           apage.show();
      });
});

接下来,就到了参数接收页面,如下(首先,我们还是要在plusReady里面接收一次,因为你不能保证这次是初次打开还是第二次打开页面,所以,这个还是需要的。)

mui.plusReady(function(){
    varself = plus.webview.currentWebview();
    varname = self.name;//获得参数
});

但是如果这个是非首次打开的话,就不一定进来plusReady了,所以,参数可能接收失败了,这里面,我们就要接收自定义事件传过来的参数了,就是前面我们的fire那里了。

//添加上一个页面自定义事件监听
window.addEventListener('hahaha',function(event) {
        //获得事件参数varname= event.detail.name;
});

这样,我们就能把这个参数获取到,双重保证,就没有问题了。(如果你们需要谨慎一些,可以把这个自定义事件的监听延迟个300毫秒,保证接收的概率,因为如果是这个自定义事件优先执行了,然后他又去执行这个plusReady,那就会冲突了。)

三、通过本地存储传值

发送参数的页面:plus.storage.setItem("targetId","123");
接收参数的页面:plus.storage.getItem("targetId");

你可能感兴趣的:(HBuilder mui页面间传值的几种方式)