用Uniapp开发鸿蒙项目 七

一、写在前面

接着之前的学习，之前应时间关系并没有实现表单功能，今天就来实现表单功能，继续基于现有的 demo1 项目折腾，记录学习过程，新手小伙伴也能跟着一步步实现～

二、实现简单表单功能

（一）需求与页面准备

在首页（index 页面）添加一个简单表单，比如包含姓名、年龄输入框和提交按钮，填写信息后点击提交，模拟数据提交（实际开发可对接接口，这里先做基础演示）。

（二）编写表单代码

打开 ​​pages/index/index.uvue​​，添加表单相关代码：

<template>
  <view class="container">
    <text>这是首页呀</text>
    <!-- 跳转按钮 -->
    <button @click="goToUserPage">去个人页面</button> 
    <!-- 表单区域 -->
    <view class="form-area">
      <view class="form-item">
        <text>姓名：</text>
        <input class="wh" type="text" placeholder="请输入姓名" v-model="formData.name" />
      </view>
      <view class="form-item">
        <text>年龄：</text>
        <input  class="wh" type="number" placeholder="请输入年龄" v-model="formData.age" />
      </view>
      <button class="submit-btn" @click="submitForm">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: ''
      }
    };
  },
  methods: {
    goToUserPage() {
      uni.navigateTo({
        url: '/pages/user/user' 
      });
    },
    submitForm() {
      if (!this.formData.name || !this.formData.age) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      // 这里可实际对接接口，现在先模拟提交，打印数据
      console.log('提交的表单数据：', this.formData);
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin-top: 20rpx;
  padding: 15rpx 30rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 8rpx;
}
.form-area {
  width: 80%;
  margin-top: 30rpx;
}
.form-item {
  display: flex;
  flex-direction: row;

  margin-bottom: 20rpx;
}
.form-item text {
  width: 120rpx;
}
.input {
  flex: 1;
  padding: 10rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
}
.submit-btn {
  width: 100%;
}
.wh{
	width: 50%;
}
</style>

这里用 ​​v-model​​​ 双向绑定表单数据，提交时做简单的非空校验，校验不通过用 ​​uni.showToast​​ 提示，通过的话模拟提交（打印数据并提示成功）。

页面效果：

三、遇到的问题及解决

（一）列表跳转传递数据失败

一开始在传递列表项数据时，忘记用 ​​JSON.stringify​​​ 转成字符串，导致详情页接收不到正确数据。后来加上转换，并且在详情页用 ​​JSON.parse​​ 解析，就解决了问题。所以传递复杂数据（对象、数组等）时，一定要做好序列化和反序列化处理。

（二）表单输入框样式不统一

编写表单样式时，输入框的边框、内边距等样式没设置好，导致页面看起来很凌乱。通过给 ​​input​​​ 统一设置 ​​border​​​、​​padding​​ 等样式，让表单外观更规整。做样式调整时，要多调试，保证不同设备上显示效果一致。

四、总结

今天给项目添加了一个重要功能，完成了简单表单的搭建，包含输入、校验和模拟提交。这些功能都是实际开发中经常用到的，虽然实现起来不算复杂，但把它们整合到项目里，能让项目更完整。后续打算给表单对接真实接口，继续丰富项目。学习就是这样一步步积累，把每个小功能吃透，慢慢就能开发出更复杂的应用啦，继续加油～ 

##Uniapp##三方框架##商务##