微信支付完成后，返回到完成页面，会有几率出现无法显示内容的情况（空白页）

Question

问题如题：具体场景描述：扫码，支付，完成后跳转到完成页面，完成页面上有付款价格，商铺，以及优惠券信息。总的来说页面信息不多，代码流程也不复杂，只是一个展示页面。但是在ios下会有一定几率出现页面空白的情况，测试大概计算了一下，10次有1~2次的频率出现（特别是退出微信重新登陆了后）。出问题后复制链接，重新打开每次就又都正常

遇见这个问题很诡异，完全蒙了。刚开始以为是页面报错了（这玩意就算是ios真机调试也没办法调试），只能alert断点的方式来测有没有流程跑不通，结果发现压根页面上没有流程阻塞的问题，打印节点也是ok的，把外部文件的引用顺序也优化了，基本上能想到的方式都试了，还是有问题——最后，自己心血来潮（抓狂不已）下，点空白页上某个点（大概是正常显示金额的位置），发现能复制文本，于是赶紧复制出来看——文本正常，也就是说页面上代码，节点，数据都没有问题，感觉就是数据拿到后压根没更新刷新dome树，重新渲染的感觉（页面不是自己对的接口，是后台的同事对的，没有用vue这种框架，我看了一下，有用到数据模板渲染的方式，类似于php这种的数据渲染方式，但是是c++语言，只能意会，不知真意）。

问题查验到这里，我大概知道如何解决了——直接把类似于php+html这种混合开发转换为用vue框架的方式就可以解决了——主要的原因就是数据没有同页面渲染想统一，vue的渲染模式就可以解决了

但是这肯定是一种暴力的解决方式——换言之，这个页面内容少，转换起来比较轻松，如果是一个复杂的页面，估计后台同事要满娘的，我想用一种可以动态更新dome树的原生的方式，可是找了很多，没找到类似的，有没有遇见过类似问题的前辈，请指点指点

补上代码：

html
<div class="page">
    <div class="section">
        <div class="Sicon">
            <img src="~/Content/images/icon.png" />
        </div>

        <p class="Sstate t_center">支付成功</p>
        <p class="Sprice t_center">¥ @orderInfo.OrderPrice</p>
        <p class="Sname t_center">@ViewBag.StoreName</p>



        @if (rebateList != null && rebateList.Count > 0)
            {
            <div class="paySline">
                <div class="flex f_relative f_center">
                    <span>本次消费获得</span>
                    <hr />
                </div>
            </div>


            <div class="redList flex f_around @(rebateList.Count==2?"arrow":"")">

                @foreach (var item in rebateList)
                {
                    if (item.Type == (int)UserRebateType.OrderRebate)
                    {
                        <div class="redItem">
                            <p class="name t_o t_center">获得店铺返利金</p>
                            <p class="price t_o t_center">@item.Amount 元</p>
                        </div>
                    }
                    else if (item.Type == (int)UserRebateType.WeekendRedPacket)
                    {
                        <div class="redItem">
                            <p class="name t_o t_center">获得周末红包</p>
                            <p class="price t_o t_center">@item.Amount 元</p>
                        </div>
                    }
                    else if (item.Type == (int)UserRebateType.HighRedPacket)
                    {
                        <div class="redItem">
                            <p class="name t_o t_center">获得高消费红包</p>
                            <p class="price t_o t_center">@item.Amount 元</p>
                        </div>
                    }
                }

            </div>
        }


        <div class="paybtn flex f_center">
            <div class="SbtnLine flex f_center" onclick="closeWin()">完成</div>
        </div>
    </div>
</div>

//js
<script>
//微信关闭页面方法
    function closeWin() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            WeixinJSBridge.call('closeWindow');
        } else if (ua.indexOf("alipay") != -1) {
            AlipayJSBridge.call('closeWebview');
        }
    }
</script>

页面正常效果图：

Answer 1

我也有想到直接将页面节点拼串，直接js插节点的方式——想想，还是很暴力