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

开发环境	版本号	项目创建方式
Mac	macOS Monterey 12.4	HBuilderX

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

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.4.7

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

基础库版本号：2.24.4

项目创建方式：HBuilderX

示例代码：

<template>
    <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](/user/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](/user/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页面中均不存在

yibo5220 1楼•3 天前

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

sinazl 2楼•3 天前

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

songsunli 3楼•3 天前

我也遇到了相同的问题

eggper 4楼•3 天前

在 uni-app 开发中，iOS 系统微信小程序真机环境下，input 控件的输入与赋值出现延迟，导致数据被替换的问题，通常是由于微信小程序的渲染机制和 uni-app 的框架特性共同作用的结果。以下是一些可能的原因和解决方案：

1. 双向绑定延迟

原因: uni-app 使用 v-model 进行双向绑定，但在某些情况下，iOS 系统的微信小程序中，input 事件触发的频率较高，导致数据更新不及时，从而出现数据被替换的现象。
解决方案: 可以尝试使用 @input 事件手动更新数据，而不是依赖 v-model 的双向绑定。

<template>
  <input :value="inputValue" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      this.inputValue = event.detail.value;
    }
  }
};
</script>

2. 防抖处理

原因: 在快速输入时，input 事件频繁触发，可能导致数据更新不及时或数据被覆盖。
解决方案: 可以使用防抖函数来减少 input 事件的触发频率，确保数据更新稳定。

<template>
  <input :value="inputValue" @input="debouncedInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  created() {
    this.debouncedInput = this.debounce(this.handleInput, 300);
  },
  methods: {
    handleInput(event) {
      this.inputValue = event.detail.value;
    },
    debounce(func, wait) {
      let timeout;
      return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(this, args);
        }, wait);
      };
    }
  }
};
</script>

3. 使用 `setData` 优化

原因: 在微信小程序中，频繁调用 setData 可能会导致性能问题，尤其是在 iOS 设备上。
解决方案: 尽量减少 setData 的调用次数，或者将多个数据更新合并为一次 setData 调用。

<template>
  <input :value="inputValue" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      this.$nextTick(() => {
        this.inputValue = event.detail.value;
      });
    }
  }
};
</script>

4. 检查 `input` 组件的属性

原因: 某些 input 组件的属性（如 type、maxlength 等）可能会影响输入行为。
解决方案: 确保 input 组件的属性设置合理，避免不必要的限制。

<template>
  <input :value="inputValue" @input="handleInput" type="text" maxlength="100" />
</template>

5. 使用 `textarea` 替代 `input`

原因: 在某些情况下，textarea 组件的输入体验可能比 input 更稳定。
解决方案: 如果 input 组件的问题无法解决，可以尝试使用 textarea 组件。

<template>
  <textarea :value="inputValue" @input="handleInput" />
</template>

6. 更新 `uni-app` 和微信开发者工具

原因: 旧版本的 uni-app 或微信开发者工具可能存在已知的 bug。
解决方案: 确保你使用的是最新版本的 uni-app 和微信开发者工具。

7. 调试与日志

原因: 问题可能由其他代码逻辑引起。
解决方案: 在 handleInput 方法中添加日志，检查数据更新的时机和值是否正确。

handleInput(event) {
  console.log('Input value:', event.detail.value);
  this.inputValue = event.detail.value;
}

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