6***@qq.com
6***@qq.com
  • 发布:2022-06-06 17:26
  • 更新:2022-06-07 08:50
  • 阅读:713

【报Bug】在iOS系统微信小程序真机中,input控件输入与赋值有延迟,会造成数据被替换

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS Monterey 12.4

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

第三方开发者工具版本号: 1.05.2204250

基础库版本号: 2.24.4

项目创建方式: HBuilderX

示例代码:
    <view class="login_bg">  
        <view class="login_content">  
            <view class="login_account">  
                <image class="login_image" src="../../static/icon_login_account.png"></image>  
                <input class="login_input" placeholder="账号" placeholder-style="color:#ffffff" :value="account"  
                    @input="inputChange($event,'账号')" />  
            </view>  
            <view class="login_password">  
                <image class="login_image" src="../../static/icon_login_password.png"></image>  
                <input class="login_input" placeholder="密码" placeholder-style="color:#ffffff" :value="password"  
                    @input="inputChange($event,'密码')" password="true" />  
            </view>  
            <view class="login_switch">  
                <switch checked @change="savePasswordChange" color="#78BC2E" style="transform:scale(0.9);" />  
                <label style="color: white;margin-top: 3px;">保存密码</label>  
                <label style="color: white;margin-top: 3px;margin-left: 30px;" @click="scan()">扫码绑定</label>  
            </view>  
            <button class="login_button" @click="loginTap()">登 录</button>  
        </view>  
        <image class="bg-img" src="/static/bg_login.png"></image>  

    </view>  
</template>  

<script type="module">  
    import {  
        addRequest  
    } from "../../request/request.js"  
    export default {  
        data() {  
            return {  
                imageURL: '/static/bg_login.png',  
                account: "",  
                password: "",  
            }  
        },  
        methods: {  
            inputChange(e, flag) {  
                console.log(flag);  
                switch (flag) {  
                    case '账号':  
                        this.account = e.target.value;  
                        break;  
                    case '密码':  
                        this.password = e.target.value;  
                        break;  
                }  
            },  
            savePasswordChange: function(e) {  
                console.log('switch1 发生 change 事件,携带值为', e.detail.value)  
            },  
            scan() {  
                uni.scanCode({  
                    success: function(res) {  
                        console.log('条码:' + JSON.stringify(res));  
                        console.log('条码类型:' + res.scanType);  
                        console.log('条码内容:' + res.result);  
                    },  
                    fail: function() {  
                        console.log('见鬼了')  
                    }  
                });  

            },  
            loginTap: function(e) {  
                if (this.account == "") {  
                    uni.showToast({  
                        title: "账号不能为空",  
                        icon: "error"  
                    })  
                    return;  
                }  
                if (this.password == "") {  
                    uni.showToast({  
                        title: "密码不能为空",  
                        icon: "error"  
                    })  
                    return;  
                }  
                if (this.state == 0) {  
                    uni.showToast({  
                        title: "该微信号未与任何站绑定,请扫码绑定后使用",  
                        icon: "error"  
                    })  
                    return;  
                }  
                var para = {  
                    "uid": this.account,  
                    "pwd": this.password  
                };  
                para = JSON.stringify(para)  
                var params = {  
                    action: "login",  
                    para: para,  
                    mark: uni.getStorageSync("mark")  
                }  
                this.login(params)  

            },  
            login(params) {  
                addRequest("", params).then(res => {  
                    console.log(res.data)  

                    uni.setStorageSync("account", this.account)  
                    uni.setStorageSync("password", this.password)  
                    uni.setStorageSync("token", res.data.ReturnData.TokenStr)  
                    uni.setStorageSync("UID", res.data.ReturnData.UserInfo.Uid)  
                    uni.setStorageSync("UserName", res.data.ReturnData.UserInfo.UserName)  
                    uni.setStorageSync("OrgType", res.data.ReturnData.UserInfo.OrgType)  
                    uni.setStorageSync("OrgId", res.data.ReturnData.UserInfo.OrgId)  

                    uni.redirectTo({  
                        url: "/pages/home/home",  
                    })  

                }, function(error) {  
                    // failure  
                    uni.showToast({  
                        title: error,  
                        icon: 'none',  
                    })  
                })  
            },  

        },  
        onReady() {  
            var that = this;  
            this.account = uni.getStorageSync("account");  
            this.password = uni.getStorageSync("password");  

        }  
    }  
</script>  

<style>  
    .login_bg {  
        width: 100%;  
        height: 100%;  
        overflow-y: hidden;  
        display: flex;  
    }  

    .bg-img {  
        position: absolute;  
        top: 0;  
        left: 0;  
        width: 100%;  
        height: 100%;  
        z-index: 1;  
        overflow-y: hidden;  
    }  

    .login_content {  
        width: 100%;  
        height: 50%;  
        position: fixed;  
        bottom: 0;  
        margin-bottom: 20%;  
        z-index: 10;  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
    }  

    .login_account {  
        display: flex;  
        width: 60%;  
        height: 35px;  
        background-color: #017AFF;  
        border-radius: 25px;  
        border: 1px solid white;  
        margin-top: 80px;  
    }  

    .login_password {  
        display: flex;  
        width: 60%;  
        height: 35px;  
        background-color: #017AFF;  
        border-radius: 25px;  
        border: 1px solid white;  
        margin-top: 20px;  
    }  

    .login_image {  
        width: 25px;  
        height: 30px;  
        margin-top: 4px;  
        margin-bottom: 2px;  
        margin-left: 10px;  
    }  

    .login_input {  
        width: 70%;  
        height: 33px;  
        margin-left: 10px;  
        color: white;  
    }  

    .login_switch {  
        display: flex;  
        width: 60%;  
        height: 35px;  
        background-color: #017AFF;  
        margin-top: 20px;  
    }  

    .login_button {  
        display: flex;  
        width: 30%;  
        height: 45px;  
        background-color: #78BC2E;  
        justify-content: center;  
        color: white;  
        text-align: center;  
        font-weight: 700;  
        margin-top: 20px;  
    }  
</style>

操作步骤:

见附件视频

预期结果:

在iOS系统微信小程序真机中,input控件输入与赋值没有延迟,不会造成数据被替换掉

实际结果:

在iOS系统微信小程序真机中,input控件输入与赋值有延迟,会造成数据被替换

bug描述:

在微信小程序中使用input,用户一边在输入,小程序一边在向input中赋值,造成冲突,现象为视频中输入框内容异常,示例代码中使用的为value与@input组合,改为v-model依旧有此问题,此问题只在iOS系统微信小程序真机运行中存在,安卓App,安卓手机微信小程序,HbuildX预览,微信开发者工具,H5页面中均不存在

2022-06-06 17:26 负责人:无 分享
已邀请:
小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

你这个没法运行,但是我用input组件试了下没发现你这个问题 你有简单一点的demo工程么

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

    <template>  
    <view class="login_bg">
    <view class="login_content">
    <view class="login_account">

    <input class="login_input" placeholder="账号" placeholder-style="color:#ffffff" v-model="account" />
    </view>
    <view class="login_password">

    <input class="login_input" placeholder="密码" placeholder-style="color:#ffffff" v-model="password" password="true" />
    </view>
    <view class="login_switch">
    <switch checked @change="savePasswordChange" color="#78BC2E" style="transform:scale(0.9);" />
    <label style="color: white;margin-top: 3px;">保存密码</label>
    <label style="color: white;margin-top: 3px;margin-left: 30px;" @click="scan()">扫码绑定</label>
    </view>
    <button class="login_button" @click="loginTap()">登 录</button>
    </view>

    </view>
    </template>

    <script>
    export default {
    data() {
    return {
    account: "",
    password: "",

    }
    },
    onLoad() {

    },

    methods: {

    }
    }
    </script>

    <style>
    .login_bg {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    display: flex;
    }

    .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow-y: hidden;
    }

    .login_content {
    width: 100%;
    height: 50%;
    position: fixed;
    bottom: 0;
    margin-bottom: 20%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    .login_account {
    display: flex;
    width: 60%;
    height: 35px;
    background-color: #017AFF;
    border-radius: 25px;
    border: 1px solid white;
    margin-top: 80px;
    }

    .login_password {
    display: flex;
    width: 60%;
    height: 35px;
    background-color: #017AFF;
    border-radius: 25px;
    border: 1px solid white;
    margin-top: 20px;
    }

    .login_image {
    width: 25px;
    height: 30px;
    margin-top: 4px;
    margin-bottom: 2px;
    margin-left: 10px;
    }

    .login_input {
    width: 70%;
    height: 33px;
    margin-left: 10px;
    color: white;
    }

    .login_switch {
    display: flex;
    width: 60%;
    height: 35px;
    background-color: #017AFF;
    margin-top: 20px;
    }

    .login_button {
    display: flex;
    width: 30%;
    height: 45px;
    background-color: #78BC2E;
    justify-content: center;
    color: white;
    text-align: center;
    font-weight: 700;
    margin-top: 20px;
    }
    </style>

    2022-06-07 08:17

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

    有,你可以用下面这段代码跑一下试试,但是只有iOS系统的微信小程序真机才会有附件视频中的问题,而且要快速输入,才会出现

    2022-06-07 08:20

3***@qq.com

3***@qq.com

我也遇到了相同的问题

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