如何详细解析开源微信小程序仪表盘组件开发过程？

本文共计1708个文字，预计阅读时间需要7分钟。

前言+最近开发了一个小程序动态仪表盘组件，并将其以第三方小程序组件的形式发布到npm。任意小程序项目都可以安装这个模块，从而获得仪表盘功能。+组件功能目前还非常简单，先来预览一下。

前言

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

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

感兴趣的直接看源码：

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插件会让项目跑不起来。