小程序端
小程序端基于微信小程序原生开发体系,使用 Skyline 渲染引擎和 TDesign MiniProgram 组件库,并通过 ECharts 展示账单统计图表。
页面组成
| 页面 | 用途 |
|---|---|
| 首页 | 展示和进入旅行账本 |
| 账单 | 查看、添加和管理旅行收支 |
| 行程 | 记录旅行安排与地点 |
| 统计 | 展示分类统计和图表 |
| 创建账本 | 建立新的多人旅行账本 |
| 账本详情 | 查看和维护账本信息 |
| 成员列表 | 管理同行成员及成员别名 |
| 个人中心 | 查看和修改个人资料 |
| 反馈 | 提交使用意见 |
| 票券 | 管理旅行相关票券信息 |
技术特点
- 使用 Skyline 作为渲染引擎,小程序需在 Skyline 模式下运行
- 全局接入 TDesign 的按钮、图标、导航栏和弹出层等组件
- 使用自定义组件封装账本卡片、账单分组、日程项、成员头像和环形图
- 通过统一的 API 模块封装
wx.request - 使用本地存储保存登录后的 JWT,接口响应统一读取
code、data和message - 按需加载组件,减少启动阶段的代码加载量
本地开发
环境要求:
- 微信开发者工具
- Node.js 与 npm
- 已启动的好用旅记后端服务
安装依赖:
1 | git clone https://github.com/chaofanx/UsefulTravelogue.git |
创建本地配置:
1 | cp utils/env.example.js utils/env.js |
在 utils/env.js 中配置后端 API 地址,并在 project.config.json 中填写微信小程序 AppID。随后使用微信开发者工具打开项目,执行“工具 -> 构建 npm”,并选择 Skyline 渲染模式运行。