微信小程序

原创已于 2025-10-31 17:47:43 修改 · 639 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

于 2025-10-31 17:05:38 首次发布

该文章已生成可运行项目，

根据您的需求，我将设计一个微信小程序，实现员工扫码入职或主动搜索登录后搜索公司岗位、填写个人信息提交的功能。小程序基于微信原生框架开发，使用 JavaScript 前端逻辑，数据交互通过调用外部 API 接口完成。设计遵循微信小程序开发规范，确保功能完整性和用户体验。以下是分步设计，结构清晰，便于实现。

1. 小程序整体架构

小程序采用模块化设计，主要分为以下模块：

用户认证模块：处理微信登录、获取用户信息（头像、手机号等）。
入职流程模块：实现扫码或搜索后填写个人信息、实名认证、合同签订。
离职流程模块：处理登录、合同解除、签名提交。
个人中心模块：展示个人信息、合同状态、工资明细等。
API 交互模块：所有数据通过 HTTPS 调用外部 API（例如 RESTful API），API 负责数据处理、OCR 识别、文件生成。

外部 API 设计示例（需后端实现）：

/auth/login：处理登录，返回 token。
/user/info：获取或保存用户信息。
/ocr/idcard：身份证识别。
/ocr/bankcard：银行卡识别。
/contract/generate：生成合同文件。
/file/preview：返回文件数据流供在线预览。
/contract/sign：处理合同签订或解除。

2. 关键功能点实现

(1) 身份证和银行卡识别

实现方式：使用微信小程序的上传图片 API（wx.chooseImage）获取照片，然后调用外部 OCR API 进行识别。识别结果自动填充表单。
OCR API 集成：调用如腾讯云 OCR 服务，API 返回结构化数据（例如姓名、身份证号、银行卡号）。

前端代码示例（伪代码）：

// 上传身份证正面照并识别
uploadIdCardFront() {
  wx.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];
      wx.uploadFile({
        url: 'https://api.example.com/ocr/idcard', // 外部 OCR API
        filePath: tempFilePath,
        name: 'file',
        formData: { type: 'front' }, // 区分正反面
        success: (response) => {
          const data = JSON.parse(response.data);
          if (data.code === 200) {
            this.setData({ idCardInfo: data.result }); // 自动填充表单，如姓名、身份证号
          } else {
            wx.showToast({ title: '识别失败，请重试', icon: 'none' });
          }
        }
      });
    }
  });
}
// 银行卡识别类似，调用 /ocr/bankcard API

注意事项：确保图片为横向上传；识别失败时提示用户手动输入。

(2) 信息保存和文件数据流在线展示

信息保存：表单提交时，调用外部 API 保存数据。例如，入职信息提交到 /user/info。
文件数据流展示：合同生成后，调用 /file/preview API 返回文件流（如 PDF），使用微信 wx.openDocument API 在线预览。

前端代码示例（伪代码）：

// 提交个人信息
submitUserInfo() {
  const formData = this.data.form; // 表单数据，包括基本信息、紧急联系人等
  wx.request({
    url: 'https://api.example.com/user/info',
    method: 'POST',
    data: formData,
    header: { 'Authorization': 'Bearer ' + this.data.token },
    success: (res) => {
      if (res.data.code === 200) {
        wx.showToast({ title: '保存成功' });
        this.previewContract(); // 跳转到合同预览
      }
    }
  });
}

// 预览合同文件
previewContract() {
  wx.request({
    url: 'https://api.example.com/contract/generate',
    method: 'GET',
    header: { 'Authorization': 'Bearer ' + this.data.token },
    success: (res) => {
      const fileId = res.data.fileId; // API 返回文件 ID
      wx.downloadFile({
        url: `https://api.example.com/file/preview?fileId=${fileId}`,
        success: (downloadRes) => {
          wx.openDocument({
            filePath: downloadRes.tempFilePath, // 打开 PDF 预览
            showMenu: true // 显示菜单允许分享
          });
        }
      });
    }
  });
}

注意事项：API 需返回文件流（Content-Type: application/pdf）；预览后用户可返回签名。

(3) 个人中心功能

实现内容：登录后显示个人信息、合同签订状态、离职数据、工资明细。
数据来源：调用 /user/info API 获取数据，包括合同状态（如“待审核”、“已签订”）。
前端页面设计：使用列表展示，例如：
- 个人信息：头像、姓名、手机号。
- 合同状态：签约时间、审核状态。
- 离职数据：离职日期、解除合同状态。
- 工资明细：按月展示，可点击查看详情。

3. 入职流程实现步骤

基于您提供的流程，设计小程序页面和逻辑：

首页（index）：员工扫码或搜索“小诚在线”进入。显示“首次签约”按钮和协议勾选框。
- 协议勾选后，调用微信 wx.login 和 wx.getUserInfo 获取用户微信信息（需用户授权）。
实名认证页（auth）：
- 上传身份证正反面、银行卡照片（强制横向）。
- 调用 OCR API 识别信息，自动填充表单字段（如姓名、身份证号）。
- 表单字段包括：
  - 基本信息：姓名、性别、民族（下拉选择）、出生日期、身份证有效期开始时间、身份证有效期结束时间、手机号码、银行卡号、所属银行、开户支行、户籍地址、户口性质（单选农业或非农业）、现详细地址、婚姻状况（单选：已婚、未婚、离异、丧偶）、政治面貌（群众、团员、中共党员）。
  - 紧急联系人信息：关系（单选：夫妻、父母、儿女、朋友、其他）、姓名、手机、服务地区。
  - 学历信息：最高学历（下拉选择）、毕业院校、所学专业、毕业院校起止日期（日期选择）、毕业证书附件。
  - 工作信息：原工作单位、工作起止日期、职务、工作内容、离职证明附件。
  - 家庭信息：关系（单选：夫妻、父母、儿女、朋友、其他）、姓名、工作单位。
合同预览页（preview）：资料提交后，显示“您有一份合同待新签”。点击“预览”调用文件预览 API。

签名页（sign）：预览返回后，点击“确认无误，去签字”。使用 Canvas 实现手写签名：

// 签名功能伪代码
const ctx = wx.createCanvasContext('signCanvas');
let points = [];
wx.onTouchStart((e) => { points.push({ x: e.touches[0].x, y: e.touches[0].y }); });
wx.onTouchMove((e) => { /* 绘制路径 */ });
submitSignature() {
  wx.canvasToTempFilePath({
    canvasId: 'signCanvas',
    success: (res) => {
      wx.uploadFile({
        url: 'https://api.example.com/contract/sign',
        filePath: res.tempFilePath,
        name: 'signature',
        success: () => { wx.navigateTo({ url: '/pages/waiting' }); } // 跳转等待审核页
      });
    }
  });
}

等待审核页（waiting）：显示“等待后台审核”，审核后通知用户登录系统中查看。

4. 离职流程实现步骤

登录页（login）：用户搜索小程序后进入。初始密码为 123456，提供“重置密码”链接。
- 登录逻辑：调用 /auth/login API，验证后跳转。
首页通知：登录后，显示“您有一份合同待解除请尽快签订”，点击“前往签订”。
合同解除页（terminate）：类似入职流程：
- 预览合同（调用相同预览 API）。
- 签名提交（调用 /contract/sign API 标记为解除）。
提交成功页（success）：显示“提交成功”，返回个人中心。