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/小程序可视化表单代码生成器文档

拖拽式操作

属性配置

所见即所得

表单提前后逻辑加工

表单提交前后处理举例

设置表单提交按钮

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

表单验证

输入组件非空判断

密码一致性判断

DIY可视化表单优势

表单代码生成多样化

生成Uniapp uView代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

拖拽式操作

所见即所得

表单提前后逻辑加工

表单提交前后处理举例

设置表单提交按钮

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

表单验证

输入组件非空判断

密码一致性判断

DIY可视化表单优势

表单代码生成多样化

生成Uniapp uView代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景