Web & 小程序 🖥️

噗噗订阅管理 - release-1.3.0 底部查看更新内容 准备开始慢慢更新 完成上一版开发后一直没管，想着就自己管理一下订阅，避免扣费。不过前两天看到微信数据显示有几十个用户陆续打开过小程序，既然还是能被人看见而且可能使用，那就继续更新。 如果有任何建议，欢迎在小程序中的设置页面的反馈中提出。 Echarts 之前草草地做了历史数据页面，这次整理了一下小程序中基础使用Echarts的步骤 根据官方提供的模版项目把ec-canvas这个文件夹复制到自己项目中：https://github.com/ecomfe/echarts-for-weixin/tree/master/ec-canvas ec-canvas.js中有个isUseNewCanvas的变量，把默认值改成true，这样可以避免一个Canvas 2D警告 (Javascript项目跳过)Typescript项目需要给echarts.js添加类型声明文件，主要就是setOption这个方法。1 官方例子pages文件下随便找个例子抄一抄，完成自己页面中文件修改就可以展示图表了 index.json index.wxml index.js/ts pages/multiCharts下面展示了如何创建多个图表 pages/lazyLoad下面展示了如何懒加载图表，即可以先异步请求数据，再根据数据展示图表 推荐使用lazyLoad的方式来创建多个图标，充分利用selectComponent()的灵活性 更新内容 右上角按钮历史数据改成数据分析，并修改了数据分析页面的图表。 不过周末时间有限，只加了汇总数据，后续添加各月详情列表。 删除主页“各类别金额”部分，鸡肋。 更换底部添加按钮图标，统一风格。 修改添加页面图标选择的样式，统一风格。 图标选择popup内增加了类别选择，方便查找。 未来计划 Release-1.4.0 给订阅类别添加颜色，方便区分 在数据分析页面添加每月的详细数据列表 Release-2.0.0 离线数据，现在所有操作都是实时的，没有网络无法使用。 Release-2.1.0 添加新计划时能有更视觉化的操作方式，快速选择新计划的时间范围 类型定义代码 declare module "echarts" { interface ECharts { setOption(option: EChartOption, opts?: EChartsOptionConfig): void; } interface EChartOption<TSeries = EChartOption.Series> {} namespace EChartOption { type Series = any; } interface EChartsOptionConfig { notMerge?: boolean | undefined; lazyUpdate?: boolean | undefined; silent?: boolean | undefined; } }  ↩︎

背景 今年被几个订阅扣了不少钱，所以想找一个订阅管理软件，但是没有找到满意的，大多数订阅管理软件中每一条记录都只能有一个价格，一个连续周期。 但是我有不少订阅的价格一直在变化（从折扣到原价，改变订阅套餐等）。我希望能够在一个订阅里管理价格的变化，并能统计相关支出和提醒。 所以打算自己写一个。然后开始考虑是做一个APP还是小程序。相比较而言的话，小程序的开发成本更低，而且不需要用户安装，并且现在APP通知有点被滥用，可能提醒效果还不如小程序，所以决定先做一个小程序。 开发体验 小程序从2018年开始就已经火了，现在都已经2024年了，相关文档，教程，工具都已经很成熟了。所以整体开发体验算是相当流畅了（抛开测试部份）。 不过小程序认证以及版本审核还是有点繁琐的。如果是企业帐号应该会方便不少，但是个人的话，只能跟着相关条款修改了。 开发工具 用的都是比较常见的技术栈了。 前端 微信开发者工具 后端 App: Nodejs + Nestjs Data: Python + FastAPI 数据库 Sqlite MongoDB 缓存 Dragonfly (Redis) 部署 Kubernetes (测试环境) Docker Compose (生产环境) 生产环境架构 部署在一台阿里云的机器上，使用Docker Compose管理容器，毕竟只有一个机器，Kubernetes有点大材小用。 使用Traefik作为反向代理，同时也是HTTPS证书管理工具（Let’s encrypt）。 部署了一个MongoDB Express，并没有向外暴露，方便查看和管理MongoDB。 开发流程 毕竟是个小项目，所以开发流程尽量简单。利用Github Actions做CI/CD，每次push都会自动运行测试，然后release分支会打包Image并推送到Docker Hub。 然后在Kubernetes（测试环境）上拉取最新的Image做测试。最后没问题再部署到生产环境。 其他 暂时先分享这么多，贴上一个小程序的二维码，万一被有缘人看见了，欢迎体验。