MUI中点击推送消息,若为同类型信息,不关闭前一个页面,打开新页面仍显示前一个页面数据的问题

本文分享了个推推送中遇到的问题及解决方案:当连续推送同类型消息时,未关闭前一条信息的情况下,点击下一条信息仍显示上一条内容。通过设置mui.openWindow方法中的createNew参数为true,确保每次点击都打开并加载新页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近公司在做的一个项目涉及个推推送,在写推送过程中遇到了很多问题,现在把其中的一个问题与大家分享。

我们要实现的功能是后台推送过来,我要根据推送的信息类型进入不同的页面,展现不同的信息,但在写的过程中发现同一种类型信息,在不关闭前一条信息的情况下,点击下一条同类型的信息,打开的页面还是显示上一条信息的内容。通过查找发现,是因为上一页面未关闭,再打开下一条信息,并没有重新打开一个新的页面,也就没有进行重新请求数据,只是将前一个页面显示到最前面,针对这个问题,有以下解决办法。

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毫秒;
    },
    waiting:{
      autoShow:true,//自动显示等待框,默认为true
      title:'正在加载...',//等待对话框上显示的提示内容
      options:{
        width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
        height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
        ......
      }
    }
})

 这是mui文档中给出的方法,在打开新页面中有一个createNew:false,的参数,false代表不重复创建新页面,若要创建一个新页面,只需把createNew的值设为true就可以了。

以上是我解决该问题的方法,若有更好的方法,欢迎一起分享。

<think>我们有两个需求:1.返回上一页刷新;2.获取上一页的返回值。根据引用[1]:我们可以自定义mui.back方法,但这里我们需要关闭页面,而是需要返回到上一页。引用[3]提到,如果只是打开新页面而没有关闭,会导致数据混乱。所以我们需要在返回时注意页面管理。引用[4]提供了一种返回到目标页面并触发自定义事件的方法,我们可以利用自定义事件来传递返回值。引用[5]展示了如何监听上一个页面触发的事件来获取返回值。因此,我们可以这样实现:1.在返回上一页时,我们使用mui.back()默认行为(因为默认行为可能会刷新页面?),而是使用自定义事件来传递数据,并利用MUI页面管理方法返回到上一页而刷新。2.具体步骤:a.在上一页面(即目标页面)中监听一个自定义事件(比如'returnWithData')。b.在当页面(子页面)返回时,触发这个自定义事件,并传递数据,然后关闭页面(这样就会残留页面导致数据混乱)。但是,我们如何在刷新上一页面的情况下传递数据呢?引用[5]的方法:上一个页面监听事件,当页面触发事件。详细步骤:步骤1:在上一页面(假设为pageA)中,添加自定义事件监听。步骤2:在当页面(pageB)中,当需要返回并传递数据时,触发pageA中的自定义事件,并传递数据,然后关闭页面(pageB)。注意:由于MUI页面管理机制,我们通过plus.webview获取页面对象。具体代码实现:在pageA(上一页)中:```javascript//监听自定义事件,比如'returnWithData'document.addEventListener('returnWithData',function(e){//从事件对象e中获取传递过来的数据vardata=e.detail;//在这里处理数据,更新页面刷新整个页面,只更新部分内容)console.log('接收到返回数据:',data);//例如:更新某个元素的内容//document.getElementById('content').innerText=data.text;});```在pageB(当页)中,当点击返回按钮时:```javascript//假设有一个返回按钮document.getElementById('backBtn').addEventListener('tap',function(){//获取上一页(pageA)的webview对象varprevPage=plus.webview.getWebviewById('pageA.html');//这里需要知道pageA的id,通常是它的url//触发上一页的自定义事件,并传递数据mui.fire(prevPage,'returnWithData',{text:'这是要返回的数据'});//关闭页面(pageB)plus.webview.currentWebview().close();});```这样,pageA会刷新,因为只是触发了它上面的一个事件,然后更新了部分内容。同时,pageB被关闭会残留在页面栈中,避免了引用[3]所说的数据混乱问题。另外,我们也可以使用MUI提供的预加载页面机制,这样两个页面都在同一个webview中,通过事件传递数据更为方便。但上面的方法适用于两个独立的webview。注意:如果pageA是通过mui.openWindow打开的pageB,那么pageA和pageB是两个webview。如果希望返回时pageA刷新,那么pageA在打开pageB时能被关闭,并且我们也能重新加载它。使用上述事件机制,我们只是传递数据给pageA,然后由pageA自己更新DOM,这样就会刷新整个页面。引用[4]中提到的popToTarget方法,我们也可以使用:```javascript//在pageB中返回并传递数据mui.plusReady(function(){//返回到pageA,并触发pageA的自定义事件plusCommon.popToTarget('pageA.html',true,'returnWithData',{key:value});});```但是,plusCommon对象并MUI的标准对象,可能是引用[4]中作者自定义的。我们可以使用标准的MUI事件触发机制,即mui.fire。因此,总结一下,我们使用以下步骤:1.在上一页面(pageA)中监听自定义事件。2.在当页面(pageB)中触发上一页面的自定义事件,并传递数据,然后关闭页面。这样,返回上一页(pageA)会刷新,并且能获取到返回值(通过事件传递的数据)。注意:由于页面关闭的动画效果,可能会在关闭动画完成后再触发事件,所以需要确保事件在页面关闭触发。但实际测试中,mui.fire是立即触发的,所以一般没有问题。如果遇到页面关闭太快导致事件传递失败,可以稍作延时(推荐,尽量保证同步):```javascriptsetTimeout(function(){plus.webview.currentWebview().close();},50);```但一般情况下,直接先触发事件再关闭页面是可行的。最后,我们还需要注意:在pageA中,如果它被重新打开(比如从其他路径再次进入),那么事件监听可能会重复绑定。为了避免重复绑定,可以在页面关闭时移除事件监听。但是,由于我们每次返回都会关闭pageB,而pageA是一直存在的,所以重复绑定可能是大问题(因为pageA重复创建)。但如果pageA会被多次打开,那么就需要在pageA的页面关闭时移除事件监听。在pageA中,可以监听pageA的页面关闭事件,然后移除事件监听:```javascript//在pageA中varreturnWithDataHandler=function(e){//处理事件};document.addEventListener('returnWithData',returnWithDataHandler);//当pageA关闭时,移除监听window.addEventListener('unload',function(){document.removeEventListener('returnWithData',returnWithDataHandler);});```但是,由于我们的需求是pageA会刷新,所以pageA会触发unload事件。因此,需要根据实际页面生命周期来管理事件监听。如果pageA是主页面,一直存在,那么需要移除。综上所述,实现方法如上。下面整理一个完整的示例:假设有两个页面:index.html(首页)和detail.html(详情页)。在详情页操作后,返回首页并传递数据。index.html代码片段:```javascript//index.htmlmui.plusReady(function(){//监听自定义事件document.addEventListener('returnWithData',function(e){vardata=e.detail;console.log('接收到数据:',data);//更新页面数据document.getElementById('result').innerText=data.message;});});//打开详情页document.getElementById('openDetail').addEventListener('tap',function(){mui.openWindow({url:'detail.html',id:'detail.html'});});```detail.html代码片段:```javascript//detail.htmlmui.plusReady(function(){//返回按钮document.getElementById('backBtn').addEventListener('tap',function(){//获取首页的webviewvarmainPage=plus.webview.getWebviewById('index.html');//触发首页的自定义事件,传递数据mui.fire(mainPage,'returnWithData',{message:'这是从详情页返回的数据'});//关闭页面plus.webview.currentWebview().close();});});```这样,当从详情页返回时,首页会刷新,并且会更新显示传递过来的数据。注意:首页的id(在openWindow时设置的id)需要和详情页中getWebviewById的id一致。通常,我们使用页面的url作为id,或者显式指定id。如果首页是通过标准方式打开的,它的id就是'index.html'(即它的url)。如果首页是入口页,它可能没有通过openWindow打开,那么它的id也是它的url。另外,如果首页在打开详情页时已经关闭了(比如使用hide方法),那么我们需要先显示它,然后再关闭详情页。但通常首页关闭。如果首页被关闭了,那么我们需要重新打开它,这样就会刷新。所以,我们一般关闭首页。因此,这种方法适用于首页一直存在于Webview栈中的情况。如果首页在栈中,那么我们需要重新打开它,这时就会刷新。这种情况符合“返回上一页刷新”的要求。所以,在应用设计时,要确保首页(或上一页)在打开页面时没有被关闭。引用[3]提到的问题,我们通过关闭页面(详情页)来避免页面残留,这样再次打开详情页时,会重新加载,保证了数据的更新。所以,这个方法同时解决了两个需求:刷新上一页(通过事件更新)和获取返回值(通过事件传递数据)。</think>### MUI 返回上一页刷新并获取返回值的实现方法 在 MUI 框架中实现返回上一页刷新且获取返回值,可以通过以下步骤实现: #### 核心思路 1. **使用自定义事件传递数据**:通过 MUI 的 `mui.fire()` 方法触发自定义事件传递数据 2. **避免页面刷新**:使用 `plus.webview` 管理页面,避免重复创建页面实例 3. **监听返回值**:在目标页面设置事件监听器接收数据 #### 具体实现步骤 **1. 在上一页面(目标页面)设置事件监听器** ```javascript // 在需要接收返回值的页面(例如 pageA.html) mui.plusReady(function() { // 监听自定义事件,例如命名为 'returnData' window.addEventListener('returnData', function(e) { // 获取返回的数据 const returnValue = e.detail; console.log("接收到返回数据:", returnValue); // 在此处处理返回的数据(更新UI等) document.getElementById('result').innerText = returnValue.message; }); }); ``` **2. 在当页面(子页面)返回时触发事件** ```javascript // 在当页面(例如 pageB.html) function goBackWithData() { // 准备要返回的数据 const returnData = { status: 1, // 建议使用数字状态码[^2] message: "操作成功", data: { /* 其他数据 */ } }; // 获取目标页面(上一页)的 webview const targetPage = plus.webview.getWebviewById('pageA.html'); // 触发自定义事件并传递数据 mui.fire(targetPage, 'returnData', returnData); // 关闭页面刷新目标页面[^3][^4] plus.webview.currentWebview().close("none"); } ``` **3. 绑定返回按钮事件** ```html <!-- 在 pageB.html 中添加返回按钮 --> <button id="backBtn" class="mui-btn">返回</button> <script> document.getElementById('backBtn').addEventListener('tap', goBackWithData); </script> ``` #### 关键点说明 1. **页面管理**: - 使用 `plus.webview.getWebviewById()` 获取目标页面引用 - 使用 `close("none")` 关闭页面触发刷新[^1][^3] 2. **数据传递**: - 使用 `mui.fire(target, event, data)` 发送自定义事件 - 数据格式建议标准化(如包含状态码和消息体)[^2] 3. **避免页面重复**: - 确保页面 ID 唯一(`pageA.html`) - 使用 `close()` 方法避免页面残留[^3] #### 完整流程 ```mermaid sequenceDiagram participant PageA as 上一页 (pageA.html) participant PageB as 当页 (pageB.html) PageA->>PageA: 设置事件监听器 (returnData) PageA->>PageB: 打开页面 PageB->>PageB: 用户操作生成返回数据 PageB->>PageA: 触发自定义事件 (mui.fire) PageA->>PageA: 接收并处理返回数据 PageB->>PageB: 关闭页面 (plus.webview.close) ``` #### 注意事项 1. **页面标识**:确保每个页面有唯一的 ID(通过 `mui.openWindow` 的 `id` 参数设置) 2. **数据类型**:建议使用 JSON 格式传递结构化数据 3. **性能优化**:大数据量时考虑使用局部更新而非整页刷新 4. **错误处理**:添加超时检测和事件监听移除机制 5. **页面生命周期**:在 `plusReady` 事件后执行页面操作[^5] > 此方法通过 MUI 的自定义事件机制实现跨页面通信,结合 plus.webview 的页面管理能力,既避免了页面刷新又实现了数据传递,符合 MUI 的最佳实践[^4][^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值