4.1学习对象+课程目的+推荐工具+学习方法 [视频] 4.2微信小程序平台介绍 [视频] 4.3微信开发者工具介绍 [视频] 4.4微信小程序代码框架介绍 [视频] 4.5微信小程序代码wxml学习 [视频] 4.6微信小程序代码wxss学习 [视频] 4.7微信小程序代码js学习 [视频] 4.8微信小程序js中的数据处理 [视频] 4.9微信小程序代码API介绍h [视频] 4.10微信小程序前端实现思路（1） [视频] 4.10微信小程序前端实现思路（2） [视频] 4.11手把手1：注册界面（1） [视频] 4.11手把手1：注册界面（2） [视频] 4.12自主实操1：登录界面 [视频] 4.13手把手2：发布新树洞界面 [视频] 4.14手把手3：树洞广场界面（1） [视频] 4.14手把手3：树洞广场界面（2） [视频] 4.14手把手3：树洞广场界面（3） [视频] 4.15自主实操2：我的树洞界面 [视频] 4.16课后小练 [视频] 4.17本章小结 [视频] 第四章结束后全部代码，点此领取。

表单组件使用小练习笔记——制作一套微信风格的动态表单 写在前面 使用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/>的方式优化渲染性能呢？

前言 今天在写微信小程序前端页面，想引入weui组件库来完成开发。结果按着官方文档来遇到了一堆问题，最后靠着不断百度查资料才最终解决。所以将过程记录一下，避免后面再遇到这类坑。 注意：本文默认读者已知道怎么使用npm 1. 初始化 以管理员身份运行命令行窗口（cmd），在cmd中进入项目的根目录。然后输入以下命令： [代码]npm init [代码] 后面一路按回车健即可，最终会在项目的根目录中创建出一个名为package.json的文件。 2. 安装weui组件库 在cmd中紧接着输入以下命令： [代码]npm install weui-miniprogram [代码] 命令执行完毕后会多出来一个node_modules文件夹，里面包含了weui组件库。 3. 构建npm 在微信开发者工具中，选择“工具”->“构建npm”。如无意外会出现类似“没有找到可以构建的NPM包……”这样的报错。 这时就需要在项目根目录找到package.config.json文件，修改相关的配置如下： [代码]{ ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./" } ] } } [代码] 继续在开发者工具中的“详情”->“本地设置”里检查是否勾选上“使用npm模块”选项，若没勾选则勾选上。 完成上述配置后，重新构建npm，即可构建完成。 4. 重启项目 在开发者工具中“项目”->“重新打开此项目”，完成对项目的重启。 注意：这一步非常重要！！！否则引入组件会提示找不到文件！！！ 5. 引入wxss 在app.wxss中，引入weui库的wxss文件 [代码]@import 'miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'; [代码] 引入时要根据实际情况调整路径，但最长后缀均为 [代码]/weui-miniprogram/weui-wxss/dist/style/weui.wxss [代码] 6. 引入组件 在想要使用组件的页面对应的js文件中，对组件进行的引入。一定要注意自己项目的目录结构！！！ [图片] 而官方文档的写法是 [图片] 如果直接照搬官方文档的写法，则忽略了目录结构，会报错！！ 接着在要使用组件的页面对应的wxml文件中使用该组件即可 [代码]<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}"> <view>test content</view> </mp-dialog> [代码] 效果如下： [图片] 后记 不得不说，前端开发的坑实在是太多了，上面记录的过程我摸索了一个多小时。看来平时一定要多注意总结才行，不然真的非常消耗时间！！！ 创作不易，觉得有用麻烦点个赞，谢谢~~~