开源一个微信小程序仪表盘组件过程解析

前言

最近开发了一个小程序动态仪表盘组件，并以第三方小程序组件的形式发布到npm，任意小程序项目都可以安装这个模块，从而获得仪表盘功能。

组件功能目前还非常简单，先来预览一下效果：

感兴趣的直接看源码：

https://github.com/tower1229/weapp-plugin-dashboard

下面是踩坑过程。

如何开发微信小程序自定义组件

官方提供了一个CLI工具专门用于开发小程序自定义组件，首先全局安装这个工具：

npm install -g @wechat-miniprogram/miniprogram-cli

然后用它初始化一个自定义组件项目：

miniprogram init --type custom-component

这一步会下载一个前端工程模板到本地，这个模板是一个基于gulp的前端自动化工程，使用前需要先安装依赖：

npm i

有可能你会像我一样发现这个项目的默认依赖版本有点老，然后习惯性的在VSCode里用Npm Dependency自动升级了一下，重新安装，然后就傻逼了，新版babel插件会让项目跑不起来。

还原到默认版本重新安装，启动开发服务：

npm run watch

这时自动化工程会将src/里的代码构建到miniprogram_dev/文件夹，这里面是一个标准的小程序目录结构，是可以用微信开发者工具导入并运行的，导入的时候注意使用测试appId。

然后这边我们编辑src里的源码文件，另一边就会同步构建到miniprogram_dev，微信开发者工具检测到文件变动也会自动重新编译项目，目前为止很美好。

但就我的亲身体验来看，这个自动化工程有点小毛病，偶尔会把个别文件给编译“丢”，比如突然样式没了，或者js编译不通过，那么js文件也就没了，微信开发者工具这边就会报错。

最坑的是，这个工程的编译过程集成了eslint代码检查，检查不通过js文件就不编译，任由开发者工具报错。默认的eslint配置是有多变态？起码对我来说这是个很难忘的经历，一下午都在咬牙切齿的查各种eslint报错是什么意思，怎么关掉。

不过eslint也有一些有意义的要求，比如parseInt()方法的第二个参数通常我都不传，严格来说这样确实不算好的实践。

canvas在小程序组件中的使用

开发过程中遇到最坑的问题，是我自己看文档不仔细导致的，但我觉得更大的责任在于小程序官方文档太乱了。

初始化canvas实例的wx.createCanvasContext()方法，其实有两个参数，第二个参数通常也是都不传，仅在组件内使用时这个参数才需要传this，之前一直没在组件里用过canvas，导致忘了还有这么个参数，也不报错，就是canvas死活画不出东西，查了好半天才发现是这个原因。