HBuilder mui頁面間傳值的幾種方式

来源:http://www.cnblogs.com/zhaoqiming/archive/2017/12/06/7993067.html
-Advertisement-
Play Games

採用MUI開發APP時,頁面跳轉傳值無疑是很多初學者遇到的難題之一,我在開發時也遇到了同樣的問題,所以在這裡總結了一下,方便以後查閱。 一、頁面預載入時傳值 通過上述方法預載入頁面,然後在載入的那個頁面中接受參數。 二、通過mui.openWindow打開視窗向頁面傳遞參數 這種傳值方法通常我們的做 ...


  採用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");

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>個人所得稅</title> </head> <body> <input type="text" placeholder="請輸入您的工資" id="gz" /> <input typ ...
  • 1、requirejs遵循AMD規範,將需要的都載入好(前置載入)。註:cmd是就近載入。 (1)AMD採用非同步載入,模塊的載入不影響它後面語句的執行。 (2)所有依賴這個模塊的語句,都定義在一個回調函數中,等前面需要載入的模塊載入完成後這個回調函數才運行,解決了依賴性的問題。 2、requirej ...
  • HTML的文件結構:<html> <head>網頁頭部信息</head> <body>網頁主體正文部分</body> </html> HTML的基本標記:定義網頁背景色——bgcolor <body bgcolor=”背景顏色 ”> 設置背景圖片——backgroung <body backgrou ...
  • <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> /*js實現:迴圈輸出1000以內水仙花數*/ var a,b,c ; ...
  • " " 在學習的過程中會發現很多知識點如果不在工作中運用或者手寫帶驗證的話,很容易忘記。任何技能的掌握都是需要不斷練習的。在此收集一些自己遇到的JavaScript練習的網站。 "codewars" 國外的一個練習網站,有JavaScript,也有Python,每種語言都有自己的道場(kata),每 ...
  • react-bootstrap是一個非常受歡迎的針對react封裝過的bootstrap,它本身不包含css,所以也是需要使用bootstrap原生庫。 在create-react-app建的項目目錄中安裝react-bootstrap。 安裝bootstrap。 在index.js文件中增加css ...
  • 之前做過一個項目,其中一項功能是查看社交信息流帖子。很多帖子中都包含視頻,手機上播放視頻後,會有層級混亂的問題。 當時的解決方案是動態的將視頻放入Iframe中。以後如果有其他的解決方式會追加進來。 視頻使用的是16:9的比例。 示例: HTML: CSS: JS: ...
  • ECMA script(發音為“ek-ma-script”)和 javaScript 的關係以及和瀏覽器的關係 雖然JavaScript和ECMAscript通常被人們用來表達相同的含義,但javacript的含義卻比ECMA-script多很多。一個完整的JavaScript實現應該由下列三個不用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...