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

表单示例

表单一直是类web项目中开发的难点，表单涉及UI,交互，校验，接口，回填等各种坑点，设计表单模块时需要有一个统一的设计思想，在queryUI项目中，我们统一了表单的结构，丰富了表单的API，赋予了各种表单的联动支持

• 配置化表单
• 统一的表单结构
• 丰富的API，简化出错，提示等操作
• 支持任一表单元素之间的联动
• 原生微信所有表单组件支持

如何使用表单组件

首先需要引入queryUI的核心库，请参考GITHUB

示例代码

https://github.com/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
    },
  }
})

评分表单事件绑定

原生组件不包含此类型表单

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

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
    },
  }
})

源码

GITHUB
/pages/form

下列小程序DEMO包含下拉菜单、通用型筛选列表、索引列表、markdown(包含表格)、评分组件、水果老虎机、折叠面板、双栏分类导航(左右)、刮刮卡、日历等组件