小程序端

小程序端基于微信小程序原生开发体系,使用 Skyline 渲染引擎和 TDesign MiniProgram 组件库,并通过 ECharts 展示账单统计图表。

页面组成

页面 用途
首页 展示和进入旅行账本
账单 查看、添加和管理旅行收支
行程 记录旅行安排与地点
统计 展示分类统计和图表
创建账本 建立新的多人旅行账本
账本详情 查看和维护账本信息
成员列表 管理同行成员及成员别名
个人中心 查看和修改个人资料
反馈 提交使用意见
票券 管理旅行相关票券信息

技术特点

  • 使用 Skyline 作为渲染引擎,小程序需在 Skyline 模式下运行
  • 全局接入 TDesign 的按钮、图标、导航栏和弹出层等组件
  • 使用自定义组件封装账本卡片、账单分组、日程项、成员头像和环形图
  • 通过统一的 API 模块封装 wx.request
  • 使用本地存储保存登录后的 JWT,接口响应统一读取 codedatamessage
  • 按需加载组件,减少启动阶段的代码加载量

本地开发

环境要求:

  • 微信开发者工具
  • Node.js 与 npm
  • 已启动的好用旅记后端服务

安装依赖:

1
2
3
git clone https://github.com/chaofanx/UsefulTravelogue.git
cd UsefulTravelogue
npm install

创建本地配置:

1
2
cp utils/env.example.js utils/env.js
cp project.config.tpl.json project.config.json

utils/env.js 中配置后端 API 地址,并在 project.config.json 中填写微信小程序 AppID。随后使用微信开发者工具打开项目,执行“工具 -> 构建 npm”,并选择 Skyline 渲染模式运行。