k***@163.com
k***@163.com
  • 发布:2020-05-27 15:53
  • 更新:2020-05-29 16:17
  • 阅读:755

【报Bug】此BUG严重,页面返回会触发页面的onLoad,导致数据重置,已经影响到第三方APP接入H5。

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

浏览器平台: Chrome

浏览器版本: 77.0.3865.120(正式版本) (64 位)

项目创建方式: CLI

CLI版本号: 2.7.5

App下载地址或H5⽹址: https://testh5v3.shinetour.com/testh5/#/

示例代码:

A页面

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <br>  
        <button type="primary" size="mini" @click="gotopage">跳转到B</button>  
        <br>  
        <view>  
            <view class="title">{{title}}</view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello A',  
            }  
        },  
        onLoad() {  
            console.log('A page onLoad')  
            // this.getData()  
            uni.$on('pushFromB', this.setData)  
        },  
        onUnload() {  
            uni.$off('pushFromB')  
        },  
        onShow() {  
            console.log('A page onshow')  
        },  
        methods: {  
            setData(data) {  
                console.log('监听到事件来自 B ,携带参数 data 为:' + JSON.stringify(data));  
                this.title = data  
            },  

            gotopage() {  
                console.log('跳转到B')  
                uni.navigateTo({  
                    url: '/pages/b'  
                })  
            }  

        }  
    }  
</script>

B页面

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <br>  
        <button type="primary" size="mini" @click="goto">跳转到C</button>  
        <br>  
    <button type="warn" size="mini" @click="pushData">返回A</button>  
        <view>  
            <text class="title">{{title}}</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello B'  
            }  
        },  
        onLoad() {  
            console.log('B page onLoad')  
            uni.$on('pushFromC', this.setData)  
        },  
        onUnload() {  
            uni.$off('pushFromC')  
        },  
        onShow() {  
            console.log('B page onshow')  
        },  
        methods: {  
      goto() {  
                console.log('跳转到C')  
                uni.navigateTo({  
                    url: '/pages/c'  
                })  
            },  
            setData(data) {  
                console.log('监听到事件来自 C ,携带参数 data 为:' + JSON.stringify(data));  
                this.title = data  
            },  
      pushData() {  
                uni.$emit('pushFromB', 'Data from B')  
                this.back()  
            },  
            back(){  
                console.log('返回A')  
                uni.navigateBack({  
                    delta: 1  
                });  
            }  
        }  
    }  
</script>

C页面

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <br>  
    <button type="warn" size="mini" @click="pushData">返回B</button>  
        <br>  
        <view>  
            <text class="title">{{title}}</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello C'  
            }  
        },  
        onLoad() {  
      console.log('C page onload')  
        },  
        onShow() {  
            console.log('C page onshow')  
        },  
        methods: {          
            pushData() {  
        uni.$emit('pushFromC', 'Data from B')  
        this.back()  
            },  
            back(){  
                console.log('返回B')  
                uni.navigateBack({  
                    delta: 1  
                });  
            }  
        }  
    }  
</script>  

pages.json

{  
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages  
        {  
            "path": "pages/a",  
            "style": {  
                "navigationBarTitleText": "A页面"  
            }  
        },  
        {  
            "path": "pages/b",  
            "style": {  
                "navigationBarTitleText": "B页面"  
            }  
        },  
        {  
            "path": "pages/c",  
            "style": {  
                "navigationBarTitleText": "C页面"  
            }  
        }  
    ],  
    "globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "uni-app",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F8"  
    }  
}

操作步骤:
  1. 页面有三个:A(启动页), B,C;
  2. 在chrome手机模式下选择Galaxy S Ⅲ调试;
  3. A跳转到B,B返回A数据正常,但是从B跳转到C,再从C返回B就会触发B的onload,导致数据初始化了;

预期结果:

B跳转到C,C返回B数据正常

实际结果:

B跳转到C,C返回B触发了B的onload,导致数据初始化了

bug描述:

  1. 页面有三个:A(启动页), B,C;
  2. 在chrome手机模式下选择Galaxy S Ⅲ调试;
  3. A跳转到B,B返回A正常,但是从B跳转到C,再从C返回B就会触发B的onload,导致数据初始化了;
  4. 相同问题:https://ask.dcloud.net.cn/question/97163
2020-05-27 15:53 负责人:DCloud_UNI_GSQ 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

目前已经确认vue-router在通过UA中的安卓版本判断是否支持PushState
当安卓版本等于4.0时会出现此问题,你们的应用必须支持安卓4.0吗?

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