MUI 頁面跳轉（傳值+接收）

官方：做web app，一個無法避開的問題就是轉場動畫；web是基於鏈接構建的，從一個頁面點擊鏈接跳轉到另一個頁面，

如果通過有刷新的打開方式，用戶要面對一個空白的頁面等待；

如果通過無刷新的方式，用Javascript移入DOM節點（常見的SPA解決方案），會碰到很高的性能挑戰：DOM節點繁多，頁面太大，轉場動畫不流暢甚至導致瀏覽器崩潰；

mui的解決思路是：單webview只承載單個頁面的dom，減少dom層級及頁面大小；頁面切換使用原生動畫，將最耗性能的部分交給原生實現.

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:{
      .....//自定義擴展參數，可以用來處理頁面間傳值
    },
    createNew:false,//是否重復創建同樣id的webview，默認為false:不重復創建，直接顯示
    show:{
      autoShow:true,//頁面loaded事件發生后自動顯示，默認為true
      aniShow:animationType,//頁面顯示動畫，默認為”slide-in-right“；
      duration:animationTime,//頁面動畫持續時間，Android平台默認100毫秒，iOS平台默認200毫秒；
      event:'titleUpdate',//頁面顯示時機，默認為titleUpdate事件時顯示
      extras:{}//窗口動畫是否使用圖片加速
    },
    waiting:{
      autoShow:true,//自動顯示等待框，默認為true
      title:'正在加載...',//等待對話框上顯示的提示內容
      options:{
        width:waiting-dialog-widht,//等待框背景區域寬度，默認根據內容自動計算合適寬度
        height:waiting-dialog-height,//等待框背景區域高度，默認根據內容自動計算合適高度
        ......
      }
    }
})

 

小實例：

頁面  index.html  

<script type="text/javascript" charset="utf-8">
        mui.init();
        mui.plusReady(function() {
          
            document.getElementById("test").addEventListener("tap", function() {
                mui.openWindow({
                    url: "search.html",
                    id: "search",
                    waiting: {
                        autoShow: false
                    },
                     extras:{
                      name:'testapp'
                    }
    
                });
            
            });
        });
        
      
        </script>

<a  id="test"> 跳轉 search.html </a>

 

 頁面 search.html

  <script type="text/javascript" charset="utf-8">
          mui.init();
        //B頁面onload從服務器獲取列表數據；
        window.onload = function(){
            //從服務器獲取數據
            
            //業務數據獲取完畢，並已插入當前頁面DOM；
            //注意：若為ajax請求，則需將如下代碼放在處理完ajax響應數據之后；
            mui.plusReady(function(){
                var self = plus.webview.currentWebview();
                var name = self.name;
                console.log(name);
                //關閉等待框
                plus.nativeUI.closeWaiting();
                //顯示當前頁面
                mui.currentWebview.show();
            });
        }
        
    </script>

 

真機測試結果截圖