標籤：
一 摘要在做APP開發時,避免不了出現兩個頁面之間的傳值,在iOS開發中兩個頁面傳值常見的有:屬性傳值,block,代理,通知等方式.那麼web程式兩個頁面傳值的形式有哪些呢,在這裡我給大家總結一下.
1)PC版的web程式兩個兩個頁面之間的傳值方式主要有:
1.cookie2.查詢字串3.還可以通過服務端的session來交換資料主要有:
1.HTML5 LocalStorage 本機存放區2.隱藏欄位3.伺服器端的session等4..頁面已建立，通過自訂事件傳值5.擴充參數這裡就不對上面的傳值方式進行一一解釋了,大家自己去瞭解.在這給大家著重介紹最後一種通過擴充參數來進行傳值.這裡以mui架構為例.
mui在初始化頁面時，提供了extras配置參數，通過該參數可以設定頁面參數，從而實現頁面間傳值；
mui架構在如下幾種情境下，會執行頁面初始化操作：
mui.init({ subpages: [{ url: your - subpage - url, //子頁面HTML地址，支援本地地址和網路地址 id: your - subpage - id, //子頁面標誌 styles: { top: subpage - top - position, //子頁面頂部位置 bottom: subpage - bottom - position, //子頁面底部位置 width: subpage - width, //子頁面寬度，預設為100% height: subpage - height, //子頁面高度，預設為100% ...... }, extras: {} //額外擴充參數 }] }); mui.init({ preloadPages: [{ url: prelaod - page - url, id: preload - page - id, styles: {}, //視窗參數 extras: {}, //自訂擴充參數 subpages: [{}, {}] //預先載入頁面的子頁面 }] });var page = mui.preload({ url: new - page - url, id: new - page - id, //預設使用當前頁面的url作為id styles: {}, //視窗參數 extras: {} //自訂擴充參數 }); 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: { ..... //自訂擴充參數，可以用來處理頁面間傳值 } show: { autoShow: true, //頁面loaded事件發生後自動顯示，預設為true aniShow: animationType, //頁面顯示動畫，預設為”slide-in-right“； duration: animationTime //頁面動畫期間，Android平台預設100毫秒，iOS平台預設200毫秒； }, waiting: { autoShow: true, //自動顯示等待框，預設為true title: ‘正在載入...‘, //等待對話方塊上顯示的提示內容 options: { width: waiting - dialog - widht, //等待框背景地區寬度，預設根據內容自動計算合適寬度 height: waiting - dialog - height, //等待框背景地區高度，預設根據內容自動計算合適高度 ...... } } }) <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/mui.min.css"/> <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <script type="text/javascript"> mui.openWindow({ url:‘second.html‘, id:‘second‘, extras:{ name:‘second‘, version:‘1.0.0‘ }}); </script></body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/mui.min.css"/> <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> div{ width: 200px; height: 200px; background: red; } </style> </head><body><div id="footer"></div><script type="text/javascript">var div = document.getElementById("footer");mui.init();var self = plus.webview.currentWebview();var name = self.name;var version = self.version;div.innerHTML = name;</script></body></html>注意:一定要在手機上進行類比運行,否則看不出效果的且會報錯出現plus未定義.基於HTML5之APP頁面間的傳值的幾種方式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
