openwindow 使用createNew 为true时引发的问题

分类：MUI

电商类app，使用步骤：

   1.   进入一个产品详情页面(A page), 该页有相关其它产品展示。  
   2.  点击某个相关产品会进入到另一个产品的详情页面(我们用openwindow方法设置createNew为true来创建一个B page)。

问题：
这样就形成了一个可以无限循环打开产品详情的问题。因为当用户浏览的产品页面多了的话，会产生很多个webview，到最后app也会估计死掉。不知道最后有什么好的思路可以解决这样的问题。

2016-07-20 11:46 负责人:无分享

5 个回复

最佳回复

Trust - 少说废话

按照您描述的场景，给出一个解决方案，具体实现，请您再进行优化。
代码如下：
list页

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="../../css/mui.min.css" rel="stylesheet" />  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <h1 class="mui-title">列表页</h1>  
        </header>  
        <div class="mui-content">  
            <ul class="mui-table-view">  
                <li class="mui-table-view-cell" data-id="01">  
                    <a class="mui-navigate-right">Item 1</a>  
                </li>  
                <li class="mui-table-view-cell" data-id="02">  
                    <a class="mui-navigate-right">Item 2</a>  
                </li>  
                <li class="mui-table-view-cell" data-id="03">  
                    <a class="mui-navigate-right">Item 3</a>  
                </li>  
            </ul>  
        </div>  
        <script src="../../js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {  
                mui(".mui-table-view").on("tap", ".mui-table-view-cell", function() {  
                    var goodId = this.getAttribute("data-id");  
                    console.log(goodId);  
                    mui.openWindow({  
                        url: "detail.html",  
                        id: "detail",  
                        extras: {  
                            goodId: goodId  
                        }  
                    });  
                });  
            });  
        </script>  
    </body>  

</html>

detail页

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title>商品详情</title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="../../css/mui.min.css" rel="stylesheet" />  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">标题</h1>  
        </header>  
        <div class="mui-content">  
            <ul class="mui-table-view">  
                <li class="mui-table-view-cell" data-id="02">  
                    <a class="mui-navigate-right">  
                        Item 2  
                    </a>  
                </li>  
                <li class="mui-table-view-cell" data-id="03">  
                    <a class="mui-navigate-right">  
                        Item 3  
                    </a>  
                </li>  
                <li class="mui-table-view-cell" data-id="04">  
                    <a class="mui-navigate-right">  
                        Item 4  
                    </a>  
                </li>  
            </ul>  
        </div>  
        <script src="../../js/mui.min.js"></script>  
        <script type="text/javascript">  
            // 一个全局的数组，用于存储商品详情的打开队列；  
            var globalArr = [];  
            var title = document.querySelector(".mui-title");  
            mui.init();  
            mui.plusReady(function() {  
                var self = plus.webview.currentWebview();  
                var currentGoodId = self.goodId;  
                // 向数组中塞值  
                // 这里只填写了一个id，可以根据需求缓存其它字段；  
                var arrObj = {  
                    id: currentGoodId  
                };  
                globalArr.push(arrObj);  
                // 渲染数据  
                title.innerText = "当前商品编号：" + currentGoodId;  
                // 绑定其它商品点击事件  
                mui(".mui-table-view").on("tap", ".mui-table-view-cell", function() {  
                    var targetGoodId = this.getAttribute("data-id");  
                    if(targetGoodId == currentGoodId) {  
                        return;  
                    }  
                    currentGoodId = targetGoodId;  
                    // 给用户一个等待的提示  
                    var wait = plus.nativeUI.showWaiting();  
                    // 替换数据内容  
                    title.innerText = "当前商品编号：" + targetGoodId;  
                    // 将目标商品对象，塞进全局的数组中；  
                    var targetObj = {  
                        id: targetGoodId  
                    };  
                    globalArr.push(targetObj);  
                    // 数据渲染完毕，关闭等待提示  
                    wait.close();  
                });  
            });  
            var old_back = mui.back;  
            mui.back = function() {  
                var activeLength = globalArr.length; //当前数组的长度  
                if(activeLength == 1) {  
                    old_back();  
                    return;  
                }  
                globalArr.splice(activeLength - 1); //删除最后一个商品对象  
                var currentLength = globalArr.length; //操作后数组长度  
                var targetGood = globalArr[currentLength - 1]; //当前数组中最后一个对象，即是目标对象；  
                // 渲染数据  
                title.innerText = "当前商品编号：" + targetGood.id;  
            };  
        </script>  
    </body>  

</html>

具体思路如下：
1、首先记录第一次进入后的商品标识，通常使用id，并将一些参数构造成对象插入队列（即数组）中；
2、点击下面的推荐商品时，对商品id进行判定，如果是重复的，那么就不替换数据；
3、否则，根据商品标识等数据，替换当前页的数据；
4、进行重新渲染的过程中，给用户一个等待的提示；
5、渲染后，将当前商品对象插入队列（即数组）中；
6、回退时，首先将数组中最后一个对象（即当前展示的商品对象信息）从队列中移除，然后取移除后的队列中的最后一个对象（即上一个商品对象，也就是目标商品对象）；
7、当队列中只有一个商品对象，也就是说没有上一级的商品对象的时候，执行未重写前的mui.back()，也就是old_back。
实际场景中，可能数据量会很大，可以考虑用队列（即数组）存储数据，或用本地存储等方式进行存储。尽量避免每次回退的时候再去发起网络请求，然后就是替换数据的时候可以自行模拟页面的切换或者返回顶部的效果。

商品信息.zip

Trust - 少说废话

可以通过对webviewObject对象的控制，来解决该问题。
首先是列表页，代码如下：

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="../../css/mui.min.css" rel="stylesheet" />  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <h1 class="mui-title">列表页</h1>  
        </header>  
        <div class="mui-content">  
            <ul class="mui-table-view">  
                <li class="mui-table-view-cell" data-id="01">  
                    <a class="mui-navigate-right">Item 1</a>  
                </li>  
                <li class="mui-table-view-cell" data-id="02">  
                    <a class="mui-navigate-right">Item 2</a>  
                </li>  
                <li class="mui-table-view-cell" data-id="03">  
                    <a class="mui-navigate-right">Item 3</a>  
                </li>  
            </ul>  
        </div>  
        <script src="../../js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {  
                mui(".mui-table-view").on("tap", ".mui-table-view-cell", function() {  
                    var goodId = this.getAttribute("data-id");  
                    console.log(goodId);  
                    mui.openWindow({  
                        url: "good_detail.html",  
                        id: "good_detail",  
                        extras: {  
                            goodId: goodId  
                        }  
                    });  
                });  
            });  
        </script>  
    </body>  

</html>

列表页打开详情页后，在详情页展示商品详情。
点击商品详情中的其他商品图片，打开的窗口中的内容和当前窗口的html内容是一致的。
详情页，代码如下：

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title>商品详情</title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="../../css/mui.min.css" rel="stylesheet" />  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">标题</h1>  
        </header>  
        <div class="mui-content">  
            <button type="button" class="mui-btn mui-btn-blue" id="open_detail">click</button>  
        </div>  
        <script src="../../js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {  
                var self = plus.webview.currentWebview();  
                var goodId = self.goodId;  
                var wvId = self.id;  
                console.log(wvId);  
                if(wvId === "good_detail_other") {  
                    self.opener().close("none");  
                }  
                var wvs = plus.webview.all();  
                console.log(wvs.length);  
                document.getElementById("open_detail").addEventListener("tap", function() {  
                    mui.openWindow({  
                        url: "good_detail.html",  
                        id: "good_detail_other",  
                        createNew: true  
                    });  
                });  
            });  
        </script>  
    </body>  

</html>

在详情页，打开新的webviewObject的id，和第一次打开的id是有区别的。利用不同的id，进行判断来实现对webviewObject对象的不同处理，从而实现始终是一个商品详情的webviewObject存在，而不会因为打开详情过多，造成创建的窗口对象叠加。
详细代码，请见附件。

createNew.zip

anke (作者)

那还是有个问题，假设我打开路径是 a -> b -> c -> d。
最后点返回，也需要显示 d->c->b->a。

Trust

下面给出了一个思路，可以参考下。

2016-07-20 18:24

anke (作者)

评论出问题了，嗯，思路感觉可行，再次感谢回复！

该问题目前已经被锁定, 无法添加新回复

openwindow 使用createNew 为true时引发的问题

5 个回复

公告

相关问题

openwindow 使用createNew 为true时引发的问题

与内容相关的链接

5 个回复

公告

相关问题