小程序的表单的组件化封装及使用

标签:程序,表单,组件,封装,使用 发布时间:2020年05月28日 点击4

表单一向是类web项目中开发的难点,表单涉及UI,交互,校验,接口,回填等各种坑点,设计表单模块时必要有一个同一的设计思想西安人事考试报名,在`queryUI`项目中,我们同一了表单的结构,雄厚了表单的API,赋予了各种表单的联动支撑

  • 配置化表单
  • 同一的表单结构
  • 雄厚的API,简化出错,提醒等操作
  • 支撑任一表单元素之间的联动
  • 原生微信所有表单组件支撑

引入queryUI

引入 queryUI 的核心库百度关键词排名,请参考 GITHUB

示例代码

https://github3564/webkixi/aotoo-xquery 
=> pages/form    
复制代码

表单组件的使用

queryUI 表单由配置文件生成,表单属性构成大致如下图

文本表单使用

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" /> 
复制代码

js

const Pager = require('../../components/aotoo/core/index')
const config = [
  {
    title: '文本框表单区域',
    desc: '说明信息',
    input: [
      {
        id: 'aaa', type: 'text', title: '文本', placeholder: '数字输入键盘', 
        error: '错误信息',
        desc: '说明信息'
        bindblur: 'onbindblur',
        bindinput: 'onbindinput',
        bindfocus: 'onbindfocus',
        bindconfirm: 'onbindconfirm',
        bindkeyboardheightchange: 'onbindkeyboardheightchange',
      },
    ]
  },

  {
    title: '数字表单区域',
    input: [
      {id: 'ccc', type: 'number', title: '整数型', placeholder: '数字输入键盘', bindblur: 'onBlur'},
      {id: 'ddd', type: 'idcard', title: '身份证', placeholder: '身份证输入键盘', bindblur: 'onBlur'},
      {id: 'eee', type: 'password', title: '密码串', maxlength: 30, placeholder: '隐蔽的密码串', bindblur: 'onBlur'}
    ]
  },

  {
    title: 'TEXTAREA',
    input: [
      {id: 'aaa', type: 'textarea', title: '文本域', placeholder: '输入笔墨', bindblur: 'onBlur'},
    ]
  },
]

const mthSet = {
  onbindblur(e) {
    console.log('=====text', e.detail.value);
  },
  onbindinput(e) {
    console.log('=====text', e);
  },
  onbindfocus(e) {
    console.log('=====text', e);
  },
  onbindconfirm(e) {
    console.log('=====text', e);
  },
  onbindkeyboardheightchange(e) {
    console.log('=====text', e);
  },
}

Pager({
  data: {
    formConfig: {
      $$id: 'myForm',
      formStyle: 'width: 90vw;',
      data: config,
      methods: mthSet
    },
  }
})
复制代码

slider表单

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
复制代码

js

const Pager = require('../../components/aotoo/core/index')
const config = [
  {
    title: '事件绑定',
    input: [
      {
        id: 'test_slider',
        title: 'slider',
        type: 'slider',
        value: 50,
        bindchange: 'onSliderChange',
        bindchanging: 'onSliderChanging',
      }
    ]
  },
],

const mthSet = {
  onSliderChange(e){
    console.log('======= slider change', e);
  },
  onSliderChanging(e){
    console.log('======= slider changing', e);
  },
}

Pager({
  data: {
    formConfig: {
      $$id: 'myForm',
      formStyle: 'width: 90vw;',
      data: config,
      methods: mthSet
    },
  }
})
复制代码

复选框/单选框及表单事件绑定

同步微信小程序官方原生方法

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />
复制代码

js

const Pager = require('../../components/aotoo/core/index')
const config = [
  {
    title: '事件绑定',
    input: [
      {
        name: 'test_checkbox1',
        type: 'checkbox',
        title: '复选框',
        value: ['1', '3'],
        values: ['1', '2', '3'],
        titles: ['篮球', '足球', '羽毛球'],
        bindchange: 'onbindchange'
      }
    ]
  },
],

const mthSet = {
  onbindchange(e) {
    console.log('======= checkbox', e);
  },
}

Pager({
  data: {
    formConfig: {
      $$id: 'myForm',
      formStyle: 'width: 90vw;',
      data: config,
      methods: mthSet
    },
  }
})
复制代码

评分表单事件绑定

原生组件不包含此类型表单,此表单类型为`queryUI`特有

  • 支撑默认赋值
  • 支撑点击赋值
  • 支撑拖动赋值

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
复制代码

js

const Pager = require('../../components/aotoo/core/index')
const config = [
  {
    itemClass: 'input-rating-list',
    title: '评分表单',
    input: {
      id: 'ratingit',
      title: '服务态度',
      type: 'rating',
      value: 4,  // 默认值
      max: 7, // 最大星星数
      tap: 'ratingChecked',  // 相应点击/滑动事件回调
    }
  },
]

const mthSet = {
  ratingChecked(e, param) {
    console.log('======= rating', e);
  },
}

Pager({
  data: {
    formConfig: {
      $$id: 'myForm',
      formStyle: 'width: 90vw;',
      data: config,
      methods: mthSet
    },
  }
})
复制代码

picker表单事件绑定

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
复制代码

js

const Pager = require('../../components/aotoo/core/index')
    const config = [
      {
        title: '事件绑定',
        input: [
          {
            id: 'test_pickers2',
            type: 'picker',
            title: '题目',
            values: [
              [
                {title: '猫科', id: '100', select: true},
                {title: '狗科', id: '101'},
              ],
              [
                {title: '老虎', id: '102'},
                {title: '狮子', id: '103'},
                {title: '豹子', id: '104', select: true},
                {title: '野狗', id: '105'},
              ],
            ],
            bindchange: 'pickerChange',
            bindcolumnchange: 'columnChangeAction',
          },
        ]
      },
    ],

    const mthSet = {
      pickerChange(e) {
        console.log(e);
      },
      columnChangeAction(e){
        if (e.detail.column === 0) {
          if (e.detail.value === 0) {
            this.updateNextColumn([  // 更新下一列
              {title: '老虎', id: '102'},
              {title: '狮子', id: '103'},
              {title: '豹子', id: '104', select: true},
              {title: '野狗', id: '105'},
            ])
          }
          if ( e.detail.value === 1) {
            this.updateNextColumn([ // // 更新下一列
              {title: '老虎', id: '102'},
              {title: '狮子', id: '103', select: true},
            ])
          }
        }
      },
    }

    Pager({
      data: {
        formConfig: {
          $$id: 'myForm',
          formStyle: 'width: 90vw;',
          data: config,
          methods: mthSet
        },
      }
    })
复制代码

this.updateNextColumn方法为更新下一列数据,输入数组

取值

我们可以通过事件方法(e.detail.value)取值花生酱机,同时提供 getValue() 方法打包钢带,一次性获取所有表单的值

  • getValue([id])

    通过form的实例获取表单元素的值

    1. 设置id 获取指定id的表单元素值
    2. 不指定id 获取所有表单元素的值

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
复制代码

js

const Pager = require('../../components/aotoo/core/index')
const config = [
  {
    title: '事件绑定',
    input: [
      {
        id: 'aaa', type: 'text', title: '文本', placeholder: '请输入相干笔墨',
        value: '辛费力苦,苦苦逼逼',
        bindblur: 'onbindblur',
      },
    ]
  },
]

const mthSet = {
  onbindblur(e) {
    console.log('=====text', e.detail.value);
    let result = this.getValue()  // 返回一个id为key名的对象,包含表单元素的实时value,type等属性
  },
}

Pager({
  data: {
    formConfig: {
      $$id: 'myForm',
      formStyle: 'width: 90vw;',
      data: config,
      methods: mthSet
    },
  }
})
复制代码

表单赋值

点击按钮给表单赋值

  • setValue(id, value) 为某个指定id的表单赋值

  • empty([id]) 清空所有表单,或者清空指定id的表单

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
复制代码

js

const Pager = require('../../components/aotoo/core/index')
const config = [
  {
    title: '事件绑定',
    input: [
      {
        id: 'aaa', type: 'text', title: '文本', value: '好好学习'
      },
      {
        id: 'bbb', type: 'text', title: '文本', value: '每天向上'
      },
      {
        id: 'ccc', type: 'button', size: 'default', value: '点击清空', placeholder: '配置为无效表单',
        itemStyle: 'height: 50px; line-height: 50px; background-color: red;',
        tap: 'onTap'
      },
    ]
  },
]

const mthSet = {
  onTap(e) {
    this.empty()  // 默认清空所有表单value, this.empty('aaa') 指定清空aaa
    this.setValue('ccc', '点击清空')  // 由于button的value被清空了,重新赋值
  }
}

Pager({
  data: {
    formConfig: {
      $$id: 'myForm',
      formStyle: 'width: 90vw;',
      data: config,
      methods: mthSet
    },
  }
})
复制代码

设置提醒信息

上例中请任意输入数据,或者精确输入111

  • addWarn(id, message)

    添加警告信息

  • removeWarn(id)

    移除警告信息

  • addDesc(id, message)

    添加警告信息

  • removeDesc(id)

    移除警告信息

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
复制代码

js

const Pager = require('../../components/aotoo/core/index')
const config = [
  {
    title: '事件绑定',
    input: [
      {
        id: 'aaa', type: 'text', title: '文本', placeholder: '请输入相干笔墨',
        bindblur: 'onbindblur',
      },
    ]
  },
]

const mthSet = {
  onbindblur(e) {
    let value = e.detail.value
    if (value !== '111') {
      this.addWarn('aaa', '请输入精确信息')
    } else {
      this.removeWarn('aaa')
    }
  }
}

Pager({
  data: {
    formConfig: {
      $$id: 'myForm',
      formStyle: 'width: 90vw;',
      data: config,
      methods: mthSet
    },
  }
})
复制代码
手机网站建设