简介这是一份基于微信小程序平台的法律咨询与援助类应用源码资源适合小程序开发者、法律行业从业者及希望搭建在线咨询服务的团队参考。项目围绕法律知识查询、律师在线沟通、案例展示、法规检索与附近律所定位等场景展开体现了轻量级服务工具与法律业务结合的设计思路。压缩包共232个文件主要包含js逻辑脚本、json配置、wxss样式、wxml页面结构、png/jpg图片素材及md说明文档整体约1.4MB目录涵盖全局配置、pages页面、utils工具函数、map地图相关模块等便于按功能模块拆解学习。目前已有368人学习下载。通过阅读源码可掌握小程序从全局配置到页面交互的完整实现方式了解法律知识库、在线咨询入口、隐私保护及地图定位等功能的编码思路对入门微信小程序开发或快速搭建法律类应用具有一定的参考价值。1. 法律咨询小程序法律援助为“免费”两字做工程化设计很多人以为“法律援助”就是做一个在线表单用户填完提交后台有人审核。真正做起来你会发现这个“免费”服务背后的工程复杂度远高于普通付费咨询小程序。用户构成复杂有人连打字都不顺有人上传的身份证照片模糊、手持视频光线异常律师那边则是轮班、擅长领域不同、空闲时间不同。法律援助机构还要监管整个流程防止“免费咨询”变成“变相营销”。所以这个标题要解决的不是“写个表单”而是如何让合法、合规、可监管的法律援助服务在小程序上顺畅跑起来并且让非技术背景的审核人员也能顺畅操作。这篇文章适合小程序工程师、对接司法局系统的后端开发者以及想做“申请-审核-指派-反馈”完整状态机的技术负责人。我会从技术选型、数据模型、算法匹配、安全合规和上线调试五个层面把一条可复现的路径讲清楚参数和配置可以直接抄进项目里。2. 法律咨询小程序法律援助的技术底座uniapp 云开发还是自建服务做法律咨询小程序第一个要定的事是技术栈。常见做法是选uniapp微信小程序因为后续还要考虑支付宝、百度等多端分发法律援助机构往往希望覆盖更多用户。uniapp一个工程编译到多端尤其对于带有公共服务性质的产品能显著降低重复开发成本。但要注意uniapp在微信小程序里有一些兼容性坑比如自定义导航栏高度在不同机型上的计算后面会专门讲到。2.1 为什么优先考虑uniapp微信小程序从维护成本和动态标题说起很多团队问我原生微信小程序不也挺好确实如果只做微信端原生小程序性能最好而且微信官方API支持最全。但法律咨询小程序往往要同时上微信、支付宝、百度等多端原生代码没法复用。而uniapp利用Vue语法一套代码编译到多个平台尤其适合“小程序”的业务。另外法律咨询小程序的标题不只是固定文案比如“法律咨询”页面要根据当前操作动态显示“我的咨询”“法律援助申请”等uniapp里可以通过uni.setNavigationBarTitle实现在不同状态下动态设置标题这一点在原生端需要分别处理。下面是uniapp里动态设置标题的示例代码// pages/consult/consult.vue export default { onShow() { const scene this.$store.state.consultScene; // 可选值: list/apply/detail if (scene apply) { uni.setNavigationBarTitle({ title: 法律援助申请 }); } else if (scene detail) { uni.setNavigationBarTitle({ title: 咨询详情 }); } else { uni.setNavigationBarTitle({ title: 法律咨询 }); } } }这段代码的逻辑是在页面每次显示的时候从全局状态里读取当前场景值然后调用uni.setNavigationBarTitle将标题改为对应文案。这里的$store是Vuex的全局状态可以在进入页面前由调用方设置。如果不用Vuex也可以用uni.setStorageSync存一个字段读取逻辑类似。要注意的是onShow不能放在onLoad里因为从其他页面返回时onLoad不会再次触发标题可能不会刷新。2.2 法律援助申请表单数据库表设计与数据流法律援助申请是一个典型的“长表单”场景包含申请人基本信息、案件类型、案情描述、经济状况证明、代理人信息等。如果把这些字段全部塞在一个对象里后续的筛选和统计会很痛苦。我一般会拆成三张表applicant、legal_aid_case、legal_aid_attachment。applicant存用户身份legal_aid_case存受理案件信息attachment存证件照片、证明文件等。以下是一个简化后的数据表设计以MySQL为例CREATE TABLE legal_aid_case ( id int NOT NULL AUTO_INCREMENT, case_no varchar(32) NOT NULL COMMENT 案件编号如FZ20240001, user_id varchar(64) NOT NULL COMMENT 小程序openid或自定义用户ID, applicant_name varchar(50) NOT NULL COMMENT 申请人姓名, id_card_no varchar(18) NOT NULL COMMENT 身份证号加密存储, case_type tinyint NOT NULL COMMENT 案件类型1劳动、2婚姻家事、3交通事故、4其他, case_desc text NOT NULL COMMENT 案情描述不超过1000字, economic_status tinyint NOT NULL COMMENT 经济状况1低保、2低收入、3普通, status tinyint NOT NULL DEFAULT 0 COMMENT 0待审核、1初审通过、2待指派、3已指派、4已结案、5驳回, assign_lawyer_id int DEFAULT NULL COMMENT 律师ID指派后填写, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT法律援助案件主表;这里有几个关键点值得注意。id_card_no必须加密存储不能明文因为这是敏感个人信息而且《个人信息保护法》要求对敏感个人信息履行更严格的保护义务。case_no需要生成唯一且有序的编号方便线下归档和法律援助机构对接。status字段用一个tinyint表示状态比字符串更节省空间也避免拼写错误。2.2.1 表单字段与校验小程序的表单提交不能只依赖前端校验因为前端校验可以被绕过。服务端必须进行二次校验。比如身份证号前端用正则校验格式后端还要校验校验位。下面是服务端校验身份证号的后半部分逻辑使用Node.jsfunction isValidIdCardNo(idCard) { // 基本格式17位数字数字或X const reg /^\d{6}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dX]$/; if (!reg.test(idCard)) return false; const code [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; const checkCode [1, 0, X, 9, 8, 7, 6, 5, 4, 3, 2]; const sum idCard.slice(0, 17).split().reduce((acc, ch, i) acc (Number(ch) * code[i]), 0); return checkCode[sum % 11] idCard[17].toUpperCase(); }这段代码先检查格式再计算校验位。code数组是身份证前17位对应的权重系数checkCode是根据模11余数得到的校验字符。这一步能过滤掉大部分伪造身份证。请注意即使服务端校验通过也不能保证这个人就是本人最终还需要人工审核和视频验证。法律援助机构通常要求本人持身份证原件到现场或在视频中展示小程序端只能做初步拦截。2.3 关键参数微信小程序顶部导航栏高度与页面配置法律援助申请页通常是长页面用户需要一直下滑填写。微信小程序默认的导航栏是胶囊按钮加标题顶部导航栏高度在不同机型上不一样尤其当使用自定义导航栏时如果高度计算错误页面会被刘海屏或状态栏遮挡。常见做法是在page.json里关闭默认导航栏然后通过uni.getSystemInfoSync()获取状态栏高度再动态计算导航栏高度。下面是适配自定义导航栏的常用代码// 在App.vue的onLaunch中计算并存储 onLaunch() { const sys uni.getSystemInfoSync(); let navBarHeight 44; if (sys.platform ios) { navBarHeight 44; } else if (sys.platform android) { navBarHeight 48; } if (sys.statusBarHeight) { navBarHeight sys.statusBarHeight; } uni.setStorageSync(navBarHeight, navBarHeight); }这里的navBarHeight是状态栏高度加上原生导航栏高度iOS约为44pxAndroid约为48px。实际开发中不同Android机型的导航栏高度有差异更稳妥的办法是用胶囊按钮的位置来计算uni.getMenuButtonBoundingClientRect()获取右上角胶囊按钮的上边距和高度然后推导出导航栏总高度。不过上面这个简化版本已经能满足大多数场景。另外法律援助申请页可能需要拍摄身份证上传这里有一个小技巧chooseMedia接口在部分安卓手机上会偶发闪退可以降级到chooseImage并压缩图片后再上传。压缩参数可以通过wx.compressImage原生端或uni.compressImage设置压缩质量。但要注意身份证照片如果压缩得太狠OCR识别率会下降。我一般将压缩质量控制在80%并限制长边不大于2048像素。3. 用云函数实现法律咨询问答与律师匹配法律咨询小程序的核心功能不只是提交表单还包括在线咨询和律师匹配。很多团队会把问答和匹配功能放在小程序端做但这样逻辑容易被调试者看到且数据不安全。常见做法是使用云函数如微信云开发或腾讯云SCF把算法逻辑放在云端小程序端只调用接口。云函数的优势在于免运维、自带鉴权还能与数据库直接交互减少网络请求往返。3.1 法律咨询问答的文本分类实现用户提出一个咨询问题比如“公司拖欠工资三个月怎么申请法律援助”系统需要判断该问题属于哪类案情以便后续分发给擅长对应领域的律师。这里不一定要上大模型很多团队用轻量的文本分类算法。常见做法是维护一个关键词词库配合TF-IDF或简单的贝叶斯分类器。如果项目已经接入大模型API可以用对话方式完成分类但成本较高。对于中小型法律援助项目我倾向于用关键词权重的方式足够跑通。下面是一个在云函数中实现关键词分类的示例// cloudfunctions/classify/index.js const caseTypes { labor: { keywords: [工资, 加班, 辞退, 赔偿金, 劳动合同, 社保], weight: 3 }, family: { keywords: [离婚, 抚养权, 赡养, 财产分割, 彩礼], weight: 2 }, traffic: { keywords: [交通事故, 肇事, 理赔, 交警], weight: 2 } }; exports.main async (event) { const text event.question; let scoreMap {}; for (const type in caseTypes) { let score 0; caseTypes[type].keywords.forEach(keyword { if (text.includes(keyword)) { score caseTypes[type].weight; } }); scoreMap[type] score; } const maxType Object.keys(scoreMap).reduce((a, b) scoreMap[a] scoreMap[b] ? a : b); return { caseType: maxType, scores: scoreMap }; };这段代码的逻辑是对每一种案件类型遍历它的关键词表每命中一个关键词加上对应权重最后取得分最高的类型作为分类结果。这种方式的优点是可解释性强后台管理员可以直接修改关键词和权重不需要重新训练模型。缺点是用户用词不精确时容易漏判比如问题写成“被离职了公司不给补偿”这里“离职”不在关键词表中。所以我会在文本预处理阶段加上同义词扩展把“离职”映射到“辞退”。为了让你直观调整权重我把常见案件类型和权重列成一张表案件类型关键词示例权重适用场景labor工资、加班、辞退、赔偿金、劳动合同3劳动仲裁、讨薪family离婚、抚养权、赡养、财产分割、彩礼2婚姻家事纠纷traffic交通事故、肇事、理赔、交警2交通事故理赔contract合同、违约、欠款、定金2合同纠纷上表中的权重是一个词命中的得分。你可以按法律领域的热度调整比如劳动纠纷申请量大权重可以设低一点让分类更保守如果某个词极少出现但非常关键则提高权重。注意同一问题可能命中多个类型最终只取最高分所以权重相对关系比绝对值重要。3.2 律师匹配算法按标签与权重排序法律援助的律师指派通常有两种模式一种是用户自己选律师另一种是平台根据案由自动推荐。自动推荐的效率更高也更公平。推荐算法不需要复杂核心是计算律师与案件类型的匹配度。律师在入驻时会选择擅长领域比如“劳动纠纷”“婚姻家事”“交通事故”等并设置一个服务次数或权重。我们可以用下面这个公式计算得分score expertise_match * 0.6 availability * 0.3 rating * 0.1其中expertise_match是该律师擅长领域与案件类型的匹配度1表示完全匹配0.2表示弱匹配availability是律师当前的接单余量rating是历史服务评分。下面是在云函数中查询并排序的代码// cloudfunctions/matchLawyer/index.js const cloud require(wx-server-sdk); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const db cloud.database(); exports.main async (event) { const { caseType } event; const lawyers await db.collection(lawyers) .where({ status: available }) .field({ openid: true, expertises: true, rating: true, maxCases: true, currentCases: true }) .get(); const scores lawyers.data.map(lawyer { const expertiseMatch lawyer.expertises.includes(caseType) ? 1 : 0.2; const availability (lawyer.maxCases || 0) - (lawyer.currentCases || 0); const availabilityScore Math.min(availability / 5, 1); const ratingScore lawyer.rating ? lawyer.rating / 5 : 0.5; const score expertiseMatch * 0.6 availabilityScore * 0.3 ratingScore * 0.1; return { ...lawyer, score }; }); scores.sort((a, b) b.score - a.score); return scores.slice(0, 3); };这里的where查询条件是status: available即只在正在接单的律师中匹配。field指定返回字段避免把律师的手机号等敏感信息暴露给前端。返回的score按降序排序后取前3位前端可以展示这3位供用户选择。你可能会问为什么不直接在数据库里排序因为score是一个计算值不能在查询语句中直接计算只能在内存中排序。如果律师数量很大超过几千这种方式会有性能问题需要进一步做预筛选比如先按expertises等于caseType过滤一次再计算分数。3.3 云端函数调用示例与参数说明在uniapp中调用云函数非常简单使用uniCloud.callFunction即可。下面是一个完整的调用示例// pages/consult/consult.vue 中的方法 async function submitQuestion(question) { try { const classifyRes await uniCloud.callFunction({ name: classify, data: { question } }); const { caseType } classifyRes.result; const matchRes await uniCloud.callFunction({ name: matchLawyer, data: { caseType } }); this.lawyerList matchRes.result; } catch (err) { console.error(调用云函数失败, err); uni.showToast({ title: 网络繁忙请稍后再试, icon: none }); } }这里有两个云函数调用第一个classify用于分类第二个matchLawyer用于匹配律师。data中传参的是对象格式云函数通过event接收。注意云函数的返回值如果是undefined前端会报错所以云函数里一定要return一个可序列化的对象。另外一个页面上最好将多次云函数调用合并成一个减少网络往返。比如新建一个assistant云函数内部依次调用分类和匹配逻辑前端只调用一次。这样也方便控制云函数之间的数据依赖。4. 法律援助申请的合规设计与状态机法律援助不是普通商业咨询它受《法律援助法》和各地司法局规章约束。比如申请人必须符合经济困难标准案件属于法律援助范围。这些规则在小程序侧需要做成的可配置的逻辑而不能写死在代码里因为各地政策不完全相同。另外法律援助申请的审核流程必须是“闭环”的用户提交、机构初审、律师指派、律师反馈、用户确认结案任何一个环节都要留痕。4.1 法律援助对象资格预校验在用户提交申请时系统先做一次预校验尽量拦截明显不符合条件的申请减少人工审核压力。预校验包括两类硬性条件和参考条件。硬性条件如身份证号码格式、年龄是否在合理范围比如小于10岁或大于120岁直接拒绝参考条件如经济状况选项、案件类型是否在援助范围内。注意参考条件不能直接拒绝用户因为低保户需要上传低保证明系统无法实时核验。下面是一个预校验的云函数片段// cloudfunctions/precheck/index.js exports.main async (event) { const { applicantName, idCardNo, caseType, economicStatus } event; let errors []; let warnings []; if (applicantName.length 2 || applicantName.length 50) { errors.push(申请人姓名长度应为2-50个字符); } if (!/^\d{17}[\dX]$/.test(idCardNo) || !isValidIdCardNo(idCardNo)) { errors.push(身份证号格式不正确); } const supportedTypes [1, 2, 3, 4]; if (!supportedTypes.includes(caseType)) { errors.push(该案件类型暂不在援助范围内); } if (economicStatus 1) { warnings.push(请准备低保证明或收入证明); } return { pass: errors.length 0, errors, warnings }; };这段代码返回一个pass字段如果为false前端直接阻止提交并显示errors。注意这里的warnings不是阻断项而是提醒用户需要准备的材料。在实际项目中economicStatus的取值范围和对应材料名建议做成一张配置表放在数据库里运营人员可以随时调整而不是发布一次小程序就改一次代码。4.2 审核状态机与权限控制法律援助申请有严格的审核节点我习惯用一个主状态机来驱动状态流转如下待审核 - 初审通过 - 待指派 - 已指派 - 已结案 \- 驳回 - 待审核重新提交在数据库字段上status对应这些状态。每一次状态变更都要写入日志表记录操作人、时间、备注。下面是一个状态变更日志表的结构CREATE TABLE legal_aid_log ( id int NOT NULL AUTO_INCREMENT, case_id int NOT NULL, from_status tinyint DEFAULT NULL, to_status tinyint NOT NULL, operator varchar(50) NOT NULL COMMENT 操作人openid或管理员账号, remark varchar(255) DEFAULT NULL, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT法律援助状态流转日志;状态机的控制逻辑不能放在小程序端只能放在云函数或后端接口中。因为小程序端可以任意修改请求参数如果直接调用更新接口把status改成已结案就能绕过审核。正确做法是在云函数中根据当前状态和操作人角色校验跳转是否合法。例如// cloudfunctions/updateCaseStatus/index.js const db cloud.database(); exports.main async (event) { const { caseId, toStatus, operatorRole } event; const caseDoc await db.collection(legal_aid_case).doc(caseId).get(); const fromStatus caseDoc.data.status; const allowedTransitions { 0: [1, 5], // 待审核 - 初审通过 或 驳回 1: [2, 5], // 初审通过 - 待指派 或 驳回 2: [3], // 待指派 - 已指派 3: [4] // 已指派 - 已结案 }; if (!allowedTransitions[fromStatus] || !allowedTransitions[fromStatus].includes(toStatus)) { return { success: false, message: 非法状态流转 }; } // 权限校验只有管理员可以执行驳回 if (toStatus 5 operatorRole ! admin) { return { success: false, message: 驳回操作仅限管理员 }; } await db.collection(legal_aid_case).doc(caseId).update({ data: { status: toStatus, assignLawyerId: event.lawyerId || undefined } }); await db.collection(legal_aid_log).add({ data: { caseId, fromStatus, toStatus, operator: event.operator, remark: event.remark } }); return { success: true }; };这段代码的核心在于allowedTransitions映射表它定义了每个状态允许流转到的下一个状态。如果请求中的toStatus不在映射表里直接返回失败。另外权限校验是必不可少的环节。注意代码里assignLawyerId只有在指派动作时才会设置其他状态更新时不应携带此字段否则会被非法使用。云函数的鉴权建议使用微信的openid在云函数中通过cloud.getWXContext()获取而不是信任前端传入的operator。这是一个容易被忽略的安全漏洞。4.3 数据安全用户敏感信息的加密存储法律援助申请中涉及身份证号、住址、收入、案情描述等敏感个人信息。除了按《个人信息保护法》要求告知用户并获取同意外技术层面还需要做到传输加密、存储加密、访问审计。微信小程序本身强制HTTPS云函数与云数据库之间的通信由腾讯云内部网络承载这部分相对安全。重点是存储加密。我常用的做法是使用对称加密算法AES-256-GCM加密身份证号密钥保存在云函数的环境变量中不放在代码库里。加密后的密文和加密时生成的随机IV一起存入数据库。下面是加密函数的一个示例// 云函数中封装 encryptIdCard 函数 const crypto require(crypto); function encryptIdCard(plainText) { const key Buffer.from(process.env.ID_CARD_ENCRYPT_KEY, hex); // 64位hex32字节 const iv crypto.randomBytes(12); const cipher crypto.createCipheriv(aes-256-gcm, key, iv); const encrypted Buffer.concat([cipher.update(plainText, utf8), cipher.final()]); const authTag cipher.getAuthTag(); return { ciphertext: encrypted.toString(base64), iv: iv.toString(base64), authTag: authTag.toString(base64) }; }这里选择AES-256-GCM模式是因为它同时提供机密性和完整性校验可以检测密文是否被篡改。iv是随机生成的每次加密都不同避免相同明文产生相同密文。解密时需要传入ciphertext、iv和authTag用同一个密钥解密。注意绝对不能把密钥硬编码在代码里也不要把密钥放在小程序前端因为前端代码可以被反编译。环境变量要放在云函数项目的config.json或控制台中的环境变量项。5. 小程序上线前必做的抓包与加载优化法律援助小程序上线前有两件事是每个工程师都必须做的一是用抓包工具验证接口传输的数据是否真正加密二是检查首屏加载速度尤其是刚进入的加载页面有没有白屏。抓包能发现前端是否把敏感信息明文传到了非预期接口加载优化则直接关系到用户体验——用户如果等了3秒还没看到法律援助申请按钮很可能就直接退出小程序了。5.1 使用Burp Suite抓取PC端微信小程序流量法律咨询小程序只能在微信里打开本地调试时可以用微信PC客户端再配合Burp Suite抓包。Burp Suite本身是一个HTTP/HTTPS代理工具你需要先把微信客户端的流量指到Burp的监听端口。具体操作是在Burp中打开Proxy - Options设置一个监听端口例如127.0.0.1:8888然后设置PC端系统代理或微信小程序专用的代理。微信PC端默认不走系统代理你需要在其设置中手动配置代理为127.0.0.1:8888。抓包时通常会遇到HTTPS证书校验失败这是因为微信内置证书库不信任Burp的CA证书。解决方法是把Burp的CA证书导出安装到系统信任证书后重启微信。但这里有一个坑新版微信会校验证书固定Certificate Pinning即使系统信任了CA微信仍可能直接拒绝连接。遇到这种情况可以用Burp配合Frida在桌面端对微信进程进行SSL Unpinning但过程较复杂而且每次微信更新都可能失效。我一般优先用whistle或Charles并开启“Capture HTTPS CONNECTs”和“SSL Proxying”再配合微信开发者工具来处理。实际上微信开发者工具中可以直接看到所有网络请求包含请求头、参数、返回值对于云函数的调用也能看到unicloud域名下的请求。如果必须用Burp那就只用来抓非小程序页面的通用流量或者作为补充验证。5.2 修改刚进入的加载页面骨架屏与分包预载法律援助小程序的首屏往往是首页包含咨询入口、法律援助 banner、快速问答列表等。如果这些数据都在onLoad里请求首次进入会白屏至少1-2秒。常见做法是使用骨架屏组件即在数据加载前先渲染一个仿真的页面结构让用户感知到页面“正在加载”而不是死屏。在uniapp中可以通过VueX的loading状态控制骨架屏的显示。下面是一个简单骨架屏的模板template view v-ifloading view classskeleton-banner / view classskeleton-list view classskeleton-item v-fori in 5 :keyi / /view /view view v-else !-- 正常内容 -- /view /template对应的样式可以定义灰色块通过CSS动画让高光扫过。但骨架屏只是表面优化真正提升加载速度的是减少首屏数据依赖。把首页分组为静态区域和动态区域静态区域导航栏、标题、法律援助申请按钮直接写在页面里动态区域律师列表、咨询列表用uni.request异步请求。同时把法律援助申请相关的页面通过subpackages分包并设置preloadRule在首页空闲时预加载分包资源。微信小程序分包能有效减少主包体积加快首包加载。配置示例{ pages: [pages/index/index], subPackages: [ { root: pages/legalAid, pages: [apply/apply, status/status] } ], preloadRule: { pages/index/index: { network: all, packages: [pages/legalAid] } } }这里的preloadRule表示在进入首页后立即预下载pages/legalAid分包条件为network: all无论什么网络。注意分包预载会消耗流量如果担心流量费用可以改成network: wifi只在WiFi下预载。5.3 验证法律援助流程的完整闭环上线前最后一步是走一遍完整的法律援助申请流程。你需要准备一个测试微信号从“提交申请”开始到模拟管理员在后台“初审通过”再到“指派律师”最后“律师反馈”并“用户确认结案”。期间要注意观察几个关键点提交后按钮是否置灰防止重复提交状态更新后是否推送给用户通过订阅消息失败时是否有Toast提示。订阅消息需要在用户提交时弹窗授权不能静默发。法律咨询小程序的订阅消息通常需要预申请用户同意尤其是状态变化通知。如果发现收不到通知去微信公众平台检查订阅消息的模板ID是否与云函数中填写的匹配。本文还有配套的精品资源点击获取
简介这是一份基于微信小程序平台的法律咨询与援助类应用源码资源适合小程序开发者、法律行业从业者及希望搭建在线咨询服务的团队参考。项目围绕法律知识查询、律师在线沟通、案例展示、法规检索与附近律所定位等场景展开体现了轻量级服务工具与法律业务结合的设计思路。压缩包共232个文件主要包含js逻辑脚本、json配置、wxss样式、wxml页面结构、png/jpg图片素材及md说明文档整体约1.4MB目录涵盖全局配置、pages页面、utils工具函数、map地图相关模块等便于按功能模块拆解学习。目前已有368人学习下载。通过阅读源码可掌握小程序从全局配置到页面交互的完整实现方式了解法律知识库、在线咨询入口、隐私保护及地图定位等功能的编码思路对入门微信小程序开发或快速搭建法律类应用具有一定的参考价值。1. 法律咨询小程序法律援助为“免费”两字做工程化设计很多人以为“法律援助”就是做一个在线表单用户填完提交后台有人审核。真正做起来你会发现这个“免费”服务背后的工程复杂度远高于普通付费咨询小程序。用户构成复杂有人连打字都不顺有人上传的身份证照片模糊、手持视频光线异常律师那边则是轮班、擅长领域不同、空闲时间不同。法律援助机构还要监管整个流程防止“免费咨询”变成“变相营销”。所以这个标题要解决的不是“写个表单”而是如何让合法、合规、可监管的法律援助服务在小程序上顺畅跑起来并且让非技术背景的审核人员也能顺畅操作。这篇文章适合小程序工程师、对接司法局系统的后端开发者以及想做“申请-审核-指派-反馈”完整状态机的技术负责人。我会从技术选型、数据模型、算法匹配、安全合规和上线调试五个层面把一条可复现的路径讲清楚参数和配置可以直接抄进项目里。2. 法律咨询小程序法律援助的技术底座uniapp 云开发还是自建服务做法律咨询小程序第一个要定的事是技术栈。常见做法是选uniapp微信小程序因为后续还要考虑支付宝、百度等多端分发法律援助机构往往希望覆盖更多用户。uniapp一个工程编译到多端尤其对于带有公共服务性质的产品能显著降低重复开发成本。但要注意uniapp在微信小程序里有一些兼容性坑比如自定义导航栏高度在不同机型上的计算后面会专门讲到。2.1 为什么优先考虑uniapp微信小程序从维护成本和动态标题说起很多团队问我原生微信小程序不也挺好确实如果只做微信端原生小程序性能最好而且微信官方API支持最全。但法律咨询小程序往往要同时上微信、支付宝、百度等多端原生代码没法复用。而uniapp利用Vue语法一套代码编译到多个平台尤其适合“小程序”的业务。另外法律咨询小程序的标题不只是固定文案比如“法律咨询”页面要根据当前操作动态显示“我的咨询”“法律援助申请”等uniapp里可以通过uni.setNavigationBarTitle实现在不同状态下动态设置标题这一点在原生端需要分别处理。下面是uniapp里动态设置标题的示例代码// pages/consult/consult.vue export default { onShow() { const scene this.$store.state.consultScene; // 可选值: list/apply/detail if (scene apply) { uni.setNavigationBarTitle({ title: 法律援助申请 }); } else if (scene detail) { uni.setNavigationBarTitle({ title: 咨询详情 }); } else { uni.setNavigationBarTitle({ title: 法律咨询 }); } } }这段代码的逻辑是在页面每次显示的时候从全局状态里读取当前场景值然后调用uni.setNavigationBarTitle将标题改为对应文案。这里的$store是Vuex的全局状态可以在进入页面前由调用方设置。如果不用Vuex也可以用uni.setStorageSync存一个字段读取逻辑类似。要注意的是onShow不能放在onLoad里因为从其他页面返回时onLoad不会再次触发标题可能不会刷新。2.2 法律援助申请表单数据库表设计与数据流法律援助申请是一个典型的“长表单”场景包含申请人基本信息、案件类型、案情描述、经济状况证明、代理人信息等。如果把这些字段全部塞在一个对象里后续的筛选和统计会很痛苦。我一般会拆成三张表applicant、legal_aid_case、legal_aid_attachment。applicant存用户身份legal_aid_case存受理案件信息attachment存证件照片、证明文件等。以下是一个简化后的数据表设计以MySQL为例CREATE TABLE legal_aid_case ( id int NOT NULL AUTO_INCREMENT, case_no varchar(32) NOT NULL COMMENT 案件编号如FZ20240001, user_id varchar(64) NOT NULL COMMENT 小程序openid或自定义用户ID, applicant_name varchar(50) NOT NULL COMMENT 申请人姓名, id_card_no varchar(18) NOT NULL COMMENT 身份证号加密存储, case_type tinyint NOT NULL COMMENT 案件类型1劳动、2婚姻家事、3交通事故、4其他, case_desc text NOT NULL COMMENT 案情描述不超过1000字, economic_status tinyint NOT NULL COMMENT 经济状况1低保、2低收入、3普通, status tinyint NOT NULL DEFAULT 0 COMMENT 0待审核、1初审通过、2待指派、3已指派、4已结案、5驳回, assign_lawyer_id int DEFAULT NULL COMMENT 律师ID指派后填写, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT法律援助案件主表;这里有几个关键点值得注意。id_card_no必须加密存储不能明文因为这是敏感个人信息而且《个人信息保护法》要求对敏感个人信息履行更严格的保护义务。case_no需要生成唯一且有序的编号方便线下归档和法律援助机构对接。status字段用一个tinyint表示状态比字符串更节省空间也避免拼写错误。2.2.1 表单字段与校验小程序的表单提交不能只依赖前端校验因为前端校验可以被绕过。服务端必须进行二次校验。比如身份证号前端用正则校验格式后端还要校验校验位。下面是服务端校验身份证号的后半部分逻辑使用Node.jsfunction isValidIdCardNo(idCard) { // 基本格式17位数字数字或X const reg /^\d{6}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dX]$/; if (!reg.test(idCard)) return false; const code [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; const checkCode [1, 0, X, 9, 8, 7, 6, 5, 4, 3, 2]; const sum idCard.slice(0, 17).split().reduce((acc, ch, i) acc (Number(ch) * code[i]), 0); return checkCode[sum % 11] idCard[17].toUpperCase(); }这段代码先检查格式再计算校验位。code数组是身份证前17位对应的权重系数checkCode是根据模11余数得到的校验字符。这一步能过滤掉大部分伪造身份证。请注意即使服务端校验通过也不能保证这个人就是本人最终还需要人工审核和视频验证。法律援助机构通常要求本人持身份证原件到现场或在视频中展示小程序端只能做初步拦截。2.3 关键参数微信小程序顶部导航栏高度与页面配置法律援助申请页通常是长页面用户需要一直下滑填写。微信小程序默认的导航栏是胶囊按钮加标题顶部导航栏高度在不同机型上不一样尤其当使用自定义导航栏时如果高度计算错误页面会被刘海屏或状态栏遮挡。常见做法是在page.json里关闭默认导航栏然后通过uni.getSystemInfoSync()获取状态栏高度再动态计算导航栏高度。下面是适配自定义导航栏的常用代码// 在App.vue的onLaunch中计算并存储 onLaunch() { const sys uni.getSystemInfoSync(); let navBarHeight 44; if (sys.platform ios) { navBarHeight 44; } else if (sys.platform android) { navBarHeight 48; } if (sys.statusBarHeight) { navBarHeight sys.statusBarHeight; } uni.setStorageSync(navBarHeight, navBarHeight); }这里的navBarHeight是状态栏高度加上原生导航栏高度iOS约为44pxAndroid约为48px。实际开发中不同Android机型的导航栏高度有差异更稳妥的办法是用胶囊按钮的位置来计算uni.getMenuButtonBoundingClientRect()获取右上角胶囊按钮的上边距和高度然后推导出导航栏总高度。不过上面这个简化版本已经能满足大多数场景。另外法律援助申请页可能需要拍摄身份证上传这里有一个小技巧chooseMedia接口在部分安卓手机上会偶发闪退可以降级到chooseImage并压缩图片后再上传。压缩参数可以通过wx.compressImage原生端或uni.compressImage设置压缩质量。但要注意身份证照片如果压缩得太狠OCR识别率会下降。我一般将压缩质量控制在80%并限制长边不大于2048像素。3. 用云函数实现法律咨询问答与律师匹配法律咨询小程序的核心功能不只是提交表单还包括在线咨询和律师匹配。很多团队会把问答和匹配功能放在小程序端做但这样逻辑容易被调试者看到且数据不安全。常见做法是使用云函数如微信云开发或腾讯云SCF把算法逻辑放在云端小程序端只调用接口。云函数的优势在于免运维、自带鉴权还能与数据库直接交互减少网络请求往返。3.1 法律咨询问答的文本分类实现用户提出一个咨询问题比如“公司拖欠工资三个月怎么申请法律援助”系统需要判断该问题属于哪类案情以便后续分发给擅长对应领域的律师。这里不一定要上大模型很多团队用轻量的文本分类算法。常见做法是维护一个关键词词库配合TF-IDF或简单的贝叶斯分类器。如果项目已经接入大模型API可以用对话方式完成分类但成本较高。对于中小型法律援助项目我倾向于用关键词权重的方式足够跑通。下面是一个在云函数中实现关键词分类的示例// cloudfunctions/classify/index.js const caseTypes { labor: { keywords: [工资, 加班, 辞退, 赔偿金, 劳动合同, 社保], weight: 3 }, family: { keywords: [离婚, 抚养权, 赡养, 财产分割, 彩礼], weight: 2 }, traffic: { keywords: [交通事故, 肇事, 理赔, 交警], weight: 2 } }; exports.main async (event) { const text event.question; let scoreMap {}; for (const type in caseTypes) { let score 0; caseTypes[type].keywords.forEach(keyword { if (text.includes(keyword)) { score caseTypes[type].weight; } }); scoreMap[type] score; } const maxType Object.keys(scoreMap).reduce((a, b) scoreMap[a] scoreMap[b] ? a : b); return { caseType: maxType, scores: scoreMap }; };这段代码的逻辑是对每一种案件类型遍历它的关键词表每命中一个关键词加上对应权重最后取得分最高的类型作为分类结果。这种方式的优点是可解释性强后台管理员可以直接修改关键词和权重不需要重新训练模型。缺点是用户用词不精确时容易漏判比如问题写成“被离职了公司不给补偿”这里“离职”不在关键词表中。所以我会在文本预处理阶段加上同义词扩展把“离职”映射到“辞退”。为了让你直观调整权重我把常见案件类型和权重列成一张表案件类型关键词示例权重适用场景labor工资、加班、辞退、赔偿金、劳动合同3劳动仲裁、讨薪family离婚、抚养权、赡养、财产分割、彩礼2婚姻家事纠纷traffic交通事故、肇事、理赔、交警2交通事故理赔contract合同、违约、欠款、定金2合同纠纷上表中的权重是一个词命中的得分。你可以按法律领域的热度调整比如劳动纠纷申请量大权重可以设低一点让分类更保守如果某个词极少出现但非常关键则提高权重。注意同一问题可能命中多个类型最终只取最高分所以权重相对关系比绝对值重要。3.2 律师匹配算法按标签与权重排序法律援助的律师指派通常有两种模式一种是用户自己选律师另一种是平台根据案由自动推荐。自动推荐的效率更高也更公平。推荐算法不需要复杂核心是计算律师与案件类型的匹配度。律师在入驻时会选择擅长领域比如“劳动纠纷”“婚姻家事”“交通事故”等并设置一个服务次数或权重。我们可以用下面这个公式计算得分score expertise_match * 0.6 availability * 0.3 rating * 0.1其中expertise_match是该律师擅长领域与案件类型的匹配度1表示完全匹配0.2表示弱匹配availability是律师当前的接单余量rating是历史服务评分。下面是在云函数中查询并排序的代码// cloudfunctions/matchLawyer/index.js const cloud require(wx-server-sdk); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const db cloud.database(); exports.main async (event) { const { caseType } event; const lawyers await db.collection(lawyers) .where({ status: available }) .field({ openid: true, expertises: true, rating: true, maxCases: true, currentCases: true }) .get(); const scores lawyers.data.map(lawyer { const expertiseMatch lawyer.expertises.includes(caseType) ? 1 : 0.2; const availability (lawyer.maxCases || 0) - (lawyer.currentCases || 0); const availabilityScore Math.min(availability / 5, 1); const ratingScore lawyer.rating ? lawyer.rating / 5 : 0.5; const score expertiseMatch * 0.6 availabilityScore * 0.3 ratingScore * 0.1; return { ...lawyer, score }; }); scores.sort((a, b) b.score - a.score); return scores.slice(0, 3); };这里的where查询条件是status: available即只在正在接单的律师中匹配。field指定返回字段避免把律师的手机号等敏感信息暴露给前端。返回的score按降序排序后取前3位前端可以展示这3位供用户选择。你可能会问为什么不直接在数据库里排序因为score是一个计算值不能在查询语句中直接计算只能在内存中排序。如果律师数量很大超过几千这种方式会有性能问题需要进一步做预筛选比如先按expertises等于caseType过滤一次再计算分数。3.3 云端函数调用示例与参数说明在uniapp中调用云函数非常简单使用uniCloud.callFunction即可。下面是一个完整的调用示例// pages/consult/consult.vue 中的方法 async function submitQuestion(question) { try { const classifyRes await uniCloud.callFunction({ name: classify, data: { question } }); const { caseType } classifyRes.result; const matchRes await uniCloud.callFunction({ name: matchLawyer, data: { caseType } }); this.lawyerList matchRes.result; } catch (err) { console.error(调用云函数失败, err); uni.showToast({ title: 网络繁忙请稍后再试, icon: none }); } }这里有两个云函数调用第一个classify用于分类第二个matchLawyer用于匹配律师。data中传参的是对象格式云函数通过event接收。注意云函数的返回值如果是undefined前端会报错所以云函数里一定要return一个可序列化的对象。另外一个页面上最好将多次云函数调用合并成一个减少网络往返。比如新建一个assistant云函数内部依次调用分类和匹配逻辑前端只调用一次。这样也方便控制云函数之间的数据依赖。4. 法律援助申请的合规设计与状态机法律援助不是普通商业咨询它受《法律援助法》和各地司法局规章约束。比如申请人必须符合经济困难标准案件属于法律援助范围。这些规则在小程序侧需要做成的可配置的逻辑而不能写死在代码里因为各地政策不完全相同。另外法律援助申请的审核流程必须是“闭环”的用户提交、机构初审、律师指派、律师反馈、用户确认结案任何一个环节都要留痕。4.1 法律援助对象资格预校验在用户提交申请时系统先做一次预校验尽量拦截明显不符合条件的申请减少人工审核压力。预校验包括两类硬性条件和参考条件。硬性条件如身份证号码格式、年龄是否在合理范围比如小于10岁或大于120岁直接拒绝参考条件如经济状况选项、案件类型是否在援助范围内。注意参考条件不能直接拒绝用户因为低保户需要上传低保证明系统无法实时核验。下面是一个预校验的云函数片段// cloudfunctions/precheck/index.js exports.main async (event) { const { applicantName, idCardNo, caseType, economicStatus } event; let errors []; let warnings []; if (applicantName.length 2 || applicantName.length 50) { errors.push(申请人姓名长度应为2-50个字符); } if (!/^\d{17}[\dX]$/.test(idCardNo) || !isValidIdCardNo(idCardNo)) { errors.push(身份证号格式不正确); } const supportedTypes [1, 2, 3, 4]; if (!supportedTypes.includes(caseType)) { errors.push(该案件类型暂不在援助范围内); } if (economicStatus 1) { warnings.push(请准备低保证明或收入证明); } return { pass: errors.length 0, errors, warnings }; };这段代码返回一个pass字段如果为false前端直接阻止提交并显示errors。注意这里的warnings不是阻断项而是提醒用户需要准备的材料。在实际项目中economicStatus的取值范围和对应材料名建议做成一张配置表放在数据库里运营人员可以随时调整而不是发布一次小程序就改一次代码。4.2 审核状态机与权限控制法律援助申请有严格的审核节点我习惯用一个主状态机来驱动状态流转如下待审核 - 初审通过 - 待指派 - 已指派 - 已结案 \- 驳回 - 待审核重新提交在数据库字段上status对应这些状态。每一次状态变更都要写入日志表记录操作人、时间、备注。下面是一个状态变更日志表的结构CREATE TABLE legal_aid_log ( id int NOT NULL AUTO_INCREMENT, case_id int NOT NULL, from_status tinyint DEFAULT NULL, to_status tinyint NOT NULL, operator varchar(50) NOT NULL COMMENT 操作人openid或管理员账号, remark varchar(255) DEFAULT NULL, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT法律援助状态流转日志;状态机的控制逻辑不能放在小程序端只能放在云函数或后端接口中。因为小程序端可以任意修改请求参数如果直接调用更新接口把status改成已结案就能绕过审核。正确做法是在云函数中根据当前状态和操作人角色校验跳转是否合法。例如// cloudfunctions/updateCaseStatus/index.js const db cloud.database(); exports.main async (event) { const { caseId, toStatus, operatorRole } event; const caseDoc await db.collection(legal_aid_case).doc(caseId).get(); const fromStatus caseDoc.data.status; const allowedTransitions { 0: [1, 5], // 待审核 - 初审通过 或 驳回 1: [2, 5], // 初审通过 - 待指派 或 驳回 2: [3], // 待指派 - 已指派 3: [4] // 已指派 - 已结案 }; if (!allowedTransitions[fromStatus] || !allowedTransitions[fromStatus].includes(toStatus)) { return { success: false, message: 非法状态流转 }; } // 权限校验只有管理员可以执行驳回 if (toStatus 5 operatorRole ! admin) { return { success: false, message: 驳回操作仅限管理员 }; } await db.collection(legal_aid_case).doc(caseId).update({ data: { status: toStatus, assignLawyerId: event.lawyerId || undefined } }); await db.collection(legal_aid_log).add({ data: { caseId, fromStatus, toStatus, operator: event.operator, remark: event.remark } }); return { success: true }; };这段代码的核心在于allowedTransitions映射表它定义了每个状态允许流转到的下一个状态。如果请求中的toStatus不在映射表里直接返回失败。另外权限校验是必不可少的环节。注意代码里assignLawyerId只有在指派动作时才会设置其他状态更新时不应携带此字段否则会被非法使用。云函数的鉴权建议使用微信的openid在云函数中通过cloud.getWXContext()获取而不是信任前端传入的operator。这是一个容易被忽略的安全漏洞。4.3 数据安全用户敏感信息的加密存储法律援助申请中涉及身份证号、住址、收入、案情描述等敏感个人信息。除了按《个人信息保护法》要求告知用户并获取同意外技术层面还需要做到传输加密、存储加密、访问审计。微信小程序本身强制HTTPS云函数与云数据库之间的通信由腾讯云内部网络承载这部分相对安全。重点是存储加密。我常用的做法是使用对称加密算法AES-256-GCM加密身份证号密钥保存在云函数的环境变量中不放在代码库里。加密后的密文和加密时生成的随机IV一起存入数据库。下面是加密函数的一个示例// 云函数中封装 encryptIdCard 函数 const crypto require(crypto); function encryptIdCard(plainText) { const key Buffer.from(process.env.ID_CARD_ENCRYPT_KEY, hex); // 64位hex32字节 const iv crypto.randomBytes(12); const cipher crypto.createCipheriv(aes-256-gcm, key, iv); const encrypted Buffer.concat([cipher.update(plainText, utf8), cipher.final()]); const authTag cipher.getAuthTag(); return { ciphertext: encrypted.toString(base64), iv: iv.toString(base64), authTag: authTag.toString(base64) }; }这里选择AES-256-GCM模式是因为它同时提供机密性和完整性校验可以检测密文是否被篡改。iv是随机生成的每次加密都不同避免相同明文产生相同密文。解密时需要传入ciphertext、iv和authTag用同一个密钥解密。注意绝对不能把密钥硬编码在代码里也不要把密钥放在小程序前端因为前端代码可以被反编译。环境变量要放在云函数项目的config.json或控制台中的环境变量项。5. 小程序上线前必做的抓包与加载优化法律援助小程序上线前有两件事是每个工程师都必须做的一是用抓包工具验证接口传输的数据是否真正加密二是检查首屏加载速度尤其是刚进入的加载页面有没有白屏。抓包能发现前端是否把敏感信息明文传到了非预期接口加载优化则直接关系到用户体验——用户如果等了3秒还没看到法律援助申请按钮很可能就直接退出小程序了。5.1 使用Burp Suite抓取PC端微信小程序流量法律咨询小程序只能在微信里打开本地调试时可以用微信PC客户端再配合Burp Suite抓包。Burp Suite本身是一个HTTP/HTTPS代理工具你需要先把微信客户端的流量指到Burp的监听端口。具体操作是在Burp中打开Proxy - Options设置一个监听端口例如127.0.0.1:8888然后设置PC端系统代理或微信小程序专用的代理。微信PC端默认不走系统代理你需要在其设置中手动配置代理为127.0.0.1:8888。抓包时通常会遇到HTTPS证书校验失败这是因为微信内置证书库不信任Burp的CA证书。解决方法是把Burp的CA证书导出安装到系统信任证书后重启微信。但这里有一个坑新版微信会校验证书固定Certificate Pinning即使系统信任了CA微信仍可能直接拒绝连接。遇到这种情况可以用Burp配合Frida在桌面端对微信进程进行SSL Unpinning但过程较复杂而且每次微信更新都可能失效。我一般优先用whistle或Charles并开启“Capture HTTPS CONNECTs”和“SSL Proxying”再配合微信开发者工具来处理。实际上微信开发者工具中可以直接看到所有网络请求包含请求头、参数、返回值对于云函数的调用也能看到unicloud域名下的请求。如果必须用Burp那就只用来抓非小程序页面的通用流量或者作为补充验证。5.2 修改刚进入的加载页面骨架屏与分包预载法律援助小程序的首屏往往是首页包含咨询入口、法律援助 banner、快速问答列表等。如果这些数据都在onLoad里请求首次进入会白屏至少1-2秒。常见做法是使用骨架屏组件即在数据加载前先渲染一个仿真的页面结构让用户感知到页面“正在加载”而不是死屏。在uniapp中可以通过VueX的loading状态控制骨架屏的显示。下面是一个简单骨架屏的模板template view v-ifloading view classskeleton-banner / view classskeleton-list view classskeleton-item v-fori in 5 :keyi / /view /view view v-else !-- 正常内容 -- /view /template对应的样式可以定义灰色块通过CSS动画让高光扫过。但骨架屏只是表面优化真正提升加载速度的是减少首屏数据依赖。把首页分组为静态区域和动态区域静态区域导航栏、标题、法律援助申请按钮直接写在页面里动态区域律师列表、咨询列表用uni.request异步请求。同时把法律援助申请相关的页面通过subpackages分包并设置preloadRule在首页空闲时预加载分包资源。微信小程序分包能有效减少主包体积加快首包加载。配置示例{ pages: [pages/index/index], subPackages: [ { root: pages/legalAid, pages: [apply/apply, status/status] } ], preloadRule: { pages/index/index: { network: all, packages: [pages/legalAid] } } }这里的preloadRule表示在进入首页后立即预下载pages/legalAid分包条件为network: all无论什么网络。注意分包预载会消耗流量如果担心流量费用可以改成network: wifi只在WiFi下预载。5.3 验证法律援助流程的完整闭环上线前最后一步是走一遍完整的法律援助申请流程。你需要准备一个测试微信号从“提交申请”开始到模拟管理员在后台“初审通过”再到“指派律师”最后“律师反馈”并“用户确认结案”。期间要注意观察几个关键点提交后按钮是否置灰防止重复提交状态更新后是否推送给用户通过订阅消息失败时是否有Toast提示。订阅消息需要在用户提交时弹窗授权不能静默发。法律咨询小程序的订阅消息通常需要预申请用户同意尤其是状态变化通知。如果发现收不到通知去微信公众平台检查订阅消息的模板ID是否与云函数中填写的匹配。本文还有配套的精品资源点击获取
