uview/小程序可视化表单代码生成器文档-阿里云开发者社区

DIY可视化可视化表单可视化是一种高效、灵活、易用的表单设计工具。它通过拖拽式操作、属性配置、所见即所得等特性降低了表单设计的门槛，提高了开发效率和灵活性。

拖拽式操作

用户可以通过拖拽组件到设计区域，快速构建表单布局。这种操作方式简单直观，降低了表单设计的门槛。

属性配置

支持对表单组件进行属性配置，如字段名、数据类型、验证规则等。用户可以根据自己的需求，灵活设置表单组件的属性。

表单默认支持表单及JSON两种数据格式数据的提交，其中表单提交地址是必须的，它会当你发起表单提交数据时，请求此地址。

所见即所得

在设计过程中，用户可以直接看到表单的渲染效果，便于及时调整和优化。这种所见即所得的特性，提高了设计的准确性和效率。

表单提前后逻辑加工

在实际操作过程中，表单可能涉及到表单数据的二次加工，此时我们支持在提交前增加自己的逻辑代码，同样支持提交后逻辑处理。

表单提交前后处理举例

可以结合生成的表单代码进行增加自己的逻辑代码。以页面模板里，表单提交为例。

设置表单提交按钮

拖个按钮组件或者其他类型的组件，在组件上配置点击事件，选择表单提交事件。有个重点，必须是把此组件同样放在表单组件里。

表单外部配置点击提交事件

可以先拖个按钮组件进表单组件，配置上点击事件提交表单，点击查看源码。

表单验证

输入组件非空判断

我们找到验证规则里增加非空判断。

密码一致性判断

经常见到密码一致性判断，采用一致性判断，数值为字段标识路径

自定义验证

这里支持非空判断及自定义验证，支持提交API进行唯一性判断。

自定义验证代码参考，大家根据自己的自定义验证规则来改变下面的代码即可。

validator: async (rule, val, callback) => {
  if (!val) {
    return Promise.reject("用户名不能为空");
  }
  let http_url = '验证地址';
  let http_header = {};
  let data = await this.$http.post(http_url, http_data, http_header, 'json');
  //验证通过用Promise.resolve(),不通过用Promise.reject("用户名已存在")
  if (data.code=200) {
    return Promise.resolve();
  }else {
    return Promise.reject("用户名已存在");
  }
}

至此，表单组件常规用法就到这里了，表单里输入组件更多的配置属性大家根据自己需求来设置。

DIY可视化表单优势

提高开发效率：通过拖拽、配置等操作，快速生成表单，减少开发时间。

降低开发成本：无需专业开发人员，降低人力成本。

灵活性强：支持自定义表单组件和属性，满足不同场景的需求。

易于维护：表单设计与代码分离，便于后续维护和升级。

组件丰富：提供了丰富表单组件库以满足多样化需求。

表单代码生成多样化

设计好的可以一键生成Vue代码、Uniapp、uView代码、微信小程序原生代码、支付宝小程序原生代码等。其中生成的Uniapp源码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/FinClip）等多个平台

生成Uniapp uView代码

<template>
  <view class="container container327193">
    <view class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex7-clz">
      <!-- #ifdef MP-WEIXIN -->
      <view class="flex flex-wrap diygw-col-24 flex-direction-column flex8-clz"> </view>
      <!--  #endif -->
    </view>
    <u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
      <view class="flex diygw-col-24">
        <!-- #ifdef MP-WEIXIN -->
        <button open-type="chooseAvatar" class="diygw-avatar diygw-avatar-button avatar-avatar radius" @chooseavatar="chooseFormAvatar">
          <image mode="aspectFit" class="diygw-avatar-img radius" :src="form.avatar"></image>
        </button>
        <!--  #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view class="diygw-avatar diygw-avatar-button radius" @tap="uploadFormAvatar">
          <image mode="aspectFit" class="diygw-avatar-img radius" :src="form.avatar"></image>
        </view>
        <!--  #endif -->
      </view>
      <text class="diygw-col-24 text-clz"> 点击上方图标设置头像 </text>
      <u-form-item class="diygw-col-24 username-clz" labelPosition="top" prop="username">
        <text class="diy-icon-people margin-right-xs" style="color: #676767; font-size: 32rpx"></text>
        <u-input :focus="formData.usernameFocus" placeholder="请输入登录名" v-model="form.username"></u-input>
      </u-form-item>
      <u-form-item class="diygw-col-24 nickname-clz" labelPosition="top" prop="nickname">
        <text class="diy-icon-people margin-right-xs" style="color: #636363; font-size: 32rpx"></text>
        <u-input :focus="formData.nicknameFocus" placeholder="请输入显示名" v-model="form.nickname"></u-input>
      </u-form-item>
      <u-form-item class="diygw-col-24 password-clz" labelPosition="top" prop="password">
        <text class="diy-icon-lock margin-right-xs" style="color: #636363; font-size: 32rpx"></text>
        <u-input :focus="formData.passwordFocus" placeholder="请输入密码" v-model="form.password" type="password" :password-icon="true"></u-input>
      </u-form-item>
      <u-form-item class="diygw-col-24 confirmpassword-clz" labelPosition="top" prop="confirmpassword">
        <text class="diy-icon-lock margin-right-xs" style="color: #636363; font-size: 32rpx"></text>
        <u-input :focus="formData.confirmpasswordFocus" placeholder="请输入确认密码" v-model="form.confirmpassword" type="password" :password-icon="true"></u-input>
      </u-form-item>
      <view class="flex diygw-col-24 justify-between flex-nowrap flex1-clz">
        <view class="flex flex-wrap diygw-col-0" @tap="navigateTo" data-type="page" data-url="/pages/null" data-redirect="1">
          <text class="diygw-col-0"> 已有账号，立即登录。 </text>
          <text @tap="navigateTo" data-type="page" data-url="/pages/login" class="diygw-col-0 text2-clz"> 登录 </text>
        </view>
      </view>
      <text @click="submitForm" class="diygw-col-24 gradual-green text4-clz"> 注册 </text>
      <view class="flex flex-wrap diygw-col-0 items-center flex3-clz">
        <view class="flex flex-wrap diygw-col-0 items-center" @tap="navigateTo" data-type="agreeFunction">
          <text v-if="globalData.agree == '1'" class="flex icon3 diygw-col-0 icon3-clz diy-icon-roundcheck"></text>
          <text v-if="globalData.agree != '1'" class="flex icon2 diygw-col-0 icon2-clz diy-icon-round"></text>
          <text class="diygw-col-0"> 注册即同意并接受 </text>
        </view>
        <text @tap="navigateTo" data-type="page" data-url="/pages/null" data-newstype="privacy" class="diygw-col-0 text11-clz"> 《隐私权政策》 </text>
        <text class="diygw-col-0"> 和 </text>
        <text @tap="navigateTo" data-type="page" data-url="/pages/null" data-newstype="user" class="diygw-col-0 text13-clz"> 《用户协议》 </text>
      </view>
    </u-form>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: { logintype: '0', agree: '0' },
        form: {
          avatar: '/static/avatar.png',
          username: '',
          nickname: '',
          password: '',
          confirmpassword: ''
        },
        formRules: {
          username: [
            {
              trigger: ['change', 'blur'],
              required: true,
              validator: async (rule, val, callback) => {
                if (!val) {
                  return Promise.reject('用户名不能为空');
                }
                let http_url = '验证地址';
                let http_header = {};
                let data = await this.$http.post(http_url, http_data, http_header, 'json');
                //验证通过用Promise.resolve(),不通过用Promise.reject("用户名已存在")
                if ((data.code = 200)) {
                  return Promise.resolve();
                } else {
                  return Promise.reject('用户名已存在');
                }
              }
            }
          ],
          nickname: [
            {
              trigger: ['change', 'blur'],
              required: true,
              message: '显示名不能为空'
            }
          ],
          password: [
            {
              trigger: ['change', 'blur'],
              required: true,
              message: '密码不能为空'
            }
          ],
          confirmpassword: [
            {
              trigger: ['change', 'blur'],
              required: true,
              message: '确认密码不能为空'
            },
 
            {
              trigger: ['change', 'blur'],
              message: '请输入相同密码',
              validator: (rule, val, callback) => {
                return val == this.form.password;
              }
            }
          ]
        },
        formData: {
          usernameFocus: false,
          nicknameFocus: false,
          passwordFocus: false,
          confirmpasswordFocus: false
        }
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    onReady() {
      this.$refs.formRef?.setRules(this.formRules);
    },
    methods: {
      async init() {
        await this.initResetform();
      },
      // 同意或不同意 自定义方法
      async agreeFunction(param) {
        let thiz = this;
        //如果不同意，改为同意
        this.globalData.agree = this.globalData.agree == '1' ? '0' : '1';
      },
 
      // 验证码登录或密码登录 自定义方法
      async codeFunction(param) {
        let thiz = this;
        //如果1表示验证码登录，0表进密码登录
        this.globalData.logintype = this.globalData.logintype == '1' ? '0' : '1';
      },
      chooseFormAvatar(e) {
        const { avatarUrl } = e.detail;
        let baseavatarUrl = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync(avatarUrl, 'base64');
        this.form.avatar = baseavatarUrl;
      },
      async uploadFormAvatar(e) {
        await this.uploadImage(this, 'form.avatar', 'formData.avatarDatas', '/sys/storage/upload', 1, 'avatar');
      },
      initResetform() {
        this.initform = JSON.stringify(this.form);
      },
      resetForm() {
        this.form = JSON.parse(this.initform);
      },
 
      async submitForm(e) {
        this.$refs.formRef?.setRules(this.formRules);
 
        this.$nextTick(async () => {
          let valid = await this.$refs.formRef.validate();
          if (valid) {
            //保存数据
            let param = this.form;
            let header = {};
            let url = '/admin/login/register';
 
            if (this.globalData.agree != '1') {
              this.showToast('请点击同意授权协议');
              return;
            }
            param.logintype = this.globalData.logintype;
            let res = await this.$http.post(url, param, header, 'json');
            if (res.code == 200) {
              this.$session.setUser(res.data);
              this.showToast(res.msg, 'success');
              this.navigateTo({
                type: 'page',
                url: 'index'
              });
            } else {
              this.showToast(res.msg, 'error');
            }
            if (res.code == 200) {
              this.showToast(res.msg, 'success');
            } else {
              this.showModal(res.msg, '提示', false);
            }
          } else {
            console.log('验证失败');
          }
        });
      }
    }
  };
</script>
 
<style lang="scss" scoped>
  .flex7-clz {
    padding-top: 80rpx;
    padding-left: 10rpx;
    padding-bottom: 40rpx;
    padding-right: 10rpx;
  }
  .flex8-clz {
    height: 120rpx;
  }
  .text-clz {
    color: #717070;
    text-align: center;
  }
  .username-clz {
    margin-left: 10rpx;
    width: calc(100% - 10rpx - 10rpx) !important;
    font-size: 28rpx !important;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .nickname-clz {
    margin-left: 10rpx;
    width: calc(100% - 10rpx - 10rpx) !important;
    font-size: 28rpx !important;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .password-clz {
    margin-left: 10rpx;
    width: calc(100% - 10rpx - 10rpx) !important;
    font-size: 28rpx !important;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .confirmpassword-clz {
    margin-left: 10rpx;
    width: calc(100% - 10rpx - 10rpx) !important;
    font-size: 28rpx !important;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .flex1-clz {
    padding-top: 16rpx;
    padding-left: 30rpx;
    padding-bottom: 16rpx;
    padding-right: 30rpx;
  }
  .text2-clz {
    color: #39b54a;
  }
  .text4-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 120rpx;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 6rpx !important;
    padding-left: 10rpx;
    font-size: 32rpx !important;
    padding-bottom: 20rpx;
    border-top-right-radius: 120rpx;
    margin-right: 30rpx;
    margin-left: 30rpx;
    box-shadow: 0rpx 6rpx 14rpx rgba(64, 195, 3, 0.35);
    overflow: hidden;
    width: calc(100% - 30rpx - 30rpx) !important;
    border-top-left-radius: 120rpx;
    margin-top: 10rpx;
    border-bottom-right-radius: 120rpx;
    margin-bottom: 10rpx;
    text-align: center;
    padding-right: 10rpx;
  }
  .flex3-clz {
    padding-top: 16rpx;
    padding-left: 30rpx;
    padding-bottom: 16rpx;
    padding-right: 30rpx;
  }
  .icon3-clz {
    color: #39b54a;
  }
  .icon3 {
    font-size: 40rpx;
  }
  .icon2-clz {
    color: #39b54a;
  }
  .icon2 {
    font-size: 40rpx;
  }
  .text11-clz {
    color: #39b54a;
  }
  .text13-clz {
    color: #39b54a;
  }
  .container327193 {
    background-image: url(/static/mbz704.png);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
  }
</style>

uview/小程序可视化表单代码生成器文档