1***@qq.com
1***@qq.com
  • 发布:2020-06-08 19:45
  • 更新:2020-06-08 19:45
  • 阅读:738

【报Bug】webview 页面跳转错误

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.7.11

手机系统: Android

手机系统版本号: Android 10

手机厂商: 三星

手机机型: s10+

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

监听“返回首页”按钮消息:
<web-view :src="src" @message="getMessage"></web-view>

接收到消息处理:

getMessage(event){  
                uni.switchTab({  
                    url: '/pages/index/index'  
                });  
            },

html代码:

<!DOCTYPE html>  
<html lang="en" style="margin:0">  

  <head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  

    <title>支付</title>  
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>  
    <!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->    
    <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>    
    <!-- uni 的 SDK,必须引用。 -->    
    <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>  
    <script type="text/javascript">  
        var userAgent = navigator.userAgent.toLowerCase();  
        document.addEventListener('UniAppJSBridgeReady', function() {    
            document.querySelector('#toOrder').addEventListener('click', function(evt) {    
                if(userAgent.match(/MicroMessenger/i) == 'micromessenger'){  
                    location.href = $("#orderUrlH5").val();  
                }else{  
                    try{  
                        uni.postMessage({  
                            data: {  
                                action: 'order'  
                            }  
                        });  
                    } catch(err){  
                        location.href = $("#orderUrlH5").val();  
                    }  
                }  
            });    
            document.querySelector('#toIndex').addEventListener('click', function(evt) {    
                if(userAgent.match(/MicroMessenger/i) == 'micromessenger'){  
                    location.href = $("#indexUrlH5").val();  
                }else{  
                    try{  
                        uni.postMessage({  
                            data: {  
                                action: 'index'  
                            }  
                        });  
                    } catch(err){  
                        location.href = $("#indexUrlH5").val();  
                    }  
                }  
            });  
        });  

    </script>  
  </head>  

  <style>  
    .pay_main{  
        position: fixed;  
        top: 0;  
        right: 0;  
        bottom: 0;  
        left: 0;  
        z-index: 1000;  
        padding: 50px;  
    }  
    .spinner-text{  
        font-size: 20px;  
    }  
    .text-center{  
        text-align: center;  
    }  
    .d-none{  
        display: none;  
    }  
    .success-icon{  
        width: 80px;  
        height: 80px;  
    }  
    .flex{  
        display: flex;  
        justify-content: center;  
    }  
    .btn{  
        width: 100px;  
        line-height: 40px;  
        text-align: center;  
        font-size: 12px;  
        color: #fff;  
        background-color: #06D291;  
        border-radius: 5px;  
        margin-right: 10px;  
        margin-top: 40px;  
    }  
  </style>  

  <body>  
    <div class="pay_main">  
        <input class="d-none" id="orderUrlH5" th:value="${orderUrlH5}" />  
        <input class="d-none" id="indexUrlH5" th:value="${indexUrlH5}" />  
        <div class="text-center">  
            <image th:src="@{/images/success.png}" class="success-icon" />  
            <div class="spinner-text">支付成功</div>  
            <div class="text-center flex">  
                <div class="btn" id="toOrder">查看订单</div>  
                <div class="btn" id="toIndex">返回首页</div>  
            </div>  
        </div>  
    </div>  
  </body>  

</html>

操作步骤:

监听“返回首页”按钮消息:
<web-view :src="src" @message="getMessage"></web-view>
接收到消息处理:

getMessage(event){  
                uni.switchTab({  
                    url: '/pages/index/index'  
                });  
            },

预期结果:

应该直接跳转到首页

实际结果:

在webview里面打开首页

bug描述:

web-view里内嵌html页面,html页面引入了uni-sdk
现有需求:
点击html页面里的按钮,跳转到app首页,而不是在webview里面打开app首页。

监听“返回首页”按钮消息:

<web-view :src="src" @message="getMessage"></web-view>

接收到消息处理:

getMessage(event){  
                uni.switchTab({  
                    url: '/pages/index/index'  
                });  
            }

html代码:

<!DOCTYPE html>  
<html lang="en" style="margin:0">  

  <head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  

    <title>支付</title>  
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>  
    <!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->    
    <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>    
    <!-- uni 的 SDK,必须引用。 -->    
    <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>  
    <script type="text/javascript">  
        var userAgent = navigator.userAgent.toLowerCase();  
        document.addEventListener('UniAppJSBridgeReady', function() {    
            document.querySelector('#toOrder').addEventListener('click', function(evt) {    
                if(userAgent.match(/MicroMessenger/i) == 'micromessenger'){  
                    location.href = $("#orderUrlH5").val();  
                }else{  
                    try{  
                        uni.postMessage({  
                            data: {  
                                action: 'order'  
                            }  
                        });  
                    } catch(err){  
                        location.href = $("#orderUrlH5").val();  
                    }  
                }  
            });    
            document.querySelector('#toIndex').addEventListener('click', function(evt) {    
                if(userAgent.match(/MicroMessenger/i) == 'micromessenger'){  
                    location.href = $("#indexUrlH5").val();  
                }else{  
                    try{  
                        uni.postMessage({  
                            data: {  
                                action: 'index'  
                            }  
                        });  
                    } catch(err){  
                        location.href = $("#indexUrlH5").val();  
                    }  
                }  
            });  
        });  

    </script>  
  </head>  

  <style>  
    .pay_main{  
        position: fixed;  
        top: 0;  
        right: 0;  
        bottom: 0;  
        left: 0;  
        z-index: 1000;  
        padding: 50px;  
    }  
    .spinner-text{  
        font-size: 20px;  
    }  
    .text-center{  
        text-align: center;  
    }  
    .d-none{  
        display: none;  
    }  
    .success-icon{  
        width: 80px;  
        height: 80px;  
    }  
    .flex{  
        display: flex;  
        justify-content: center;  
    }  
    .btn{  
        width: 100px;  
        line-height: 40px;  
        text-align: center;  
        font-size: 12px;  
        color: #fff;  
        background-color: #06D291;  
        border-radius: 5px;  
        margin-right: 10px;  
        margin-top: 40px;  
    }  
  </style>  

  <body>  
    <div class="pay_main">  
        <input class="d-none" id="orderUrlH5" th:value="${orderUrlH5}" />  
        <input class="d-none" id="indexUrlH5" th:value="${indexUrlH5}" />  
        <div class="text-center">  
            <image th:src="@{/images/success.png}" class="success-icon" />  
            <div class="spinner-text">支付成功</div>  
            <div class="text-center flex">  
                <div class="btn" id="toOrder">查看订单</div>  
                <div class="btn" id="toIndex">返回首页</div>  
            </div>  
        </div>  
    </div>  
  </body>  

</html>
2020-06-08 19:45 负责人:无 分享
已邀请:

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