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=》ioc(codeFirst)
深入 prop 做了 初始 turn build asa change work 之前在園子閑逛的時候,發現許多關於automapper的文章,以及用aotufac+automapper合在一起用。當然發現大多數文章是將automapper的特點說出或將automap
(五)flask框架使用教程系列——頁面跳轉和重定向
一、頁面跳轉和重定向用處 在使用者訪問一些需要登入的頁面的時候,如果使用者沒有登入,那麼可以讓他重定向到登入頁面。 二、程式碼實現 # encoding:utf-8 from flask import Fla