uni-app使用web-view嵌套H5页面左滑后，在Android下可正常返回上一页，在鸿蒙系统下直接退出应用问题

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app使用web-view嵌套H5页面左滑后，在Android下可正常返回上一页，在鸿蒙系统下直接退出应用问题

开发环境 版本号 项目创建方式
Windows W10 HBuilderX
HarmonyOS NEXT HarmonyOS NEXT Developer Beta1
Vue vue3

操作步骤：

  • uniapp使用web-view嵌套H5页面，左滑

预期结果：

  • 返回上一页

实际结果：

  • 退出当前应用

bug描述：

<template>
<view>
<web-view :src="src"></web-view>
</view>
</template>
<script>
var wv; //计划创建的webview
export default {
data() {
return {
src: "https://hm.hntxrj.com/",
canBack: false,
};
},
onBackPress() {
if (wv && this.canBack) {
wv.back();
return true;
}
return false;
},
onReady() {
    var self = this;  
    var currentWebview = this.$scope  
        .$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()  
    setTimeout(function() {  
        wv = currentWebview.children()[0];  
        wv.addEventListener(  
            "progressChanged",  
            function(e) {  
                wv.canBack(function(e) {  
                    self.canBack = e.canBack;  
                });  
            },  
            false  
        );  
    }, 500); //如果是页面初始化调用时，需要延时一下  

},  
};
```
uniapp使用web-view嵌套H5页面返回上一页问题。在android上可以正常返回，在鸿蒙中直接退出应用
```

更多关于uni-app使用web-view嵌套H5页面左滑后，在Android下可正常返回上一页，在鸿蒙系统下直接退出应用问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
<template> <view> <web-view :src="src"></web-view> </view> </template> <script> var wv; //计划创建的webview export default { data() { return { src: "https://hm.hntxrj.com/", canBack: false, }; }, onBackPress() { if (wv && this.canBack) { wv.back(); return true; } return false; }, onReady() { 
        var self = this;  
        var currentWebview = this.$scope  
            .$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()  
        setTimeout(function() {  
            wv = currentWebview.children()[0];  
            wv.addEventListener(  
                "progressChanged",  
                function(e) {  
                    wv.canBack(function(e) {  
                        self.canBack = e.canBack;  
                    });  
                },  
                false  
            );  
        }, 500); //如果是页面初始化调用时，需要延时一下  

    },  
};

</script>

更多关于uni-app使用web-view嵌套H5页面左滑后，在Android下可正常返回上一页，在鸿蒙系统下直接退出应用问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在处理uni-app使用web-view嵌套H5页面时，不同操作系统（如Android和鸿蒙系统）的滑动返回行为可能会存在不一致的问题。针对鸿蒙系统下左滑直接退出应用的问题，可以通过编程方式在H5页面中监听滑动事件，并尝试阻止默认行为或进行自定义处理。以下是一个基本的思路和代码示例，以供参考：

思路

  1. 监听滑动事件：在H5页面中监听用户的滑动事件。
  2. 判断滑动方向：判断用户是向左滑动还是向右滑动。
  3. 自定义处理：如果是向左滑动，则通过JavaScript控制页面导航，而不是让系统默认处理。

代码示例

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web-view Slide Handling</title>
    <style>
        /* 样式可以根据需要调整 */
    </style>
</head>
<body>
    <div id="app">
        <!-- 页面内容 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', () => {
    let startX;

    document.addEventListener('touchstart', (e) => {
        startX = e.touches[0].pageX;
    });

    document.addEventListener('touchend', (e) => {
        let endX = e.changedTouches[0].pageX;
        let diffX = startX - endX;

        if (diffX > 50) { // 判断为左滑，50为阈值，可以根据需要调整
            // 在这里处理左滑逻辑，比如返回上一页
            window.history.back();
            // 阻止默认行为（如果适用）
            e.preventDefault();
        }
    });
});

注意事项

  1. 阈值调整：滑动距离的阈值（如示例中的50）可能需要根据实际设备的屏幕大小和用户体验进行调整。
  2. 兼容性：确保上述代码在所有目标浏览器和设备上都能正常运行。某些老旧设备或浏览器可能不支持touchstart和touchend事件。
  3. 性能考虑：对于复杂的页面或应用，频繁的事件监听和处理可能会影响性能。在必要时进行性能优化。

通过上述方法，可以在H5页面中监听并处理滑动事件，从而避免在鸿蒙系统下左滑直接退出应用的问题。不过，由于不同设备和操作系统的差异，可能还需要进行进一步的调试和优化。

回到顶部