技能要求:
HTML5
经验要求:
5-10年经验
工作描述:
项目编号:【186470】
一、项目背景
这是一个传统文化解读的趣味测试H5。用户输入生辰信息,系统排盘生成八字,再通过AI生成“前世身份卡”(含前世职业、成就、卡通形象),用户可保存卡片分享至微信好友/朋友圈。完全免费,无付费功能,无用户注册。
二、核心功能模块(共4个)
模块1:欢迎页
主标题:“探索你的前世今生”(或类似文案,你提供)
副标题:一句话吸引用户(你提供)
按钮:“免费开启解读”,点击进入信息收集页
模块2:信息收集页
输入项:姓名(选填)、出生日期(公历,年月日)、出生时间(时,默认12:00)
提示文案:“你的信息仅用于本次解读,不会被保存”
按钮:“生成我的命格”,点击后显示加载动画(如“正在连接你的前世今生...”),调用后端API
模块3:结果展示页
顶部:八字四柱(年柱、月柱、日柱、时柱,天干+地支)
中部:前世身份卡,包含前世职业、前世成就(一句夸张有趣的话)、前世寄语(一句温情文案)、卡通人物形象(根据五行匹配不同模板)
底部:
“保存图片”按钮:点击后,将当前结果页(含八字+前世身份卡)合成一张图片,保存至手机相册
“分享给朋友”按钮:点击后,调起微信分享接口,分享一张带二维码的裂变卡片(二维码指向你的H5入口链接)
AI生成标识(必须):“本内容由AI生成,仅供参考”
模块4:后端API(外包方负责开发)
API 1:接收前端传来的出生日期+时间,调用lunar-javascript(或lunisolar)计算八字四柱、十神、五行,返回JSON
API 2:接收八字结果,拼接预设提示词,调用DeepSeek API生成前世职业、成就、寄语,返回JSON
注意:后端需预留微信JS-SDK签名服务接口,用于前端分享配置
三、微信分享功能
使用微信JS-SDK,实现自定义分享标题、描述、缩略图
分享卡片图片由前端合成(含用户前世身份信息+二维码),分享时调用
二维码由前端生成,指向H5入口链接
四、技术栈要求
前端:原生HTML/CSS/JavaScript,或React/Vue(你指定,或由外包方推荐)
后端:Node.js(推荐)或Python
八字计算库:lunar-javascript(开源)
AI接口:DeepSeek API
图片合成:html2canvas
五、设计风格
主色调:红色系(#ff5722等),背景深色(#1a1614等),营造神秘感
卡片风格:卡通、趣味、年轻化
适配:移动端H5(375px宽),微信内置浏览器
页面数量:共3屏(欢迎页、信息页、结果页)
六、交付物
完整前端源码(HTML/CSS/JS,或Vue/React项目)
完整后端源码(Node.js/Python)
部署文档(含服务器环境配置、API密钥配置、微信JS-SDK配置说明)
演示链接(部署在乙方测试服务器,供验收)
七、验收标准
输入正确生辰后,八字四柱与公开排盘工具(如“问真八字”)结果一致
AI生成内容符合预期风格,无乱码、无“幻觉”(如胡编职业)
微信内分享卡片正常展示,二维码可扫码进入H5
所有页面在不同尺寸手机、微信版本下显示正常