uni-app 开发微信小程序注意点

爱吃的强哥2025-12-21 8:22

1、场景：

uni-app开发微信小程序，使用uni-ui【官方维护的UI组件库】时，需要注意的坑

总之和web开发不一样的地方，我都会称为坑

问题没解决之前，都会想这想那，但是问题解决之后，突然发现，很多时候是疏忽了

2、描述：

1、表单输入框宽度问题

html 复制代码

<uni-card>
      <uni-forms ref="loginFormRef" :modelValue="loginForm" :rules="loginFormRules" label-width="160rpx">
        <uni-forms-item label="用户名：" required name="username">
          <uni-easyinput type="text" v-model="loginForm.username" placeholder="请输入用户名" />
        </uni-forms-item>
        <uni-forms-item label="密码：" required name="password">
          <uni-easyinput type="password" v-model="loginForm.password" placeholder="请输入密码" />
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="handleLogin">登录</button>
    </uni-card>

以上代码功能没问题，但是样式存在问题：

输入框不为空时，后面会展示清空icon，点击清空后，输入框的宽度会比清空前短30px

解决：给表单父元素加上固定宽度

css 复制代码

:deep(.uni-card){
    width: 300px;
  }

2、异常提示

屏幕提示：连接不到服务器，请点击屏幕重试
控制台报错：Global error: TypeError: Cannot read properties of undefined (reading 'on') at index.vue:1:1 async component loader

以上情况大概率是语法不兼容，比如依赖的版本、在js项目中使用了ts语法