m***@qq.com
m***@qq.com
  • 发布:2025-07-15 18:33
  • 更新:2025-07-15 18:36
  • 阅读:51

【报Bug】很诡异的BUG,为什么APP会进到H5的编译,H5反而进不去H5的编译

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版 22H2

HBuilderX类型: 正式

HBuilderX版本号: 4.66

手机系统: Android

手机系统版本号: Android 15

手机厂商: OPPO

手机机型: PJX110

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="zy--relative">  
        <view class="zy--border-box" style="padding-left: 44rpx;padding-top: 142rpx;height: 428rpx" :style="{'background': 'url('+baseUrl+'static/store/login-bg.png'+') center/cover no-repeat'}">  
            <view class="zy--fff zy--bold zy--font-64" style="margin-bottom: 24rpx;">  
                Hello!  
            </view>  
            <view class="zy--fff zy--font-40" style="line-height: 60rpx;">  
                欢迎来到  
            </view>  
            <view class="zy--fff zy--font-40" style="line-height: 60rpx;">  
                门店端  
            </view>  
        </view>  
        <view class="zy--bg-fff zy--radius-lg radius-top zy--p-xl zy--pt-base" style="position: relative;top: -60rpx;">  
            <u-tabs :list="list" lineWidth="126rpx" lineHeight="4rpx" :lineColor="main_c" :inactiveStyle="{color:'rgba(0,0,0,.85)',fontSize:'32rpx'}" :activeStyle="{color:main_c,fontSize:'32rpx',fontWeight:'bold'}" :scrollable="false" @click="changeType"></u-tabs>  
            <view class="zy--mt-lg" v-if="type == 0">  
                <view class="zy--mb-lg">  
                    <u-input  
                        v-model="account"  
                        shape="circle"  
                        maxlength="20"  
                        placeholder="请输入用户名"  
                        placeholderStyle="font-size:28rpx;color:rgba(0,0,0,.45)"  
                        @focus="onInputFocus"  
                        @blur="onInputBlur"  
                    >  
                        <view slot="prefix" style="padding: 12rpx 8rpx 12rpx 12rpx">  
                            <image  
                                style="width: 28rpx; height: 28rpx; display: flex"  
                                :src="baseUrl + 'static/store/login-username.png'"  
                                mode="aspectFit"  
                            ></image>  
                        </view>  
                    </u-input>  
                </view>  
                <view class="zy--mb-lg">  
                    <u-input  
                        v-model="password"  
                        shape="circle"  
                        maxlength="32"  
                        placeholder="请输入密码"  
                        :password="!showPassword"  
                        placeholderStyle="font-size:28rpx;color:rgba(0,0,0,.45)"  
                        @focus="onInputFocus"  
                        @blur="onInputBlur"  
                    >  
                        <view slot="prefix" style="padding: 12rpx 8rpx 12rpx 12rpx">  
                            <image  
                                style="width: 28rpx; height: 28rpx; display: flex"  
                                :src="baseUrl + 'static/store/login-password.png'"  
                                mode="aspectFit"  
                            ></image>  
                        </view>  
                        <view slot="suffix" style="margin-right: 12rpx" @click="changePassword">  
                            <u-icon v-if="showPassword" name="eye" color="rgba(0,0,0,.45)" size="40rpx"></u-icon>  
                            <u-icon v-else name="eye-off" color="rgba(0,0,0,.45)" size="40rpx"></u-icon>  
                        </view>  
                    </u-input>  
                </view>  
                <view class="zy--mb-lg">  
                    <u-input  
                        v-model="verify_img"  
                        shape="circle"  
                        placeholder="请输入验证码"  
                        maxlength="4"  
                        placeholderStyle="font-size:28rpx;color:rgba(0,0,0,.45)"  
                        @focus="onInputFocus"  
                        @blur="onInputBlur"  
                    >  
                        <view slot="prefix" style="padding: 12rpx 8rpx 12rpx 12rpx">  
                            <image  
                                style="width: 28rpx; height: 28rpx; display: flex"  
                                :src="baseUrl + 'static/store/login-code.png'"  
                                mode="aspectFit"  
                            ></image>  
                        </view>  
                        <view slot="suffix" style="margin-right: 12rpx">  
                            <image  
                                @click="getVerify"  
                                style="height: 50rpx; border-radius: 8rpx; display: flex"  
                                :src="img_verify"  
                                mode="heightFix"  
                            ></image>  
                        </view>  
                    </u-input>  
                </view>  
            </view>  
            <view v-else class="zy--mt-lg">  
                <view class="zy--mb-lg">  
                    <u-input  
                        v-model="mobile"  
                        maxlength="11"  
                        shape="circle"  
                        placeholder="请输入手机号"  
                        placeholderStyle="font-size:28rpx;color:rgba(0,0,0,.45)"  
                        @focus="onInputFocus"  
                        @blur="onInputBlur"  
                    >  
                        <view slot="prefix" style="padding: 12rpx 8rpx 12rpx 12rpx">  
                            <image  
                                style="width: 28rpx; height: 28rpx; display: flex"  
                                :src="baseUrl + 'static/store/login-mobile.png'"  
                                mode="aspectFit"  
                            ></image>  
                        </view>  
                    </u-input>  
                </view>  
                <view class="zy--mb-lg">  
                    <u-code  
                        :keepRunning="true"  
                        unique-key="login"  
                        :seconds="seconds"  
                        startText="获取手机验证码"  
                        @end="end"  
                        @start="start"  
                        ref="uCode"  
                        @change="codeChange"  
                    ></u-code>  
                    <u-input  
                        shape="circle"  
                        v-model="verify_code"  
                        placeholder="请输入验证码"  
                        maxlength="6"  
                        placeholderStyle="font-size:28rpx;color:rgba(0,0,0,.45)"  
                        @focus="onInputFocus"  
                        @blur="onInputBlur"  
                    >  
                        <view slot="prefix" style="padding: 12rpx 8rpx 12rpx 12rpx">  
                            <image  
                                style="width: 28rpx; height: 28rpx; display: flex"  
                                :src="baseUrl + 'static/store/login-code.png'"  
                                mode="aspectFit"  
                            ></image>  
                        </view>  
                        <view slot="suffix" @tap="getCode" class="zy--font-28 zy--main" style="margin-right: 12rpx">  
                            {{ tips }}  
                        </view>  
                    </u-input>  
                </view>  
            </view>  
            <view style="margin-top: 118rpx">  
                <view @click="submit" class="zy--btn-main zy--font-30 zy--w-100 zy--p-base" style="border-radius: 88rpx">登录</view>  
                <view class="zy--flex zy--mt-base zy--mb-base">  
                    <u-checkbox-group @change="checkedChange">  
                        <u-checkbox  
                            :activeColor="main_c"  
                            shape="circle"  
                            label="已阅读并同意"  
                            name="checked"  
                            size="28rpx"  
                            labelSize="24rpx"  
                            labelColor="rgba(0, 0, 0, 0.45)"  
                        ></u-checkbox>  
                    </u-checkbox-group>  
                    <view class="zy--font-24">  
                        <text style="color: rgba(0, 0, 0, 0.45)">“</text>  
                        <text @click.stop="navTo('/pages/my/art_detail?id=1')" class="zy--main">用户协议</text>  
                        <text style="color: rgba(0, 0, 0, 0.45)">”和“</text>  
                        <text @click.stop="navTo('/pages/my/art_detail?id=2')" class="zy--main">隐私政策</text>  
                        <text style="color: rgba(0, 0, 0, 0.45)">"</text>  
                    </view>  
                </view>  
            </view>  

            <view class="z zy--fixed-b-box" v-if="system_hotline && !isKeyboard">  
                <view class="zy--000-45 zy--font-26" @tap="call_phone(system_hotline)">如有疑问请联系平台客服,联系电话:{{ system_hotline }}</view>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            /* 登录方式切换 */  
            list: [  
                {  
                    name: '账户登录'  
                },  
                {  
                    name: '手机登录'  
                }  
            ],  
            type: 0,  
            /* 倒计时 */  
            seconds: 60,  
            /* 手机验证码提示文字 */  
            tips: '',  
            /* 验证码图片 */  
            img_verify: '',  
            /* 同意协议 */  
            checked: false,  
            /* 是否显示密码 */  
            showPassword: false,  
            /* 手机号 */  
            mobile: '',  
            /* 短信验证码 */  
            verify_code: '',  
            /* 账号 */  
            account: '',  
            /* 密码 */  
            password: '',  
            /* 图片验证码值 */  
            verify_img: '',  
            // 新增:键盘弹起标志  
            isKeyboard: false  
        };  
    },  
    onLoad() {  
        /* 获取图片验证码 */  
        this.getVerify();  
        // #ifdef H5  
        window.addEventListener('resize', this.onResize);  
        // #endif  
    },  
    onUnload() {  
        // #ifdef H5  
        window.removeEventListener('resize', this.onResize);  
        // #endif  
    },  
    methods: {  
        submit() {  
            if (this.type == 0) {  
                /* 账号密码登录 */  
                if (!this.account) {  
                    this.toast('请输入账号');  
                    return;  
                }  
                if (!this.password) {  
                    this.toast('请输入密码');  
                    return;  
                }  
                if (!this.verify_img) {  
                    this.toast('请输入验证码');  
                    return;  
                }  
                if (!this.checked) {  
                    this.toast('请阅读并同意相关协议');  
                    return;  
                }  
                uni.showLoading({  
                    title: '登录中',  
                    mask: true  
                });  
            } else {  
                /* 手机号登录 */  
                if (!this.mobile || this.mobile.length < 11) {  
                    this.toast('无效手机号');  
                    return;  
                }  
                if (!this.verify_code) {  
                    this.toast('请输入验证码');  
                    return;  
                }  
                if (!this.checked) {  
                    this.toast('请阅读并同意相关协议');  
                    return;  
                }  
                uni.showLoading({  
                    title: '登录中',  
                    mask: true  
                });  
            }  
        },  
        changeType(e) {  
            this.type = e.index;  
        },  
        changePassword() {  
            this.showPassword = !this.showPassword;  
        },  
        /* 切换同意协议 */  
        checkedChange(e) {  
            if (e.length == 1) {  
                this.checked = true;  
            } else {  
                this.checked = false;  
            }  
        },  
        /* 获取图片验证码 */  
        getVerify() {  
            this.img_verify = this.baseUrl + '/store/account/img_verify?t=' + new Date().getTime();  
        },  
        /* 倒计时文字设置 */  
        codeChange(text) {  
            this.tips = text;  
        },  
        /* 获取手机验证码 */  
        getCode() {  
            if (this.$refs.uCode.canGetCode) {  
                if (!this.mobile || this.mobile.length < 11) {  
                    this.toast('无效手机号');  
                    return;  
                }  
                uni.showLoading({  
                    title: '正在获取验证码',  
                    mask: true  
                });  
                send_sms({  
                    mobile: this.mobile,  
                    type: 'login'  
                }).then((res) => {  
                    uni.hideLoading();  
                    this.toast(res.msg);  
                    if (res.code == 1) {  
                        this.$refs.uCode.start();  
                    }  
                });  
            } else {  
                this.toast('倒计时结束后再发送');  
            }  
        },  
        end() {  
            /* 倒计时结束 */  
        },  
        start() {  
            /* 倒计时开始 */  
        },  
        // 新增:监听键盘弹起/收起  
        onResize() {  
            // 兼容大部分输入法弹起时,window.innerHeight 会变小  
            if (document.activeElement && (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA')) {  
                this.isKeyboard = true;  
            } else {  
                this.isKeyboard = false;  
            }  
        },  
        onInputFocus() {  
            this.isKeyboard = true;  
        },  
        onInputBlur() {  
            this.isKeyboard = false;  
        }  
    }  
};  
</script>  

<style lang="scss">  
page {  
    background-color: #fff;  
}  

::v-deep .u-input {  
    height: 88rpx;  
    box-sizing: border-box;  

    &.u-border {  
        border-color: rgba(217, 217, 217, 1) !important;  
    }  
}  
</style>  

操作步骤:

进入到该页面,APP会报TypeError: Cannot read property 'activeElement' of undefined

预期结果:

不应该存在的bug

实际结果:

APP会报TypeError: Cannot read property 'activeElement' of undefined

bug描述:

APP进入到onResize方法,H5没有反应

2025-07-15 18:33 负责人:无 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

您好,麻烦发个可复现demo

  • m***@qq.com (作者)

    传了个demo在文章里面了,你能看到吗

    2025-07-15 18:43

  • DCloud_UNI_JBB

    回复 m***@qq.com: 看到了

    2025-07-15 18:44

要回复问题请先登录注册