MUI子界面關閉向父界面傳值或者對象

首先,我們需要明白的是plus就是指的手機端,所有硬件設備都是由plus直接調用,不需要第三方接口,如果你是網頁調用手機硬件的話,則需要接口,推薦採用H5,因爲H5有自帶的網頁調取手機硬件設備的功能,mui默認是封裝了plus接口的,只是在網頁上調用不到,沒有真機運行環境,所以在網頁版開發需要調用手機硬件的話,就不行,需要真機環境支持

其次,我們還得明白mui裏面的所有界面在關閉後,想往父界面傳值或者對象的話,我們需要在父界面添加一個監聽事件,其他界面往父界面傳值的時候,需要用到這個監聽事件,另外還得注意一點就是,plus所有的監聽事件,都是在plus預加載完成後,纔會觸發,也就是說,監聽事件必須放在mui.plusReady(function(){}裏面,普通的調取方法在子界面是調用不到父界面的function的,

然後,下面貼上實例(該實例,可以返回一個參數,多個參數,一個對象等)以及,父界面裏面有多個子界面的時候,也可以用這個方法,返回需要的參數,不明白的,我們可以相互學習:1693940631

1,一個父界面和一個子界面的情況

子界面代碼:

mui.plusReady(function(){

  //點擊確定按鈕,將下面data對象返回到父界面
   $$("#sureBtn").on('tap', function() {
                 var data={};
                 data.c_cmdid='12';
                 data.flagAdress='杭州市餘杭區';
                 data.flagNum='ZHN_227sws';
                 //獲得父頁面的webview
                 var list = plus.webview.currentWebview().opener();
            //觸發父頁面的自定義事件(selectSF),從而進行邏輯處理
                 mui.fire(list,'selectSF',data);
                 mui.back();
   });

}

父界面代碼:

mui.plusReady(function(){

//子界面確定後的回調監聽事件
window.addEventListener('selectSF', function(e){
        $$("#c_ex21").val(e.detail.c_cmdid);//id
        $$("#c_ex22").val(e.detail.flagAdress);//地址
        $$("#c_ex23").val(e.detail.flagNum);//編號
 });

}

2,一個父界面和多個子界面的情況

有需求,現在有3個,4個,或者更多的子界面,需要給最後一個界面的對象或者參數返回到最上層的父界面

實例:father.html,childOne.html,childTwo.html,,,,(我這裏就舉例子三個界面),現在把最後一個childTwo.html的一個對象返回到father.html裏面,其中這三個界面的關係就是,father.html是父界面,然後裏面打開了childOne.html,然後在childOne.html裏面有打開了childTwo.html,現在想在關閉childTwo.html的時候,給childTwo.html界面的一個對象返回到father.html界面裏面去,

思路:這種情況,或者是比這個更復雜的情況,這時候,直接給最後一個childTwo.html裏面的參數返回過去是行不通了,因爲中間還隔了一個childOne.html界面,,在界面越多的情況下,我們就更加應該想清楚裏面的層級關係,不然會很亂的,這裏,我們可以通過, 一箇中間界面也就是我們的childOne.html來當作一個傳遞介質幫我們傳到父界面,先將childTwo.html的參數傳到我們的childOne.html,然後在傳到父界面,因爲childOne.html是父界面打開的第一個子界面,所以在利用這個childOne.html界面將對象傳到父界面,多個界面也是一樣的邏輯,這種有點像遞歸思路,先把所有界面分成兩塊,一塊是離父界面最近的界面和父界面爲一塊,其他的就是第二塊,

附上思路圖:

 

附上代碼:

childTwo.html子界面代碼:

mui.plusReady(function(){

  //點擊確定按鈕,將下面data對象返回到childOne.html界面的自定義監聽事件裏面
   $$("#sureBtn").on('tap', function() {
                 var data={};
                 data.c_cmdid='12';
                 data.flagAdress='杭州市餘杭區';
                 data.flagNum='ZHN_227sws';
                 //獲得父頁面的webview
                 var list = plus.webview.currentWebview().opener();
            //觸發父頁面childOne.html的自定義事件(selectSF),從而進行邏輯處理
                 mui.fire(list,'selectSF',data);
                 mui.back();
   });

}

childOne.html子界面代碼:

mui.plusReady(function(){

//childTwo.html子界面確定後的回調監聽事件
window.addEventListener('selectSF', function(e){
       //獲得父頁面的webview
       var list = plus.webview.currentWebview().opener();
      //觸發父頁面father.html的自定義事件(selectSF),從而進行邏輯處理
       mui.fire(list,'selectGM',e.detail);
       mui.back();
 });

father.html父界面代碼:

mui.plusReady(function(){

  //子界面確定後的回調監聽事件
  window.addEventListener('selectSF', function(e){
        $$("#c_ex21").val(e.detail.c_cmdid);//id
        $$("#c_ex22").val(e.detail.flagAdress);//地址
        $$("#c_ex23").val(e.detail.flagNum);//編號
   });

}

最後,圓滿成功,預祝各位博友【技術天天進步,工資時時更新】

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章