[MUI] mui框架實現頁面間傳值

galois 發布于2019-08-01 16:47 / 2510人閱讀

摘要：參考通過本地儲存特性檢測參考利用傳參在頁面跳轉的時候通過設置添加參數，在接收參數的頁面通過獲取參數字符串。發送參數的頁面接收參數的頁面獲取中的參數獲取中的參數其他參考資料頁面傳參終極版青峰專欄博客頻道本文地址

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,//新頁面寬度，默認為100%
      height:newpage-height,//新頁面高度，默認為100%
      ......
    },
    extras:{
      .....//自定義擴展參數，可以用來處理頁面間傳值
    },
    createNew:false,//是否重復創建同樣id的webview，默認為false:不重復創建，直接顯示
    show:{
      autoShow:true,//頁面loaded事件發生后自動顯示，默認為true
      aniShow:animationType,//頁面顯示動畫，默認為”slide-in-right“；
      duration:animationTime,//頁面動畫持續時間，Android平臺默認100毫秒，iOS平臺默認200毫秒；
      event:"titleUpdate",//頁面顯示時機，默認為titleUpdate事件時顯示
      extras:{}//窗口動畫是否使用圖片加速
    },
    waiting:{
      autoShow:true,//自動顯示等待框，默認為true
      title:"正在加載...",//等待對話框上顯示的提示內容
      options:{
        width:waiting-dialog-widht,//等待框背景區域寬度，默認根據內容自動計算合適寬度
        height:waiting-dialog-height,//等待框背景區域高度，默認根據內容自動計算合適高度
        ......
      }
    }
})

其中:

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

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

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

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

注意：擴展參數僅在打開新窗口時有效，若目標窗口為預加載頁面，則通過mui.openWindow方法打開時傳遞的extras參數無效。

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

2 ： 通過HTML5本地儲存: localStorage、sessionStorage

特性檢測:

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

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

3 ： 利用URL傳參

在頁面跳轉的時候通過設置window.location.href添加參數，在接收參數的頁面通過window.location.search獲取參數字符串。

發送參數的頁面：

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

接收參數的頁面：

// 獲取url中的參數
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參數
var targetId = getUrlParam("targetId");
console.log(targetId);

4 ： 其他參考資料:

MUI：頁面傳參終極版 - 青峰專欄 - 博客頻道 - CSDN.NET http://blog.csdn.net/kepoon/a...

本文地址： https://segmentfault.com/a/11...

云服務器 GPU云服務器 mui.js+頁面數據綁定 mui.js 頁面數據綁定頁面間傳值 mui

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50745.html

[MUI] mui框架實現頁面間傳值

摘要：參考通過本地儲存特性檢測參考利用傳參在頁面跳轉的時候通過設置添加參數，在接收參數的頁面通過獲取參數字符串。發送參數的頁面接收參數的頁面獲取中的參數獲取中的參數其他參考資料頁面傳參終極版青峰專欄博客頻道本文地址 1 ：通過MUI封裝的openWindow 方法: mui.openWindow({ url:new-page-url, id:new-page-id, ...

劉永祥 2019-08-29 12:33 評論0 收藏0
[MUI] mui框架實現頁面間傳值

摘要：參考通過本地儲存特性檢測參考利用傳參在頁面跳轉的時候通過設置添加參數，在接收參數的頁面通過獲取參數字符串。發送參數的頁面接收參數的頁面獲取中的參數獲取中的參數其他參考資料頁面傳參終極版青峰專欄博客頻道本文地址 1 ：通過MUI封裝的openWindow 方法: mui.openWindow({ url:new-page-url, id:new-page-id, ...

The question 2019-08-20 16:24 評論0 收藏0
MUI框架開發HTML5手機APP(二)--頁面跳轉傳值&底部選項卡切換

摘要：三底部選項卡切換頁面底部選項卡的切換，可以說是的標志之一。兩種模式的顯示效果差不多，如下圖可見兩種模式的區別顧名思義，模式是將所有子頁面的內容，分別放置到主頁不同的中，當我們點擊主頁的不同選項卡時，切換不同的顯示。概述 JRedu 　　在上一篇博客中，我們學習了如何使用Hbuilder創建一個APP，同時如何使用MUI搭建屬于自己的第一款APP，沒有學習的同學可以戳鏈接學習： http...

番茄西紅柿 2019-04-23 13:37 評論0 收藏0
記微信網頁開發單頁面返回不刷新的實現

摘要：使用語法與要跳轉到的對應的狀態信息。頁面名字，方便調試。要跳轉到的地址，不能跨域，對于單頁應用來說沒用，傳空即可。需求在微信網頁開發中,點擊返回按鈕不刷新頁面,進行頁面切換,且實現傳值功能. 問題由來在做微信網頁開發時,由于微信的左上角返回按鈕會返回上一個頁面并且刷新,無法做成打開頁面選擇內容后關閉當前頁面,并且給前一個頁面傳值的功能. 實現方法想實現此功能一開始想到的是不進行...

cuieney 2019-08-22 15:39 評論0 收藏0
MUI使用總結

摘要：預加載自定義事件第三方擴展插件涉及的，除了，其它所有手機瀏覽器及瀏覽器均無法使用，目前主要包括語音輸入事件相關注意瀏覽器沒有事件事件相關的，手機端瀏覽器均可使用端模擬手機瀏覽器也可以正常使用。最近項目中需要使用MUI做一個視頻播放的小功能。我就花時間研究了一下MUI。 MUI是一個使用JavaScript開發Android和IOS應用的前端框架。這篇文章將以知識樹的形式對MUI的使用...

elliott_hu 2019-08-23 14:48 評論0 收藏0