目录
- [1 配置必录项](#1 配置必录项)
- [2 配置动态校验项](#2 配置动态校验项)
- [3 完善列表展示](#3 完善列表展示)
- [4 显示就诊码](#4 显示就诊码)
- [5 绘制一维码](#5 绘制一维码)
- 总结
上一节我们介绍了就诊人管理的列表查询、添加、查看详情功能。添加就诊人时，需要增加必要的必填项来约束信息的填写。如果只是一种视图，那么使用表单的默认校验功能就可以，但是我们这里表单里需要通过是否有无身份证来校验必录项，本篇我们就介绍一下通过前端代码来添加校验逻辑。
1 配置必录项
在有无身份证选项切换时，有些字段是都需要填写的，我们用表单字段的必填项来配置。选中姓名组件，打开必填的开关
这样文本前边会添加一个红色的星号，如果不填写内容点击提交按钮，会有提示的文本
2 配置动态校验项
除了基础必录项外，我们还可以通过条件来控制组件的显示和隐藏。但是存在的问题是如果组件配置了必录，但是隐藏后，必录校验依然起作用。要想实现动态校验，我们需要打开组件的渲染配置选项。
点击配置图标
切换到实验室配置，打开组件渲染控制配置
然后给需要动态校验的组件，配置是否渲染属性，这样就可以做到不同的条件校验字段不同
3 完善列表展示
目前我们列表只是显示了基本字段，我们来优化一下样式。首先是根据患者的性别来显示默认头像
先往素材里上传男和女需要的头像
然后在就诊人列表里添加两个图片组件，一个显示男的头像，一个显示女的头像
给图片组件绑定条件展示，根据性别来决定哪个组件显示
然后处理手机号的部分屏蔽，输入如下表达式
bash
$w.item_listView1.phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')4 显示就诊码
点击查看详情页面，我们需要显示就诊码，以二维码的形式显示。在表单提交的时候我们用自动编号来给患者分配了一个就诊码，在详情页我们可以把它放入二维码中。
在页面中添加二维码组件
二维码内容绑定门诊号字段
5 绘制一维码
除了二维码，通常医疗小程序还会有一维码，我们用canvas来画一下一维码。先引入一维码库
bash
https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js然后往页面中添加canvas组件，清空初始化代码
在代码区添加一个javascirpt方法，输入如下代码
bash
export default async function ({ event, data }) {
// 假设门诊号数据源为 data.target (即 data.target 本身就是门诊号字符串)
const clinicNo = data.target || "0001638922";
// 获取canvas实例和上下文（组件ID改为 canvas1）
const canvas = $w.canvas1.canvasInstance
const ctx = $w.canvas1.canvasCtx
// 不再使用视口大小，画布将缩放为条码的精确尺寸
// --- 获取 DPR (设备像素比) 确保兼容性 ---
let dpr = 1;
if ($w.wedaContext.platforms.includes('MP') && typeof wx !== 'undefined' && wx.getWindowInfo) {
const windowInfo = wx.getWindowInfo();
if (windowInfo && windowInfo.pixelRatio) {
dpr = windowInfo.pixelRatio;
}
} else if (typeof window !== 'undefined' && window.devicePixelRatio) {
dpr = window.devicePixelRatio;
} else if ($w.device.pixelRatio) {
dpr = $w.device.pixelRatio;
}
dpr = dpr > 0 ? dpr : 1;
// ----------------------------------------
// 检查 Canvas 实例和上下文是否有效，并确认组件类型
if (ctx && canvas && $w.canvas1?.type === '2d') {
// --- 1. 计算条码的精确尺寸 ---
const barcodeUnitWidth = 2; // 条纹宽度 (JsBarcode width)
const barcodeHeight = 60; // 条码高度（像素）
const characters = clinicNo.length;
// CODE128 近似单位数：(字符数 * 11) + 35（起始/校验/停止/安静区）
const barcodeTotalUnits = (characters * 11) + 35;
const estimatedBarcodeWidth = barcodeTotalUnits * barcodeUnitWidth; // 像素宽度
// --- 2. 设置画布大小为条码大小（考虑 DPR）---
canvas.width = estimatedBarcodeWidth * dpr;
canvas.height = barcodeHeight * dpr;
ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置任何变换
ctx.scale(dpr, dpr); // 以 DPR 缩放，使像素清晰
ctx.clearRect(0, 0, estimatedBarcodeWidth, barcodeHeight);
// --- 3. 绘制条形码（从左上角开始，无额外边距）---
JsBarcode(canvas, clinicNo, {
format: "CODE128",
displayValue: false,
width: barcodeUnitWidth,
height: barcodeHeight,
margin: 0
});
}
}配置canvas渲染完成事件，调用我们的方法，并且将就诊号传入
总结
本篇我们介绍了动态校验字段，配置二维码，以及生成一维码的功能。灵活运用组件，就可以根据业务场景实现各种各样符合实际需求的效果，按照上述的方法练习一下吧。