MUI+Htmlplus開發APP實現頁面之間傳值
阿新 • • 發佈:2019-01-30
為了保持每個介面之間的資料通訊和相關聯性,頁面之間傳值是開發hybrid app常見的一個問題。怎麼實現頁面之間資料互動呢?我試過兩種方法:
- 利用快取
- mui頁面的
extras
引數
利用快取實現頁面之間傳值
利用快取實現頁面之間傳值比較常見的方法,不管是Dcloud還是平常的web開發中,都可以將資料儲存在快取中。
下面這個例子是在b.html
中輸出a.html
的資料
//a.html
var username="張三";
var age=21;
localStorage.setItem("username",username);
localStorage.setItem("age" ,age);
//b.html
console.log("姓名:"+localStorage.getItem("username"));
console.log("年齡:"+localStorage.getItem("age"));
//b.html控制檯:
姓名:張三
年齡:21
利用mui+HTMLplus實現頁面之間傳值
Dcloud為我們提供另一種實現頁面之間傳值的方法,特別是當我們用Dcloud開發涉及到webview時,利用mui和htmlplus實現頁面之間傳值就更高效了。
在Dcloud中建立和跳轉到一個頁面
//建立一個頁面
mui.init({
subpages:[ {
url:your-subpage-url,//子頁面HTML地址,支援本地地址和網路地址
id:your-subpage-id,//子頁面標誌
styles:{},
extras:{}//額外擴充套件引數
}]
});
//跳轉到一個頁面
mui.openWindow({
url:new-page-url,
id:new-page-id,
styles:{},
extras:{//自定義擴充套件引數,可以用來處理頁面間傳值},
createNew:false,//是否重複建立同樣id的webview,預設為false:不重複建立,直接顯示
show:{},
waiting:{}
}
})
不管是跳轉還是新建一個新頁面都有一個引數extras
。這個引數儲存的就是你要傳給新頁面的資料,然後我們可以在新頁面中通過獲得WebviewObject直接獲取傳輸的資料。
//a.html
mui.openWindow({
url:'b.html',
id:'b',
extras:{
abc:"hello world"//傳遞的資料
}
});
//b.html
var wv=plus.webview.currentWebview();//獲取當前視窗的WebviewObject物件
console.log(wv.abc);
//b.html控制檯:
hello world