微信小程序入离职

我们正在设计一个微信小程序，需要实现员工扫码入职或主动搜索小程序后登录，搜索公司岗位，填写个人信息并提交。小程序需要获取微信个人信息（如头像、手机号等），实现注册登录，并通过调用外部API接口进行数据交互。关键功能点包括：

1. 身份证和银行卡识别
2. 调用接口保存个人信息和入职信息，并在线展示返回的文件数据流（如合同文档）
3. 个人中心可以查看个人信息、合同签订和离职数据

根据提供的签约和离职流程，我们可以将小程序分为以下几个主要模块：

• 登录/注册模块
• 身份验证与信息填写模块（包括身份证和银行卡识别）
• 合同预览与签署模块
• 个人中心模块（查看个人信息、工资明细、协议，以及离职操作）

技术方案

1. 前端：使用微信小程序框架（WXML、WXSS、JavaScript）
2. 后端：通过调用外部API接口进行数据交互，因此小程序主要处理前端逻辑和调用API。
3. 云开发：可以考虑使用微信云开发，但根据需求，数据交互通过外部API，所以云开发主要用于存储一些非敏感数据或作为中转。

功能模块设计

1. 登录/注册模块

• 用户首次进入小程序，通过微信授权获取用户信息（头像、昵称等）。
• 获取手机号：需要用户主动触发，使用微信的<button open-type="getPhoneNumber">获取加密手机号，然后通过API解密（需要后端配合）。
• 如果用户已经注册，则直接登录；否则进入注册流程（填写必要信息，如姓名、身份证号等，但部分信息可以在后续步骤中补充）。

2. 身份验证与信息填写模块

• 身份证识别：使用微信小程序的wx.chooseImage选择图片，然后调用OCR识别接口（如腾讯云OCR）进行身份证信息识别。需要上传身份证正反面。
• 银行卡识别：同样使用图片选择后调用银行卡OCR接口识别。
• 信息填写表单：包括个人基本信息（姓名、身份证号、银行卡号等），以及入职相关信息（岗位、部门等）。表单提交后调用外部API保存。

3. 合同预览与签署模块

• 合同预览：调用API获取合同文件（如PDF），使用微信小程序的wx.openDocument打开预览。
• 电子签名：使用手写签名组件（如使用canvas实现），用户签名后生成图片，将签名图片上传至服务器，并调用签署接口。

4. 个人中心模块

• 个人信息展示：包括用户基本信息、合同状态、离职状态等。
• 工资明细：调用API获取工资列表，展示每月工资明细。
• 离职操作：离职流程中的合同解除，流程类似签约，但合同类型为解除协议。

关键功能实现细节

身份证和银行卡识别

• 使用微信小程序的wx.chooseImage选择图片，然后调用外部OCR API（如腾讯云OCR）进行识别。注意：需要将图片上传至服务器，然后由服务器调用OCR接口（因为OCR接口通常需要密钥，放在前端不安全）。或者使用微信的插件市场中的OCR插件（如果有合规的）。

文件在线预览

• 获取文件：调用API获取文件流（如PDF），保存为临时文件路径。
• 预览：使用wx.downloadFile下载文件，然后使用wx.openDocument打开。

电子签名

• 使用canvas实现签名区域，用户手写签名后，将canvas转换为图片，上传至服务器。
• 签名图片与合同关联，调用签署接口。

接口设计（示例）

小程序需要与外部API交互，以下为关键接口示例（假设API已经存在）：

1. 登录接口

   • URL: /login
   • 方法: POST
   • 参数: { code: wx.login()获取的code, encryptedData, iv }（用于获取手机号）
   • 返回: { token, userInfo }

2. 身份证识别接口

   • URL: /idcard/ocr
   • 方法: POST
   • 参数: { image: 身份证图片临时路径 }
   • 返回: { name, idNumber, ... }（识别的信息）

3. 银行卡识别接口

   • URL: /bankcard/ocr
   • 方法: POST
   • 参数: { image: 银行卡图片临时路径 }
   • 返回: { bankName, cardNumber, ... }

4. 保存个人信息接口

   • URL: /user/save
   • 方法: POST
   • 参数: { token, ...个人信息字段 }
   • 返回: { success }

5. 获取合同文件接口

   • URL: /contract/get
   • 方法: GET
   • 参数: { token, contractType }（contractType: 新签/解除）
   • 返回: 文件流（PDF）

6. 提交签署接口

   • URL: /contract/sign
   • 方法: POST
   • 参数: { token, contractId, signatureImage }（签名图片）
   • 返回: { success }

小程序页面结构

• pages/index/index：首页（登录/注册入口）
• pages/login/login：登录页面（手机号登录）
• pages/agreement/agreement：用户协议和隐私政策
• pages/info/fill：信息填写（包括身份证、银行卡上传）
• pages/contract/preview：合同预览
• pages/contract/sign：签署页面
• pages/personal/center：个人中心
• pages/personal/salary：工资明细
• pages/personal/leave：离职操作

代码示例（部分）

登录获取手机号

复制插入

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>

复制插入

javascript复制插入

getPhoneNumber(e) {
  if (e.detail.errMsg === "getPhoneNumber:ok") {
    const { encryptedData, iv } = e.detail;
    // 调用登录接口，传递code、encryptedData、iv
    wx.login({
      success: (res) => {
        const code = res.code;
        wx.request({
          url: 'https://your-api-domain.com/login',
          method: 'POST',
          data: { code, encryptedData, iv },
          success: (res) => {
            // 存储token
            wx.setStorageSync('token', res.data.token);
          }
        });
      }
    });
  }
}

复制插入

身份证识别

javascript复制插入

wx.chooseImage({
  count: 1,
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0];
    wx.uploadFile({
      url: 'https://your-api-domain.com/idcard/ocr',
      filePath: tempFilePath,
      name: 'image',
      formData: { type: 'front' }, // 正面或反面
      header: { 'Authorization': `Bearer ${wx.getStorageSync('token')}` },
      success: (res) => {
        const data = JSON.parse(res.data);
        // 更新表单数据
        this.setData({ idCardInfo: data });
      }
    });
  }
});

复制插入

合同预览

javascript复制插入

wx.downloadFile({
  url: 'https://your-api-domain.com/contract/get',
  header: { 'Authorization': `Bearer ${wx.getStorageSync('token')}` },
  success: (res) => {
    const filePath = res.tempFilePath;
    wx.openDocument({
      filePath: filePath,
      success: function (res) {
        console.log('打开文档成功');
      }
    });
  }
});

复制插入

注意事项

• 隐私政策：需要在小程序首次启动时要求用户同意隐私政策，否则无法获取手机号。
• 安全性：敏感操作（如获取手机号、身份证信息）需要用户授权，传输过程使用HTTPS。
• 性能优化：图片上传前可进行压缩，避免大文件上传。

以上是一个基本的设计方案，具体实现时需要根据实际API接口进行调整。

微信小程序设计方案：员工入职/离职管理系统

一、整体架构

复制插入

graph TD
A[微信小程序] --> B(前端模块)
A --> C(API接口层)
C --> D[外部业务系统]
B --> E[微信原生能力]
E --> F[获取用户信息]
E --> G[文件处理]
E --> H[OCR识别]

复制插入

二、核心功能实现方案

1. 登录认证模块

javascript复制插入

// 微信授权登录
wx.login({
  success: res => {
    wx.request({
      url: 'https://api.example.com/auth',
      data: { code: res.code },
      success: authRes => {
        wx.setStorageSync('token', authRes.data.token)
      }
    })
  }
})

// 获取手机号（需用户授权）
<button open-type="getPhoneNumber" @getphonenumber="getPhone"></button>

复制插入

1. 证件识别模块（身份证/银行卡）

javascript复制插入

// 拍照并调用OCR接口
wx.chooseImage({
  success: res => {
    wx.uploadFile({
      url: 'https://api.example.com/ocr/idcard',
      filePath: res.tempFilePaths[0],
      name: 'file',
      formData: { type: 'front' }, // 正面/反面
      success: ocrRes => {
        const { name, idNumber } = ocrRes.data
        // 自动填充表单
      }
    })
  }
})

复制插入

1. 合同文档处理流程

javascript复制插入

// 获取合同文件流
wx.request({
  url: 'https://api.example.com/contract',
  responseType: 'arraybuffer',
  success: res => {
    const filePath = `${wx.env.USER_DATA_PATH}/contract.pdf`
    wx.getFileSystemManager().writeFile({
      filePath,
      data: res.data,
      success: () => wx.openDocument({ filePath })
    })
  }
})

// 电子签名保存
const canvas = this.createSelectorQuery().select('#signCanvas')
canvas.node().then(res => {
  res.node.toImage().then(image => {
    wx.uploadFile({
      url: 'https://api.example.com/signature',
      filePath: image.path
    })
  })
})

复制插入

三、页面结构设计

复制插入

pages/
├── index/               // 首页
├── auth/                // 登录授权
├── onboarding/          // 入职流程
│   ├── step1-agreement  // 协议确认
│   ├── step2-upload     // 证件上传
│   ├── step3-preview    // 合同预览
│   └── step4-sign       // 电子签署
├── offboarding/         // 离职流程
├── profile/             // 个人中心
│   ├── info            // 个人信息
│   ├── contracts       // 合同管理
│   └── salary          // 工资明细
└── document/            // 文档预览

复制插入

四、关键API接口设计

1. 认证服务

   • POST /auth/login 微信登录
   • POST /auth/phone 获取手机号

2. OCR识别服务

   • POST /ocr/idcard 身份证识别
   • POST /ocr/bankcard 银行卡识别

3. 数据服务

   • POST /employee 保存员工信息
   • GET /contract/{type} 获取合同文档
   • POST /contract/sign 提交签署

4. 个人中心服务

   • GET /profile 获取个人信息
   • GET /salary 获取工资明细
   • POST /termination 提交离职申请

五、安全与合规措施

1. 数据加密

   • 敏感字段使用AES-256加密传输
   • 身份证号处理为：$ \text{encrypted} = \text{AES}( \text{idNumber}, \text{key} ) $

2. 隐私合规

   • 单独获取用户授权条款
   • 身份证照片添加水印：$ \text{watermark} = \text{USERID} + \text{DATE} $

3. 文件安全

   • 合同文档添加数字签名：$ \text{signature} = \text{SHA256}( \text{content} + \text{secret} ) $

六、性能优化方案

1. 资源预加载

javascript复制插入

// 预加载合同模板
wx.downloadFile({
  url: 'https://api.example.com/contract/preload'
})

复制插入

1. 缓存策略

javascript复制插入

// 缓存工资单数据
const cacheKey = `salary-${month}`
const data = wx.getStorageSync(cacheKey) || await fetchSalary(month)

复制插入

七、部署方案

1. 微信小程序配置

   • 服务器域名白名单：api.example.com
   • 业务域名：doc.example.com（文档预览）
   • 所需权限：摄像头、相册、文件系统

2. 灰度发布机制

   • 通过微信开放平台分阶段发布
   • AB测试关键流程：$ \text{转化率} = \frac{\text{完成签约数}}{\text{启动流程数}} $

八、测试用例（示例）

1. 证件识别测试

   • 输入：身份证正面照片
   • 预期输出：

     复制插入

     {
       "name": "张三",
       "idNumber": "1101011990****1234",
       "validDate": "2020.01.01-2030.01.01"
     }
     

     复制插入

   • OCR准确率要求：$ \text{准确率} > 99\% $

2. 合同签署流程

   复制插入

   sequenceDiagram
   用户->>小程序： 发起签约
   小程序->>API： 请求合同模板
   API-->>小程序： 返回PDF流
   小程序->>用户： 渲染预览
   用户->>小程序： 确认签署
   小程序->>API： 提交签名图片
   API-->>小程序： 返回审核状态
   

   复制插入

九、技术栈选择

• 前端框架：微信原生 + Wepy
• OCR引擎：腾讯云OCR服务
• PDF渲染：微信原生openDocument
• 签名组件：自定义Canvas手写板
• 状态管理：微信自带Storage + 全局App对象

此方案满足所有需求点，特别优化了：

1. 横向拍照自动旋转功能
2. 证件识别失败时的手动校正
3. 合同签署状态的实时推送
4. 离职/入职流程的冲突检测拦截（防止重复操作）