基于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(){
    var self = plus.webview.currentWebview();
    var name = self.name;//获得参数
});

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

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

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

三、通过本地存储传值

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

接收参数的页面:plus.storage.getItem("targetId");

以上这篇基于HBuilder mui页面间传值的几种方式总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Context.Handler页面间传值方法

    在日常的编程过程中,很多学员对于Context.Handler页面间传值方法不是很清楚,本文将为各位朋友介绍一下Context.Handler页面间传值方法的内容. Context.Handler页面 ...

  • SpringMVC注解版前台向后台传值的两种方式介绍

    一.概述. 在很多企业的开法中常常用到SpringMVC+Spring+Hibernate(mybatis)这样的架构,SpringMVC相当于Struts是页面到Contorller直接的交互的框架 ...

  • Javascript实现页面跳转的几种方式

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...

  • ASP.NET页面间数据传递的方法

    本文我们将讨论的是ASP.NET页面间数据传递的几种方法,对此希望能帮助大家正确的理解ASP.NET页面间数据传递的用处以及便利性. 0.引言 Web页面是无状态的, 服务器对每一次请求都认为来自不同 ...

  • 如何在Word2007页面视图中显示页面间空白

    在Word2007文档中,用户可以根据需要隐藏或显示页面间的空白部分(即上下页边距,包括页眉和页脚的内容),具体设置步骤如下所述: 第1步,打开Word2007文档窗口,依次单击“Office按钮”→ ...

  • 如何隐藏或显示Word页面间的空白

    在Word的页面视图中打开一个包含多页的文档时,通常各页面之间会看到较宽的灰色区域和包含页眉页脚的空白区域. 有时为了方便阅读,使各页面直接看起来更加连贯,可以通过"页面间空白"选 ...

  • Wps文字中隐藏页面间的空白的方法

    编辑文字时,无意中发现wps文字中,页与页之间的空白,可以快速隐藏或打开,运用得当,可以极大提高编辑时的效率.那么如何隐藏/打开页面间的空白呢? 方法: 1.wps文字中,如果没有进行设置,默认情况下 ...

  • Word2007版本无法显示页面间空白怎么办

    今天小编给大家介绍的是Word2007版的页面无法显示,出现空白的解决办法.具体如下:1. 首先,我们找到电脑桌面中的[Word 2007]图标,点击打开.2. 打开之后,我们点击屏幕左上方,也就是箭 ...

  • 怎么隐藏Word文档页面间空白

    Word是现在十分常用的文件类型之一,有些用户想知道怎么隐藏Word文档页面间空白,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中需要编辑的Word文档,根据下图所示, ...