頁面跳轉 · wex5

頁面跳轉頁面跳轉可以是打開新的一頁，也可以是當前頁重定向，還可以是跳轉到當前頁的某個狀態，下面會從打開w文件，打開其它后綴文件，使用路由等幾個方面分別介紹一下在X5中的頁面跳轉。目錄 1、打開w文件 1.1、使用彈出窗口打開 1.2、使用門戶提供的方法 1.3、模擬門戶的做法 2、打開html等其它類型的文件 2.1、使用打開w文件的方法 2.2、使用a鏈接跳轉 2.3、頁面重定向 2.4、使用window.open 3、使用路由 3.1、使用系統定義好的路由 3.2、自定義路由 3.3、使用靜態路由 1、打開w文件 1.1、使用彈出窗口打開這是打開w文件最簡單的方法父頁面——放windowDialog組件，調用windowDialog組件的open方法打開子頁面子頁面——放windowReceiver組件，調用windowReceiver組件的windowEnsure或者windowCancel方法關閉子頁面 ? 1、子頁面固定，不用傳參數在設計器中設置windowDialog組件的src屬性為一個w文件的路徑，點擊按鈕打開時，可以在按鈕的onClick事件中選擇windowDialog組件的open操作。不使用按鈕打開，可以調用windowDialog組件的open方法 Model.prototype.openBtnClick = function(event){ this.comp('windowDialog1').open(); }; 2、子頁面固定，需要傳參數在設計器中設置windowDialog組件的src屬性為一個w文件的路徑，調用windowDialog組件的open方法時傳參在父頁面中向子頁面傳兩個參數，一個是a，一個是b，a的值是123，b的值是456 Model.prototype.openBtnClick = function(event){ ? ? this.comp('windowDialog1').open({data:{a:'123',b:'456'}}); }; 在子頁面的windowReceiver組件的onReceive事件中接收父頁面傳過來的參數a和b Model.prototype.windowReceiverReceive = function(event){ ? ? alert(event.data.a); ? ? alert(event.data.b); }; 3、子頁面不固定在調用windowDialog組件的open方法時，給出要打開的子頁面的路徑 Model.prototype.openBtnClick = function(event){ ? ? var url = require.toUrl('$UI/comp/list.w'); ? ? this.comp('windowDialog1').open({src:url,data:{a:'123',b:'456'}}); }; ? 1.2、使用門戶提供的方法使用X5提供的門戶，就可以使用這種方法。父頁面——調用justep.Portal.openWindow方法打開子頁面子頁面——調用justep.Portal.closeWindow方法關閉子頁面 ? 1、在WeX5中使用在父頁面中打開子頁面 Model.prototype.openBtnClick = function(event){ ? ? var url = '$UI/comp/contents.w'; ? ? justep.Portal.openWindow(url); }; 關閉子頁面，返回父頁面 Model.prototype.closeBtnClick = function(event){ ? ? justep.Portal.closeWindow(); }; 2、在BeX5中使用在父頁面中打開子頁面，title、process、activity都是必須傳的，title是門戶中顯示的標題，process和activity是w文件的權限參數，可以從應用的config目錄下的function.xml文件中獲取，process是流程路徑，activity是流程環節。 Model.prototype.openBtnClick = function(event){ ? ? var url = "$UI/erp/buy/process/goods/mainActivity.w"; ? ? justep.Portal.openWindow(url, { ? ? ? ? title : '功能標題', ? ? ? ? process : "/erp/buy/process/goods/goodsProcess", ? ? ? ? activity : "mainActivity" ? ? }); }; 關閉子頁面，返回父頁面 Model.prototype.closeBtnClick = function(event){ ? ? justep.Portal.closeWindow(); }; 3、傳參和接收參數在url中加入a和b兩個參數 1 var url = '$UI/comp/contents.w?a=123&b=456'; 在子頁面的w文件的model組件的onload事件中接收參數 Model.prototype.modelLoad = function(event){ ? ? alert(this.getContext().getRequestParameter('a')); ? ? alert(this.getContext().getRequestParameter('b')); }; 1.3、模擬門戶的做法沒有使用X5提供的門戶，就可以使用這種方法。父頁面——放Contents組件，調用系統提供的loadContent方法，新增一個content，在content中創建一個WIndowContainer組件，設置src屬性為子頁面的w文件的路徑，即可打開子頁面子頁面——調用Contents組件的remove方法關閉子頁面案例：在父頁面中打開子頁面，使用系統提供的loadContent方法， var utils = require("$UI/system/components/justep/common/utils"); ? Model.prototype.openBtnClick = function(event){ ? ? //生成一個唯一編碼，作為新建的content的xid ? ? var xid = justep.UUID.createUUID(); ? ? //新建一個content，新建一個WIndowContainer，加載w文件 ? ? utils.loadContent(this.comp("contents"), xid, require.toUrl("$UI/comp/list.w")); ? ? //切換到新建的content ? ? this.comp('contents').to(xid); }; 關閉子頁面，返回父頁面。在WIndowContainer嵌入的w文件中，使用this.getParent()獲得父頁面的model對象，就可以取得父頁面中的contents組件，刪除當前content。這樣寫要求子頁面知曉父頁面的組件，實際中可以在父頁面中提供一個方法，供子頁面調用。 Model.prototype.closeBtnClick = function(event){ ? ? var pages = this.getParent().comp('contents') ? ? pages.remove(pages.active); }; 傳參和接收參數的方法同上 2、打開html等其它類型的文件 2.1、使用打開w文件的方法一里面介紹的方法都是打開w文件的，但是，我們可以用它打開非w文件，具體的做法是新建一個w文件，放iframe標簽，設置src屬性為要打開的文件的路徑，這樣，打開非w文件就變成打開w文件了。 2.2、使用a鏈接跳轉頁面中放a標簽，設置href屬性，通過點擊a標簽跳轉頁面案例： <a xid="a1" href="http://www.baidu.com">頁面跳轉</a> 非w文件接收參數的方法和w文件接收參數的方法不同，如果使用了html5，可以使用html5提供的本地存儲localStorage 賦值——localStorage.setItem(‘newsid’, ‘123’); 取值——var newsid= localStorage.getItem(‘newsid’); 2.3、頁面重定向通過設置window.location.href實現頁面跳轉案例： Model.prototype.openBtnClick = function(event){ ? ? ?window.location.href = "http://www.baidu.com"; }; 2.4、使用window.open 調用window.open打開頁面 1、在手機App中使用下面的代碼來自/UI2/demo/device/camera/mainActivity.js，如果是蘋果手機，在新打開的頁面中會顯示關閉按鈕，安卓手機可以使用返回鍵關閉 //顯示圖片和視頻 Model.prototype.fileListClick = function(event) { ? ? var data = this.comp("fileData"); ? ? var url = data.getValue("filePath"); ? ? ? if (justep.Browser.isX5App && justep.Browser.isAndroid) { ? ? ? ? window.open(url,"_system"); ? ? } else { ? ? ? ? window.open(url, '_blank', 'toolbarposition=top,location=no,enableViewportScale=yes'); ? ? } }; 2、在瀏覽器中使用 Model.prototype.openBtnClick = function(event){ ? ? ?window.open("http://www.baidu.com"); }; 3、使用路由 Router是一種根據不同URL表現不同頁面狀態的能力，提供對瀏覽器的前進、后退導航、有狀態的書簽、可分享的URL、URL自定義處理器等。能夠實現把這個有狀態的URL分享出去，打開這個URL后這個頁面能定位到相應狀態。這就是前端路由，雖然URL變化了，但是并沒有發送后端請求。 3.1、使用系統定義好的路由 1、contents組件支持路由設置contents組件的routable屬性為true，contents組件就可以使用路由功能了。當你切換content時，你會發現URL變化了。 http://127.0.0.1:8080/x5/UI2/comp/contents.w#!content1 http://127.0.0.1:8080/x5/UI2/comp/contents.w#!content2 http://127.0.0.1:8080/x5/UI2/comp/contents.w#!content3 這就是路由產生的效果，使得單頁應用內的頁面有了URL，這樣的URL即可以分享出去，也可以使用傳統方式打開。在瀏覽器里面直接打開上面的這三個URL會分別顯示contents的第一頁、第二頁、第三頁，這就是前端路由的效果。 2、windowDialog組件支持路由設置windowDialog組件的routable屬性為true，windowDialog組件就可以使用路由功能了。當你打開windowDialog時，你會發現URL變化了。 http://127.0.0.1:8080/x5/UI2/comp/windowDialog.w#!windowDialog1 http://127.0.0.1:8080/x5/UI2/comp/windowDialog.w#!windowDialog1//{“data”:{“a”:”123″,”b”:”456″}} 第一個URL是沒有參數的，第二個URL是帶著參數的。如果在瀏覽器里面直接打開上面的這兩個URL會首先打開w文件，然后彈出其中的彈出窗口，第二個URL還會傳參數給彈出窗口 3.2、自定義路由系統的門戶中內置了路由，因此可以把任意一頁分享出去。如果自定義門戶，就需要使用路由組件，才能使得在自定義門戶中打開的功能有URL，從而實現分享。下面我們具體說明一下自定義門戶中路由的實現 1、門戶頁的設置在門戶頁中放contents組件，router組件。 contents組件的routable屬性設置為true； 2、在門戶頁中顯示功能樹（1）將功能樹信息存入data組件功能樹需要以下信息：功能名稱、功能URL、功能標識。如下圖（2）用list和output組件顯示功能樹放list組件，用來顯示功能樹在li中放output組件，用來顯示功能名稱（3）在list組件的單擊事件中打開功能并添加路由 //在上面需要引用一個js文件，下面調用這個js文件里面的方法 var utils = require("$UI/system/components/justep/common/utils"); ? Model.prototype.list1Click = function(event) { ? ? //獲得功能URL ? ? var funcUrl = this.comp('funcData').getValue('funcUrl'); ? ? //獲得功能標識 ? ? var funcID = this.comp('funcData').getValue('funcID'); ? ? //調用系統提供的方法，在contents組件中新建content頁，新建WIndowContainer組件，顯示w文件， ? ? //第一個參數是contents組件的js對象，第二個參數是新建content組件的xid，我們用功能標識作為content的xid，第三個參數是要顯示的w文件的URL ? ? utils.loadContent(this.comp("contents1"), funcID, require.toUrl(funcUrl)); ? ? //切換到新建的content頁 ? ? this.comp("contents1").to(funcID); ? ? //添加路由，這兩個參數在下面的路由變動事件中會用到，下面再講 ? ? this.comp("router1").addRouteItem('open', funcID); }; 現在，我們可以運行，并且打開一個功能了。看看瀏覽器地址欄里面的URL已經變了。例如：http://127.0.0.1:8080/x5/UI2/comp/contents.w#!router1/open/list/!/list 3、打開已分享的頁面（1）路由URL介紹 http://127.0.0.1:8080/x5/UI2/comp/contents.w#!content3 http://127.0.0.1:8080/x5/UI2/comp/windowDialog.w#!windowDialog1//{“data”:{“a”:”123″,”b”:”456″}} 路由URL以#!開始，由三段數據組成，具體格式是：路由組件的xid/動作名稱/參數。上面例子中的第二個URL省略了動作名稱，因為windowDialog只有一個open的動作。上面例子中的第一個URL省略了后面兩個參數，因為content只有一個動作就是切換，且沒有參數，如果路由組件xid改為contents組件，可以這樣寫contents/page/3，表示切換到第三頁。使用路由組件后，動作名稱和參數可以自定義，在路由變動事件中寫代碼接收、處理。本例中，我們打開功能設置的URL是：路由組件的xid/open/功能標識。例如：#!router1/open/list。這是由this.comp(“router1″).addRouteItem(‘open’, funcID);代碼生成的。在瀏覽器的地址欄里面直接打開這個地址http://127.0.0.1:8080/x5/UI2/comp/contents.w#!router1/open/list/!/list的過程是這樣的： contents.w——首先打開contents.w頁面，此時這個頁面里面沒有打開過任何功能 #!router1/open/list——系統會將router1/open/list傳給router組件，并觸發路由變動事件，在事件中，我們需要寫代碼創建content（xid為list），根據功能標識，加載對應功能頁面。 !/list——系統將contents組件切換到xid為list的content頁，就是我們在路由變動事件中新建的content頁。至此，功能頁面就顯示出來了。（2）在路由變動事件中接收URL中的信息 Model.prototype.router1Route = function(event) { ? ? //event.name是動作名稱，event.routeState有三種狀態：進入、變更、離開，在這里我們使用進入 ? ? if (event.name == 'open' && event.routeState == 'enter') { ? ? ? ? //使用異步，因為瀏覽器加載頁面就是異步模式 ? ? ? ? event.async = true; ? ? ? ? //event.param是功能標識 ? ? ? ? var funcID = event.param; ? ? ? ? //通過功能標識找到功能URL ? ? ? ? var rows = this.comp("funcData").find([ 'funcID' ], [ funcID ], true, true, true); ? ? ? ? if (rows.length > 0) { ? ? ? ? ? ? var funcUrl = rows[0].val('funcUrl'); ? ? ? ? ? ? //調用系統提供的方法，新建content，新建WIndowContainer，顯示功能 ? ? ? ? ? ? utils.loadContent(this.comp("contents1"), funcID, require.toUrl(funcUrl), function(err) { ? ? ? ? ? ? ? ? if (!err) { ? ? ? ? ? ? ? ? ? ? //在loadContent方法的回調事件中，結束異步處理 ? ? ? ? ? ? ? ? ? ? event.dtd.resolve(); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }); ? ? ? ? } ? ? } }; 3.3、使用靜態路由上面自定義路由中介紹了，使用動態路由的方法，下面介紹使用靜態路由的方法——使用a標簽，設置href為路由URL，例如： ?去第一頁 ?去第二頁這是使用路由的簡單方式