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);//编号
   });

}

最后,圆满成功,预祝各位博友【技术天天进步,工资时时更新】

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