桑格助手是一款面向科研人员的微信小程序，提供期刊查询、影响因子（IF）检索、智能选刊等学术辅助功能。项目采用分包架构与预加载策略，支持 AI 智能选刊、WebSocket 实时通信与 ECharts 数据可视化。
| 类别 | 技术 |
|---|---|
| 框架 | 微信小程序原生开发（glass-easel 组件框架） |
| UI 组件库 | TDesign Miniprogram（腾讯开源） |
| 图表可视化 | ECharts 5 + echarts-for-weixin + zrender |
| 样式方案 | WXSS + Less（Design Token 主题配置） |
| 网络通信 | wx.request（RESTful）+ wx.connectSocket（WebSocket） |
| 后端接口 | wx.sangerbox.com / api.shengxin.ren / api2.sangerbox.com |
| 环境要求 | 微信开发者工具（基础库 ≥ 3.10.0） |
SangerAssistant/
├── app.js # 全局入口：登录流程、WebSocket 初始化
├── app.json # 路由配置、TabBar、分包与预加载规则
├── app.wxss # 全局样式变量与公共类（Design Token 映射）
├── _variables.less # TDesign 组件库变量定义
├── designToken.json # 主题色/字体/间距/圆角等设计令牌
├── server/
│ ├── request.js # 统一请求封装（GET/POST/PUT/DELETE、多域名路由）
│ └── websocket.js # WebSocket 单例：心跳保活、自动重连、消息分发
├── utils/
│ └── mockData.js # 模拟数据（轮播图、热门期刊、期刊详情等）
├── pages/ # 主包（TabBar 页面）
│ ├── homePage/ # 首页：轮播图、热门期刊/新闻、智能选刊入口
│ ├── searchPage/ # IF查询页：搜索框、历史记录、热门标签
│ ├── toolsPage/ # 工具页：功能入口集合
│ └── personalPage/ # 个人中心：用户信息、绑定手机/邮箱、订阅消息
├── packageSearch/ # 搜索分包
│ ├── pages/
│ │ ├── searchListPage/ # 搜索结果列表
│ │ ├── searchDetailsPage/ # 期刊详情（IF趋势图、分区、词云等）
│ │ └── IFListPage/ # IF 列表页
│ └── components/
│ ├── ec-canvas/ # ECharts 容器组件
│ └── echarts-wordcloud/ # 词云图插件
├── packageJournal/ # 期刊分包
│ └── pages/
│ ├── journalPage/ # 期刊浏览页
│ ├── journalDetailPage/ # 期刊详情页
│ └── smartJournalPage/ # AI 智能选刊页
├── packageUser/ # 用户分包
│ └── pages/
│ ├── scholarPage/ # 学者查重页（绑定邮箱后可用）
│ ├── newsPage/ # 新闻资讯页
│ ├── recommendPage/ # 推荐页
│ └── goodsPage/ # 商品页
├── packageAdmin/ # 管理分包
│ └── pages/
│ ├── adminPage/ # 管理后台
│ └── feedbackPage/ # 用户反馈页
└── miniprogram_npm/ # npm 构建产物目录（TDesign、ECharts 等）
- 启动时自动调用
wx.login()获取 code，请求/wechat-auth/login完成静默登录 - 登录成功保存 token 与 userInfo 至
localStorage，失败提供重试机制
- 支持关键词搜索，记录本地搜索历史（最多保留 10 条）
- 提供热门标签与热门推荐快捷搜索
- 支持跳转到期刊详情页查看完整指标
- IF 趋势图：柱状图+折线图展示历年发文量与影响因子
- 分区数据：中科院分区 & JCR 分区展示
- 综述占比图：饼图展示 Articles / Reviews / Others 比例
- TOP5 排名：发文国家、机构、稿件分布
- 词云图：基于论文标题提取高频词（内置英文停用词表）
- 支持三种输入模式：组合（标题+摘要）、标题、摘要、AI 对话
- 提供表单验证，后续对接后端选刊接口
- 显示用户头像与昵称，支持同步登录态
- 支持绑定手机号 / 邮箱（含发送验证码、倒计时、表单提交）
- 支持订阅消息权限申请
- 提供查重平台入口（绑定邮箱后可使用）
- 连接地址：
wss://wx.sangerbox.com/ws/wechat?userId=${token} - 内置 30 秒心跳保活（ping/pong 机制）
- 断线自动重连（5 秒延迟，防抖锁）
- 支持多页面注册/注销消息回调
searchPage→ 预加载search分包homePage→ 预加载journal与search分包toolsPage→ 预加载journal分包
# 安装依赖
npm install
# 安装 TDesign 与 ECharts 组件
npm install tdesign-miniprogram echarts echarts-for-weixin zrender- 在微信开发者工具中点击「工具 → 构建 npm」
- 构建完成后，
miniprogram_npm目录将生成编译产物
- 使用微信开发者工具导入项目
- AppID：
wx391127d0a7a30593 - 基础库版本：≥ 3.10.0
编辑 server/request.js 中的 BASE_URL、API_URL 或 SCHOLAR_URL 即可切换接口地址。
项目通过 designToken.json 统一管理设计变量，映射到 app.wxss 全局 CSS 变量：
| 类别 | 变量示例 | 默认值 |
|---|---|---|
| 主题色 | --theme-color |
#1677FF |
| 状态色 | --success-color / --warning-color / --danger-color |
#10B981 / #F59E0B / #EF4444 |
| 背景色 | --bgPage-color / --bgCard-color |
#F8FAFC / #FFFFFF |
| 文本色 | --textPrimary-color / --textSecondary-color |
#0F172A / #64748B |
| 字体尺寸 | --font-size-xs ~ --font-size-3xl |
20rpx ~ 56rpx |
| 圆角/阴影 | --radius-main / --shadow-main |
16rpx / 0 4rpx 20rpx rgba(...) |
使用示例：
.my-box {
background-color: var(--bgCard-color);
border-radius: var(--radius-main);
padding: var(--main-padding);
}| 接口 | 方法 | 说明 |
|---|---|---|
/wechat-auth/login |
POST | 微信登录，获取 token |
/wechat-auth/sendphonecode |
GET | 发送手机验证码 |
/wechat-auth/sendemailcode |
GET | 发送邮箱验证码 |
/wechat-auth/bindphone |
POST | 绑定手机号 |
/wechat-auth/bindemail |
POST | 绑定邮箱 |
/api/curdWOSPredict |
GET | 期刊 Q1 预测数据 |
/api/getDataByName |
GET | 通用期刊数据查询（IF/分区/词云等） |
- 分包体积：项目配置了
packOptions.ignore，大量未使用的 TDesign/ECharts 组件在打包时被排除，有效减小主包体积。 - 懒加载：启用
lazyCodeLoading: "requiredComponents"，按需加载组件。 - 图表兼容性：ECharts 词云插件使用
wx.createOffscreenCanvas类型 2d，需在较新版本微信中运行。 - 样式规范：建议所有页面统一使用
sg-前缀的公共类，避免样式冲突。
v1.0.0：核心 IF 查询、期刊详情、个人中心、WebSocket 通信- 后续迭代：AI 选刊接口联调、查重平台数据同步、消息推送
如有问题请通过小程序「我的 → 反馈」提交，或联系管理员。