基于微信小程序 + colorUI 做的form表单封装——input
基于微信小程序 + colorUI 做的form表单封装
前言
一、先看效果
1.picker目前支持的动态配置
2.配置代码
3.效果展示
二、详细步骤
1.引入colorUI和aw
2.使用
3.动态获取数据字典
4.数据校验
总结
上周发了基于微信小程序 + colorUI 做的form表单封装——input之后,喜提三个评论 + 一个码云star,本想尽快整理出其他表单格式,但是年后公司项目开了不少,以至于一直拖到今天,给各位期待更新的小伙伴们(划掉、并没有这样的小伙伴)抱拳了,让你们久等了。
本篇为大家带来的是本系列的第二篇 ——picker(选择器)。表单格式的更新顺序,是按照本公司项目使用表单组件的频率高低更新的,大家更需要怎样的表单组件,请在评论区告诉我,我会提前更新。
由于本插件集成了一部分的业务代码,所以可配置项会少一点,对于与本插件业务符合度高的项目,用着会很方便;但是业务符合度低的,体验肯定会差很多。这个时候,欢迎大家去修改源码,使之符合自己的业务需求,同时我也会尽力将这些组件完善,将代码写的优美一些,让大家可以少走弯路,让我们一起学习、一起进步。
本系列的目的主要是记录学习+交流,非技术科普,大家有什么问题欢迎指出。
求赞求评论求star
/**
* 当且仅当 type === 'picker' 显示该组件
*
* 参数说明
* 公共参数:
* topLine 默认没有上划线,可加
* clearBottomLine 默认有下划线,可删
* label 输入框标题(最大长度为6,溢出隐藏)
* requied 是否必填(显示红星)
* submitName 向后台约定的数据提交字段名,如:姓名 —— name; 性别 —— sex; 年龄 —— age
* disabled 是否禁用
* value 选择的值
* placeholder + noPlaceholder 默认为“‘请选择’ + 输入框标题(label)” 通过placeholder可自定义
* 也可通过noPlaceholder 来清除默认placeholder
*
* 特定参数说明:
* 当mode === 'selector'时, 选择器为单列选择器
* range 范围,目前支持俩种数据类型:
* 第一种:['中国', '美国', '日本']
* 第二种:[{ id: 0, name: '中国' }, { id: 1, name: '美国' }, { id: 2, name: '日本' }]
* rangeKey 当使用第二种jion类型时,需指定展示的字段名称,如该例子就需要指定rangeKey = 'name'
* 第一种类型就不要写这个参数了,切记切记
* dictField 如range是由接口动态获取的,那么在此配置参数,onLoad时会统一查询数据字典(详细代码已封装)
*
* 当mode === 'time'时,选择器为时间选择器
* start - end 有效时间范围的开始or结束 默认不限制
*
* 当mode === 'date'时,选择器为日期选择器
* start - end 有效日期范围的开始or结束 默认不限制
* fields 选择器的粒度,默认为day(天),可改为year(年)、month(月)
*
*/
{ label: '静态-数组', submitName: 'picker1', type: 'picker', mode: 'selector', value: '', requied: true, range: ['是', '否']},
{ label: '静态json', submitName: 'picker2', type: 'picker', mode: 'selector', value: '', requied: true,
rangeKey: 'name', range: [
{ id: '01', name: '美国' },
{ id: '02', name: '中国' },
{ id: '03', name: '巴西' },
{ id: '04', name: '日本' }
]},
{ label: '动态json', submitName: 'picker3', type: 'picker', mode: 'selector', value: '', requied: true, dictField: 'choose', range: [], rangeKey: 'name'},
{ label: '时间选择', submitName: 'picker4', type: 'picker', mode: 'time', value: '', requied: true, start: '05:05', end: '07:10'},
{ label: '日期选择', submitName: 'picker5', type: 'picker', mode: 'date', value: '', requied: true, start: '2021-01-01', end: '2025-01-01', fields: ''}
在form.js中的data里的form数组里增加如下代码
{ label: '静态-数组', submitName: 'picker1', type: 'picker', mode: 'selector', value: '', requied: true, range: ['是', '否']},
{ label: '静态json', submitName: 'picker2', type: 'picker', mode: 'selector', value: '', requied: true,
rangeKey: 'name', range: [
{ id: '01', name: '美国' },
{ id: '02', name: '中国' },
{ id: '03', name: '巴西' },
{ id: '04', name: '日本' }
]},
{ label: '动态json', submitName: 'picker3', type: 'picker', mode: 'selector', value: '', requied: true, dictField: 'choose', range: [], rangeKey: 'name'},
{ label: '时间选择', submitName: 'picker4', type: 'picker', mode: 'time', value: '', requied: true, start: '05:05', end: '07:10'},
{ label: '日期选择', submitName: 'picker5', type: 'picker', mode: 'date', value: '', requied: true, start: '2021-01-01', end: '2025-01-01', fields: ''}
想实现批量获取数据字典,我们只需要在onLoad函数中调用一个事先封装好的getFormDict函数
// picker 批量获取动态数据
const getFormDict = function(form, context) {
form.forEach((item, index) => {
if (item.type === 'picker' && item.dictField && item.dictField !== '') {
/**
* dictionary.getdictField 是封装好的获取数据字典的请求方法,大家可以使用自己的,也可以用我在request中封装好的
* 目的是根据“dictField”值,取后台获取数据字典,并放入range中,就算成功
* */
dictionary.getdictField({name: item.dictField}).then(res => {
if (res.code === 200) { // onshow 获取动态字典请求成功、展示picker单选框
let list = res.data;
context.setData({ ['form['+ index +'].range']: list });
} else { // onshow 获取动态字典请求失败、展示自定义picker-view单选框,picker-view可以在点击的时候获取数据
context.setData({ ['form['+ index +'].showPickerView']: true });
}
}).catch(err => { // onshow 获取动态字典请求失败、展示自定义picker-view单选框,picker-view可以在点击的时候获取数据
console.log(err);
context.setData({ ['form['+ index +'].showPickerView']: true });
})
}
})
};
以formMethods中的getFormDict为例(picker.js中的getRange函数类似,只是一个是批量发起请求,一个是单独发请求)
代码逻辑超简单
(1)遍历form,过滤需要发起数据字典的json;
(2)拼接url,发起请求;
①请求成功,将数据字典塞入json的range中,数据覆盖,结束
②请求失败,将 “showPickerView”赋值为true,picker容器改为picker-view容器(俩个容器样式一样,不必担心视图有变化),到了这一步,picker.js中的getRange方法就能用上了,点击picker-view,可以重新发起请求,并渲染到视图中
将picker.js的getRange方法与formMethods.js的getFormDict方法修改完后,第三个“动态数据”的选择器也应该成功了,现在只差最后一步,数据提交前的校验
这个就更简单了,去form.js中复制submitForm函数,放到自己的form.js中就可以了
/**
* 格式为:['中国', '美国'] 等数组类型的,value值为数组里的item
* 格式为:[{name: '中国', id: '01'}, {name: '美国', id: '02'}]等json数组的,value值为json里的id
* 也可以在submitForm函数中修改要放入value的参数
*/
前面的步骤问题不大,主要是动态数据接口封装那,我可能夹带了自己的一些编程思想,以至于很局限,大家可能会看着不是很舒服,当然我只是提供一个思路,大家完全可以根据自己的编码风格封装一套适合自己的插件,重在交流嘛。
好的,到这里就picker的第一篇就正式结束了,二三级联动会在之后的篇幅中放出,大家觉得有用的话,请给我star鼓励一下。
有什么问题欢迎大家指出昂,再次感谢大家!