微信小程序开发 - 第二篇

Mon, 17 Mar 2025 15:25:26 +0800

噗噗订阅管理 - 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这个方法。¹
官方例子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;
    }
  }

↩︎

微信小程序开发 - 第一篇

Thu, 24 Oct 2024 00:19:30 +0800

背景

今年被几个订阅扣了不少钱，所以想找一个订阅管理软件，但是没有找到满意的，大多数订阅管理软件中每一条记录都只能有一个价格，一个连续周期。

但是我有不少订阅的价格一直在变化（从折扣到原价，改变订阅套餐等）。我希望能够在一个订阅里管理价格的变化，并能统计相关支出和提醒。

所以打算自己写一个。然后开始考虑是做一个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做测试。最后没问题再部署到生产环境。

其他

暂时先分享这么多，贴上一个小程序的二维码，万一被有缘人看见了，欢迎体验。

Web & 小程序 🖥️ on 噗噗碎碎念