1. 程式人生 > >mui初步應用(二) 頁面跳轉和引數傳遞問題

mui初步應用(二) 頁面跳轉和引數傳遞問題

繼續申明小白(希望有天可以自信的說是大佬 - -)

網上的各種頁面跳轉和引數傳遞相關文章太多,我就說些自己遇到的吧,沒總結到沒關係,以後慢慢改。。

一、頁面跳轉:

那啥 a標籤跳轉就不用說了吧- - 我還真試了 就是引數不好傳。。

然後選擇了點選事件,主要看裡面的    mui.openWindow()

//揀貨click事件
            $("#jianhuo").on("click",function(){
                mui.openWindow({
                                url: 'OrderPick.html',
                                id: 'OrderPick',
                                styles: {
                                    top: 0, //新頁面頂部位置
                                    bottom: 5, //新頁面底部位置
                                },
                                extras: {
                                    //自定義擴充套件引數,可以用來處理頁面間傳值
                                    //count: count
                                },
                                createNew: false, //是否重複建立同樣id的webview,預設為false:不重複建立,直接顯示
                                show: {
                                    autoShow: true, //頁面loaded事件發生後自動顯示,預設為true
                                    duration: 100 //頁面動畫持續時間,Android平臺預設100毫秒,iOS平臺預設200毫秒;
                                },
                                waiting: {
                                    autoShow: true, //自動顯示等待框,預設為true
                                    title: '正在載入...', //等待對話方塊上顯示的提示內容
                                }
                            })
            })

配好url 和 頁面的專屬id 就搞定了。

哦哦 還有預載入頁面

mui.init({  
    preloadPages: [{  
        url: prelaod - page - url,  
        id: preload - page - id,  
        styles: {}, //視窗引數  
        extras: {}, //自定義擴充套件引數  
        subpages: [{}, {}] //預載入頁面的子頁面  
    }]  
});  

// 方式2  
var page = mui.preload({  
    url: new - page - url,  
    id: new - page - id, //預設使用當前頁面的url作為id  
    styles: {}, //視窗引數  
    extras: {} //自定義擴充套件引數  
});  

因為選項卡的跳轉我沒涉及,大家看看官網搜搜別人的部落格就ok了(怕是隻有我自己看喲)

二、引數傳遞問題(我是抄襲的- -)

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

我還用了公司大佬的這個方法 懶得歸納了

    localStorage.setItem('sessionId', data.data.sessionId);

貌似任何頁面都能通過 localStorage.setItem("sessionId")

具體用法隨便百度一下即可瞭解具體方法

相關推薦

mui初步應用 頁面引數傳遞問題

繼續申明小白(希望有天可以自信的說是大佬 - -) 網上的各種頁面跳轉和引數傳遞相關文章太多,我就說些自己遇到的吧,沒總結到沒關係,以後慢慢改。。 一、頁面跳轉: 那啥 a標籤跳轉就不用說了吧- - 我還真試了 就是引數不好傳。。 然後選擇了點選事件,主要看裡面的

微信小程式的頁面引數傳遞頁面生命週期

頁面的生命週期函式如下: Page({   data:{        },   onLoad:function(options){     // 生命週期函式--監聽頁面載入     console.log("---index page onLoad---")   },

java多執行緒與高併發庫應用執行緒建立定時任務Timer

1、建立執行緒的兩種方式, 通過start, 執行run方法。 第一種實現runnable, 定義類實現Runnable介面 重寫Runnable介面中的run方法 通過Thread建立執行緒物件 將Runnable介面的子類物件作為實際引數傳遞

cookie系列header302引發的思考

今天我們來看以下兩個現象,並解釋這兩個現象的原因: 第一個現象:  php檔案執行過程中如果碰到有header("Location:某個頁面URL");這種語句,會直接跳轉到另一個頁面,但是這裡的跳轉並不會影響當前php檔案的繼續執行。 下面我們用程式碼跑一下看看上面的現象是否是成立的: (1

延時倒計時頁面功能

在我們開發網站時通常要用到頁面的跳轉,當然跳轉的時候就會分為瞬時跳轉和延時跳轉,延時跳轉中還有倒計時跳轉。下面就來說說實現方式。 瞬時跳轉2種方法: 第一種通過內建函式:header("location:ycphp.php");exit(); 需要注意後面的exit()必須加上。 第二種通過JavaS

React學習——元件的運用資料傳遞

大家好,我是凱文,本篇文章主要圍繞React框架的元件以及元件之間資料的傳遞展開,並通過例項來實現特定的功能。下面先來簡單介紹一下React的元件,由本人學習實踐所得,用於做筆記,僅供參考。      React框架的一大特色就是它通過元件化的方式來構建和渲染前端頁面,瞭解

頁面引數傳遞,新頁面接收引數的方法

function query(name) {     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  

HTML頁面引數傳遞

HTML頁面跳轉: window.open(url, "", "width=600,height=400"); //第二個引數:_self,在當前視窗開啟視窗;_blank(預設值),在另外的新建視窗開啟新視窗; window.location.href="http:/

angular-單頁面/路由引數傳遞ngRoute

<!DOCTYPE html> <html ng-app="myApp"> <head>     <meta charset="UTF-8">     <title>系統單頁面</title>     <!-- 引入核心框架檔案 -

11. jsp與servlet之間頁面引數傳遞例項

package com.shi.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpSer

ELK部署logstash安裝部署及應用

日誌 elk elkstack Logstash 安裝部署註意事項: Logstash基本概念:logstash收集日誌基本流程: input-->codec-->filter-->codec-->outputinput:從哪裏收集日誌。filter:發出去前進行過濾out

活動目錄的綜合應用

侯良金 windows域 活動目錄額外域控制器的作用與安裝 安裝額外域控制器!1、安裝額外域控制器的優點◆提供容錯功能◆提供負載均衡◆更易於用戶的鏈接和訪問2、註意事項◆操作系統版本必須受當前域功能級別

shell腳本基礎應用

cfa 分數 查看 條件測試操作 print 條件語句 exit 顯示 ack 前言:為了使shell腳本具有一定的“判斷”能力,根據不同的條件來完成不同的管理任務。使腳本具有一定的“智能”。一、條件測試操作文件測試常見操作:-d::測試是否為目錄-e:測試目錄或文件是否存

git 在windows下的應用 - 遠程倉庫代碼管理

軟件研發 研發管理 克隆遠程git 目錄https://github.com/pcdogyu/git4windows.git克隆下來了生成1.txtscan stage signoff commit2次提交記錄推送到遠程地址完成了還沒來得及去網頁呢,就收到系統提示郵件網頁查看1.txt已經提交上去了對

用ASP.NET Core MVC EF Core 構建Web應用

work nal nta 多個 包括 catch web 應用 自動 選項卡 本節學習如何執行基本的 CRUD (創建、 讀取、 更新、 刪除) 操作。 自定義“詳細信息”頁 學生索引頁的基架代碼省略了 Enrollments 屬性,因為該屬性包含一個集合。 在“詳細信息”

IO的應用--序列化與反序列化

package com.bjpowernode.demo02; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import ja

Revit次開發高階應用——怎樣在Revit中使用多執行緒

在Revit中完全可以使用多執行緒,只是需要滿足一定的規則:不改變Revit的Document文件的工作都可以線上程中完成,改變Document文件的工作都需要在主執行緒中完成。 如下:不改變文件,只是在執行緒裡建立輔助的線,執行之後,絲毫不錯。 namespace RevitUseTh

函式計算搭建 Serverless Web 應用- 自定義域名

摘要: 繫結自定義域名可以允許使用者通過自定義域名訪問 FC 的函式,配合 HTTP 觸發器使用,為使用函式計算搭建 Web 應用提供便利。 簡介阿里雲 函式計算(Function Compute) 是事件驅動的全託管計算服務,是阿里雲的 Serverless 計算平臺。基於函式計算構建應用,您無需管理伺服

ioc初步理解 簡單實用autofac搭建mvc三層+automapper=》ioccodeFirst

深入 prop 做了 初始 turn build asa change work    之前在園子閑逛的時候,發現許多關於automapper的文章,以及用aotufac+automapper合在一起用。當然發現大多數文章是將automapper的特點說出或將automap

flask框架使用教程系列——頁面重定向

一、頁面跳轉和重定向用處       在使用者訪問一些需要登入的頁面的時候,如果使用者沒有登入,那麼可以讓他重定向到登入頁面。 二、程式碼實現 # encoding:utf-8 from flask import Fla