1. 程式人生 > >MUI+Htmlplus開發APP實現頁面之間傳值

MUI+Htmlplus開發APP實現頁面之間傳值

為了保持每個介面之間的資料通訊和相關聯性,頁面之間傳值是開發hybrid app常見的一個問題。怎麼實現頁面之間資料互動呢?我試過兩種方法:

  1. 利用快取
  2. 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