基于HBuilder mui页面间传值的几种方式总结

所属分类: 软件教程 / 编程开发 阅读数: 852
收藏 0 赞 0 分享

采用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页面间传值的几种方式总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

Unity3D摄像机跟随小球移动而不旋转的设置方法

Unity3D中怎样让摄像机跟随小球移动而不旋转?Unity3D中使用摄像机拍小球,它在移动的过程中,自身是不断旋转的,所以,摄像机也会跟着一起旋转,怎么让摄像机不转呢?请看下文详细介绍
收藏 0 赞 0 分享

Myeclipse断点不起作用出现斜线该怎么办呢?

Myeclipse断点不起作用出现斜线该怎么办呢?Myeclipse断点处如果出现斜线,那就说明断点不起作用了,该怎么处理这种情况呢?下面我们一起来看看详细的解决办法,需要的朋友可以参考下
收藏 0 赞 0 分享

Visual Studio中无法查找或打开PDB文件怎么办?

Visual Studio中无法查找或打开PDB文件怎么办?在VS底部的“输出”框中提示“无法查找或打开 PDB 文件”,出现这个问题该怎么解决呢?下面我们来看看详细的解决办法,需要的朋友可以参考下
收藏 0 赞 0 分享

VS2013调试代码时怎么避免加载符号?

VS2013调试代码时怎么避免加载符号?VS2013调试代码时候,当电脑接入网络后系统会自动从Microsoft 符号服务器加载PDB符号文件,一旦加载符号就会变得很慢,下面我们来看看详细的解决办法
收藏 0 赞 0 分享

eclipse怎么更换工作空间?eclipse更换工作区的方法

eclipse怎么更换工作空间?eclipse经常编辑代码,eclipse默认的的工作区在C盘,经常使用eclipse写代码会导致C盘空间缩小,该怎么更换工作区呢?下面我们来看看eclipse更换工作区的方法
收藏 0 赞 0 分享

vs2010怎么更换默认的起始页?vs2010起始页添加命令按钮的方法

vs2010怎么更换默认的起始页?vs2010起始页就是vs启动的时候默认打开的页面,当然我们可以根据自己的需要来设置起始页,下面我们来看看vs2010起始页添加命令按钮的方法
收藏 0 赞 0 分享

eclipse中sdk与adt版本不兼容该怎么解决? 三种方法帮你搞定

eclipse中sdk与adt版本不兼容该怎么解决?出现这种问题基本上是因为sdk版本过高,今天我们来看看三种比较简单的解决办法,图文教程很简单,需要的朋友可以参考下
收藏 0 赞 0 分享

vb怎么输出菱形图案?vb绘制菱形的教程

vb怎么输出菱形图案?vb编辑的代码可以实现很多功能,今天我们就来看看怎么使用vb绘制菱形图案,这篇教程很简单,适合新手学习,需要的朋友可以参考下
收藏 0 赞 0 分享

Android Studio怎么导出设置?

Android Studio怎么导出设置?Android Studio中设置了很多符合自己习惯的东西,但是如果重新安装软件,之前设置的东西都会消失,该怎么将这些设置导出来呢?下面我们一起来看看详细教程
收藏 0 赞 0 分享

怎么使用arcgis对进行地图投影?

怎么使用arcgis对进行地图投影?没有投影过的地图该怎么投影?我们想将是西安80的shp数据,但是一般的搜不带号,想转换成带号的,就需要使用arcgis对进行地图投影,详细教程请看下文
收藏 0 赞 0 分享
查看更多