更新记录

1.0.0（2025-12-22） 下载此版本

• 新增打卡页与设置考勤点页
• 集成天地图（H5）与高德（App/小程序）定位与逆地理
• 支持地图选点、半径滑块与范围判断圆形绘制
• 打卡记录本地存储，今日列表展示
• 底部菜单（打卡/设置）与仿钉钉交互样式 支持用户二开，不需要授权，拿走即用

平台兼容性

uni-app(3.7.6)

考勤打卡模版（H5/App/小程序）

项目概述

• 提供打卡页与设置考勤点页，支持定位、逆地理编码、地图选点与半径地理围栏判断。
• H5 使用天地图 JS API 4.0；App/小程序使用原生 map 组件与高德/腾讯逆地理。
• 本地存储考勤点与半径，今日打卡记录可视化展示。

主要功能

• 定位与授权：获取当前位置，自动申请授权（微信小程序支持授权引导）。
• 逆地理编码：将经纬度转换成地址（H5 天地图优先，App/小程序高德优先，腾讯兜底）。
• 考勤点设置：地图点击选点、拖动中心选点；半径滑块设置；圆形范围实时预览。
• 范围判断：使用 Haversine 算法判定是否在考勤范围内。
• 打卡记录：上/下班打卡，记录存储至本地并显示今日列表。
• 底部菜单：打卡 与 设置 两个 Tab 快速切换。

目录结构（节选）

• pages/attendance/index.vue 打卡页
• pages/attendance/set-point.vue 设置考勤点页（H5 天地图 / 非 H5 原生地图）
• pages.json 页面与 TabBar 配置
• config/keys.js 地图服务密钥配置与读取
• manifest.json 基本工程配置

平台适配

• H5：天地图 JS API 4.0，点击选点与圆形范围绘制。
• App/小程序：原生 map 组件，支持 markers、circles；逆地理用高德/腾讯。

密钥配置

• 文件：config/keys.js
  • MAP_KEYS.TIANDITU_KEY（天地图 TK）
  • MAP_KEYS.AMAP_KEY（高德 Key）
  • MAP_KEYS.TENCENT_KEY（腾讯地图 Key）
• 读取策略：优先读取 MAP_KEYS，否则读取本地存储 uni.getStorageSync(name)。
• 开发时也可以本地写入：
  • uni.setStorage({ key: 'TIANDITU_KEY', data: '你的TK' })
  • uni.setStorage({ key: 'AMAP_KEY', data: '你的Key' })
  • uni.setStorage({ key: 'TENCENT_KEY', data: '你的Key' })
• 安全建议：真实密钥不入库，生产通过环境变量或构建脚本注入。

快速上手

1. 配置密钥：填入 config/keys.js 或使用本地存储。
2. 运行项目：使用 HBuilderX 导入工程运行到 H5/App/小程序。
3. 设置考勤点：
   • H5：在“设置”页地图点击或拖动中心点选位，调整半径并保存。
   • App/小程序：使用地图点击选点或“打开系统选点”，调整半径并保存。
4. 打卡页：刷新位置，确认范围状态，在范围内进行打卡；查看今日记录。

页面说明

• 打卡页
  • 定位与地址：pages/attendance/index.vue:159-185
  • 逆地理编码（平台切换）：pages/attendance/index.vue:186-244
  • 范围判断与距离：pages/attendance/index.vue:266-274
  • 打卡记录存储：pages/attendance/index.vue:285-311
• 设置页
  • H5 天地图初始化与点击选点：pages/attendance/set-point.vue:102-123
  • H5 圆形范围绘制：pages/attendance/set-point.vue:133-149
  • 非 H5 地图与圆形：pages/attendance/set-point.vue:14-25, 170-179, 199-207
  • 保存考勤点与半径：pages/attendance/set-point.vue:288-296
  • 逆地理编码（平台切换）：pages/attendance/set-point.vue:298-359
• TabBar 配置：pages.json:28-47
• 密钥读取：config/keys.js:1-12

逆地理编码说明

• 天地图（H5 优先）：https://api.tianditu.gov.cn/geocoder?postStr=...&type=geocode&tk=...
  • postStr 需进行 encodeURIComponent；结构：{ lon, lat, ver: 1 }
  • 解析 result.formatted_address 为显示地址。
• 高德（App/小程序优先）：https://restapi.amap.com/v3/geocode/regeo?location=lon,lat&key=...
• 腾讯（兜底）：https://apis.map.qq.com/ws/geocoder/v1/?location=lat,lon&key=...

权限与打包

• 微信小程序定位授权：页面内包含授权引导与 openSetting。
• App 打包需要添加定位权限说明与网络权限。
• H5 需在 HTTPS 环境下使用定位。

常见问题

• H5 底部菜单不显示：确保进入的是 tabBar.list 中的页面，使用 uni.switchTab 切换。
• 地址为空：检查密钥配置；确保 H5 使用天地图 TK，App/小程序配置高德/腾讯 Key。
• 坐标系：定位使用 gcj02，兼容国内地图；H5 逆地理使用天地图接口。

自定义扩展

• 多考勤点管理、不同半径与时间段策略。
• 云端存储与管理后台统计。
• 异常打卡申诉与备注上传。
• 位置偏差优化（基站/室内 Wi-Fi 辅助）。

代码位置参考

• 打卡页逆地理：pages/attendance/index.vue:186-244
• 打卡页范围判断：pages/attendance/index.vue:266-274
• 设置页天地图：pages/attendance/set-point.vue:102-149
• 设置页保存：pages/attendance/set-point.vue:288-296
• 密钥配置：config/keys.js:1-12