前言
最近开发了一个小程序动态仪表盘组件,并以第三方小程序组件的形式发布到npm,任意小程序项目都可以安装这个模块,从而获得仪表盘功能。
组件功能目前还非常简单,先来预览一下效果:
感兴趣的直接看源码:
下面是踩坑过程。
如何开发微信小程序自定义组件
官方提供了一个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,微信开发者工具检测到文件