mui页面跳转及传参

﹏ヽ暗。殇╰゛Y 2023-05-29 02:47 25阅读 0赞

#### 页面跳转传参 ####

父页面：

mui.openWindow({
    	url: './apply_fert_accu_result.html', 
    	extras: {
    		userName: username.innerText,
    		phoneNumber: phoneNumber.innerText,
    		positionLation: selectAddressText,
    		crop: showCrapBtn.innerText,
    		targetOutPut: targetOutPut.value,
    		shedType: showCrapBtn.innerText == '小麦' ? showShedTypeBtn.innerText : ''
    	}
    });

子页面：

mui.plusReady(function() {
    	var self = plus.webview.currentWebview();
    	userName.innerHTML = self.userName; 
    	phoneNumber.innerHTML = self.phoneNumber;
    	crop.innerHTML = self.crop; 
    	targetOutPut.innerHTML = self.targetOutPut;
    	shedStructure.innerHTML = self.shedType;
    	soilSampleLocation.innerHTML = self.positionLation;`在这里插入代码片`
    })

#### 子页面返回到指定的tab页面 ####

子页面：

//关闭当前页，回到历史页
    mui('body').on('tap', '#historyReturn', function(e){
    	var parentWindow =plus.webview.currentWebview().opener().opener();//获取父窗体父窗体。
    	console.log(JSON.stringify(parentWindow))
    	mui.fire(parentWindow, 'historyPage', ""); // 参数说明：父窗体，事件名，参数
    	var curr = plus.webview.currentWebview().close("zoom-in");  
    });

index.html即tab页面

//自定义事件，子页面关闭，并在子页面上触发了历史档案事件。
    document.addEventListener('historyPage', function(e){      			
    	var arr =document.getElementsByClassName('mui-tab-item');
    	mui.trigger(arr[1],"tap");//触发历史档案页面事件  
    	//加载和去除点击样式
    	document.getElementById('historyBar').classList.add('mui-active');
    	document.getElementById('mainBar').classList.remove('mui-active');
    });

**问题：上述问题父子页面可以正常返回，但是如果更深层，需要以下方式**

#### 子页面返回到指定的tab页面（方式二） ####

index.html 即tab页面

**tab页面进入到另一个页面，可以使用openWindow跳转，可以正常返回，  
紧接着向下跳转需要通过如下方式跳转**

`location.href="apply_fert_accu_result.html?crop="+showCrapBtn.innerText;`

返回的最终子页面

1.  接收参数（中文参数乱码）
    
        // 获取参数方法
        function GetUrlParam(name){
        	  var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        	  var r = encodeURI(window.location.search).substr(1).match(reg);
        	  if(r!=null)return unescape(r[2]); return null;
        }
          //使用获取参数方法
        var id= GetUrlParam("id");
        var crop = decodeURI(GetUrlParam("crop"));
        console.log("  name:"+crop);
2.  返回到指定的tab页
    
        //关闭当前页，回到历史页
        mui('body').on('tap', '#historyReturn', function(e){
        	var parentWindow =plus.webview.currentWebview().opener().opener();//获取父窗体父窗体。
        	console.log(JSON.stringify(parentWindow))
        	mui.fire(parentWindow, 'historyPage', '');
        	var curr = plus.webview.currentWebview().close("zoom-in");  
        });

#### mui页面刷新 ####

B页面这样写：

mui.init({ 
      beforeback: function() { 　　　　
     
          var list = plus.webview.currentWebview().opener();　　　　
          //refresh是A页面自定义事件
          mui.fire(list, 'refresh');
          //返回true,继续页面关闭逻辑
          return true;
      }
    });

A页面这样写：

window.addEventListener('refresh', function(e){ //执行刷新
        location.reload();
    });