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