个人中心 | 微信开放社区

表单组件使用小练习——制作一套微信风格的动态表单

表单组件使用小练习笔记——制作一套微信风格的动态表单写在前面使用git仓库的quick start进行快速体验一番： WeuiDynamicForm (gitee.com) 一、效果一次网络维修的工单提交流程是这样的：用户选择服务->小程序获取该服务所指定的表单设置数据->小程序展示表单-> 用户按照格式进行填写->小程序根据表单设置进行数据校验->小程序提交表单 [图片] 二、需求通过json或js数据对表单进行渲染表单组件可以输入和输出数据三、思路 [图片] 传入一个组件数据对象list，通过[代码]wx:for[代码]和[代码]wx:if[代码]去判断“组件类型、组件设置”；表单组件能够正常将值传递到表单待校验的数据中；伪代码： [图片] 四、开干 1、通过表单设置对表单进行渲染（一）新建项目，通过NPM的方式引入同微信原生视觉体验一致的UI组件库weui （1）通过useExtendedLib方式引入weui组件库通过npm或useExtendedLib方式引入组件库 | 微信开放社区 (qq.com) 顺便看看官方的组件展示，可以归纳为以下这些选择列表：选项会以列表的方式展示 [图片] 输入框包含标题：一种样式； [图片] 输入框包含标题及按钮； [图片] 日期输入框； [图片] 图片选择框 [图片] （2）先放下一个大表单 [图片] （3）再搭建一个单一表单组件的样子，通过[代码]wx:for[代码]进行遍历， [图片] （二）将单个组件的设置传入对应的表单组件中 [图片] 其实就是把每个元素的设置都传进去就好了，输入框同理（三）将部分特殊的组件独立出一个组件可以不分开，但考虑到代码的整洁，决定将一些复杂的组件独立出来这里以图片选择组件为例（1）图片选择器创建一个新的组件，组件中引入weui的uploader，然后将官方文档的[代码]wxml[代码] [代码]js[代码]代码粘贴进来Uploader | 微信开放文档 (qq.com) [图片] [代码]{ "component": true, "usingComponents": { "mp-uploader": "weui-miniprogram/uploader/uploader" } } [代码] 在大表单中引入自定义组件，包括两步，在json中配置[代码]usingComponents[代码]，然后放入组件的标签，传入单个表单组件的数据 [图片] 再在自定义组件中，将部分官方放的静态数据替换成动态的 [图片] 从官方文档中，我们可以看出这个图片上传组件的工作流程是这样的： [图片] 那我们的工作就简单了，我们只需要实现[代码]uploadFile[代码]里面的上传函数即可，最后在[代码]uploadSuccess[代码]方法里面将事件传递出去组件间通讯，仅传递事件如图，我们需要在[代码]my-uploader.js[代码]里的[代码]uploadSuccess[代码]里面使用[代码]this.triggerEvent[代码]将事件传递上去，注意，这只是说明操作逻辑的图，不代表实际传递过程。 [图片] 操作过程在最外层的[代码]<my-uploader/>[代码]里绑定事件在[代码]my-uploader.js[代码]的图片上传成功回调里面使用[代码]this.triggerEvent()[代码]触发事件 [图片] [图片] （2）图形验证码组件 [图片] 我们需要实现验证码的生成，将组件输入框及验证码加密后的数据传递到表单页中图像生成：使用云函数配合[代码]captchapng[代码]库生成base64编码的验证码图片字符串并返回； [图片] 验证码校验：将用户输入结果使用配置数据库的盐值进行解密 [代码]npm install --save captchapng[代码] [代码]var captchapng = require('captchapng') [代码] [代码] var vcodeInt = parseInt(Math.random() * 9000 + 1000) var vcodeRaw = new captchapng(80, 30, vcodeInt) // width,height,numeric captcha vcodeRaw.color(0, 0, 0, 0) // First color: background (red, green, blue, alpha) vcodeRaw.color(80, 80, 80, 255) // Second color: paint (red, green, blue, alpha) var vcodeRaw64 = vcodeRaw.getBase64() var vcodeBase64 = new Buffer(vcodeRaw64, 'base64') //选择性进行MD5加盐 //设置加密字符串 var salt = '' //在原来的字符串的基础上加上一些特殊文本 var vcodeEncrypt = md5(salt + vcodeInt) return { openid: OPENID, vcodeImg: vcodeBase64.toString('base64', 0), vcodeEncrypt: vcodeEncrypt } [代码] 拿到图片的base64字符串后，在<image/>里进行回显 [图片] 当然，图片的点击会再次召唤新的验证码 2、表单数据校验 Form | 微信开放文档 (qq.com) 从文档得知，表单数据校验需要设置“规则”和“需校验数据”，重点：了解“规则”和“数据”是如何联系的（一）传入规则及数据规则设置及传入将包含一整个表单规则的数组丢进去即可 [图片] 需校验的数据将整个表单的数据传入即可 [图片] （二）将“规则”和“数据”联系起来（1）阅读官方的规则，发现是这样连起来的规则名称对应models对象的一个结点名称 [代码] <mp-form id="form" rules="{{formConfig.rules}}" models="{{formData}}"> [代码] [代码]{ name: 'ticketClass', rules: {required: true, message: '分类多少选一个吧'}, } [代码] 如上述规则，他的名字是[代码]ticketClass[代码]，那如果需要对他进行校验，那他在大的动态表单[代码]form[代码]里面需要是[代码]formData.ticketClass[代码] [图片] （2）这样的目标就很明确了，我们需要对[代码]formData[代码]进行赋值，名称是这个字段的名称，值是输入值普通表单组件官方demo里面，每个表单组件都有一个属性[代码]data-feild[代码] [图片] 在每次对组件进行事件监听时，在返回的事件对象中，我们可以在 [代码]event.currentTarget.dataset[代码]中找到数据名称 [代码]event.detail.value[代码]中找到数据值 [图片] 然后，我们将“名称”和“值”放到[代码]formData[代码]上，使用[代码]this.setData({})[代码]方法进行赋值，其中，值的名称是动态的，采用一个小点，不是单引号！（因为在markdown的缘故，无法在这单独打这样一个点出来，自行体会一下，常规的87 104键键盘会在左上角数字1的左边，[代码]点${能返回值的函数或者值}点[代码]是ES6新增的字符串方法） [代码] const { field } = event.currentTarget.dataset this.setData({ [`formData.${field}`]: event.detail.value }) [代码] [图片] 五、小提问可否通过设置表单id的方式，一次性生成多张表单呢？如何使用<slot/>的方式优化渲染性能呢？

GitHub账号

选择需要上架的开放服务

案例类型