[MUI] mui框架實(shí)現(xiàn)頁面間傳值

劉永祥發(fā)布于2019-08-29 12:33 / 469人閱讀

摘要：參考通過本地儲(chǔ)存特性檢測(cè)參考利用傳參在頁面跳轉(zhuǎn)的時(shí)候通過設(shè)置添加參數(shù)，在接收參數(shù)的頁面通過獲取參數(shù)字符串。發(fā)送參數(shù)的頁面接收參數(shù)的頁面獲取中的參數(shù)獲取中的參數(shù)其他參考資料頁面?zhèn)鲄⒔K極版青峰專欄博客頻道本文地址

1 ： 通過MUI封裝的openWindow 方法:

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新頁面頂部位置
      bottom:newage-bottom-position,//新頁面底部位置
      width:newpage-width,//新頁面寬度，默認(rèn)為100%
      height:newpage-height,//新頁面高度，默認(rèn)為100%
      ......
    },
    extras:{
      .....//自定義擴(kuò)展參數(shù)，可以用來處理頁面間傳值
    },
    createNew:false,//是否重復(fù)創(chuàng)建同樣id的webview，默認(rèn)為false:不重復(fù)創(chuàng)建，直接顯示
    show:{
      autoShow:true,//頁面loaded事件發(fā)生后自動(dòng)顯示，默認(rèn)為true
      aniShow:animationType,//頁面顯示動(dòng)畫，默認(rèn)為”slide-in-right“；
      duration:animationTime,//頁面動(dòng)畫持續(xù)時(shí)間，Android平臺(tái)默認(rèn)100毫秒，iOS平臺(tái)默認(rèn)200毫秒；
      event:"titleUpdate",//頁面顯示時(shí)機(jī)，默認(rèn)為titleUpdate事件時(shí)顯示
      extras:{}//窗口動(dòng)畫是否使用圖片加速
    },
    waiting:{
      autoShow:true,//自動(dòng)顯示等待框，默認(rèn)為true
      title:"正在加載...",//等待對(duì)話框上顯示的提示內(nèi)容
      options:{
        width:waiting-dialog-widht,//等待框背景區(qū)域?qū)挾?，默認(rèn)根據(jù)內(nèi)容自動(dòng)計(jì)算合適寬度
        height:waiting-dialog-height,//等待框背景區(qū)域高度，默認(rèn)根據(jù)內(nèi)容自動(dòng)計(jì)算合適高度
        ......
      }
    }
})

其中:

extras : 新窗口的額外擴(kuò)展參數(shù)，可用來處理頁面間傳值；例如：

舊頁面設(shè)置:
var webview = mui.openWindow({
    url:"info.html",
    extras:{
        name:"mui"  //擴(kuò)展參數(shù)
    }
});

新頁面:
mui.plusReady(function () {
   var self = plus.webview.currentWebview();
   // 或 var self = plus.webview.getWebviewById("new");
   console.log("extras:" + self.targetId);
})

可能的: 
console.log(webview.name);//輸出mui字符串

注意：擴(kuò)展參數(shù)僅在打開新窗口時(shí)有效，若目標(biāo)窗口為預(yù)加載頁面，則通過mui.openWindow方法打開時(shí)傳遞的extras參數(shù)無效。

參考： http://laopo.cnblogs.com/p/50...

2 ： 通過HTML5本地儲(chǔ)存: localStorage、sessionStorage

特性檢測(cè):

    if(window.sessionStorage){
        // OK
    }else{
        // FAIL
    }

參考: http://www.cnblogs.com/firstF...

3 ： 利用URL傳參

在頁面跳轉(zhuǎn)的時(shí)候通過設(shè)置window.location.href添加參數(shù)，在接收參數(shù)的頁面通過window.location.search獲取參數(shù)字符串。

發(fā)送參數(shù)的頁面：

window.location.href = "new.html?targetId=123"

接收參數(shù)的頁面：

// 獲取url中的參數(shù)
function getUrlParam (name) {
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if (r!= null) {
        return unescape(r[2]);
     }else{
        return null;
     }
}    
//獲取url中的targetId參數(shù)
var targetId = getUrlParam("targetId");
console.log(targetId);