微信小程序仪表板组件流程的开源分析

前言

最近开发了一个小程序动态仪表盘组件，并以第三方小程序组件的形式发布给npm，可以安装在任何小程序项目中获得仪表盘功能。

组件功能目前还很简单。让我们先预览一下效果：

感兴趣的直接看源代码：

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

下面是踩坑的过程。

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

官方提供了一个CLI工具，用于开发小程序的自定义组件。首先，在全球范围内安装此工具：

Npminstall-g @微信-miniprogram/miniprogram-CLI，然后使用它初始化自定义组件项目：

在迷你程序初始化定制组件的这一步中，一个前端工程模板将被下载到本地。这个模板是一个基于grave的前端自动化项目，使用前需要安装依赖项：

Npm i也许你会发现这个项目的默认依赖版本和我一样有点老，然后习惯性地在VSCode中使用Npm Dependency自动升级，重新安装，然后你就会变傻。新版本的babel插件将使项目无法运行。

恢复到默认版本，重新安装并启动开发服务：

此时，npm run watch的自动化项目会将src/中的代码构建到miniprogram_dev/文件夹中，这是小程序的标准目录结构，可以通过微信开发者工具导入运行。导入时注意使用测试appId。

然后，我们在这里编辑src中的源代码文件，另一端将同步构建为miniprogram_dev。微信开发者工具在检测到文件变化时会自动重新编译项目，目前来看还是很不错的。

不过就我个人的经验来看，这个自动化项目有一些小问题。偶尔，个别文件会在编译中“丢失”。比如风格突然消失或者js编译失败，js文件就会消失，微信开发者工具就会报错。

最糟糕的是这个项目的编译过程集成了eslint代码检查，如果检查没有通过js文件就不会编译，开发人员工具会报错。默认eslint配置有多不正常？至少对我来说，这是一次难忘的经历。我花了一个下午咬牙切齿地找出各种各样的eslint错误意味着什么，以及如何关闭它们。

然而，eslint也有一些有意义的要求。例如，我通常不传递parseInt()的第二个参数，严格来说这不是一个好的做法。

画布在小程序组件中的使用

开发过程中遇到的最糟糕的问题是没有仔细看文档，但我觉得更大的责任是小程序的官方文档太乱。

初始化canvasContext实例的wx.createcanvasContext()方法实际上有两个参数，第二个参数通常不传递。该参数只需要在组件中使用时传递。Canvas之前从未在组件中使用过，导致忘记了有这样一个参数，也没有报错，就是canvas无论如何也画不出任何东西。经过长时间的调查，发现这就是原因。

这种情况会给开发工具带来错误，为什么不呢？

在查文档的过程中，真的感觉小程序的文档组织太TM乱了，知识点齐全，但同一件事的知识点却散落各处。比如单看【框架】一栏的内容，就无法掌握小程序框架是什么。只有看了《指南》才能大致了解，再看组件和API才能写出hello world项目。

我们来谈谈定制组件的开发。自定义组件的接口、开发、发布、安装的内容分散在【框架】、【指南】、【工具】的不同空间，也就是第一次开发自定义组件时，需要翻整文档才能找到我需要知道的所有东西。

发布和安装npm包

定制组件将在开发后发布给npm。发布过程是整个过程中最愉快的部分。没有坑，开发环境测试没问题。运行构建命令：

此时，npm运行构建将生成一个miniprogram_dist/文件夹。那个。gitignore和。整个项目的大部分都是预设的。如果你把代码提交给GitHub，你只会提交源代码和必要的工程文件。如果您想发布到npm，您只需要执行：

Npm publish将以applet支持的格式(包括miniprogram_dist/)将代码发布到Npm，然后就可以在其他applet项目中安装使用。小程序项目安装npm包有点麻烦。

首先，在applet代码的根目录(在project.config.json中由miniprogramRoot配置的目录)依次执行：

NPM init NPM I weapp-plugin-dashboard-s-production//这里以wea PP-plugin-dashboard模块的安装为例。只有以这种方式安装的模块才算。首先，我创建了一个package.json文件，并编写了依赖包的名称，然后我执行了NPM。虽然模块也已经下载，但是在下一个开发者工具中会报告一个错误，表示找不到npm包，可能是因为package.json文件没有标准化，但是文档没有告诉什么package.json是标准化的。

安装后，目录node_modules/在开发人员工具中不可见，因为这些模块小程序此时不支持它，需要重新构建才能使用。

首先在开发人员工具的项目配置中开始使用npm模块，然后执行“Tools-Build npm”的操作。成功后，将生成一个miniprogram_npm/folder，可以在开发人员工具中看到。在这一步，npm包真正安装成功，可以在小程序项目中正常调用。

最后的

再次输入项目地址，

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

欢迎有兴趣的朋友参与开发。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。