如何开发微信第三方小程序组件

开发一个开源的自定义组件包给他人使用，首先需要明确他人是要如何使用这个包的，如果只是拷贝小程序目录下直接使用的话，可以跳过此文档。此文档是以 npm 管理自定义组件包的前提下进行开发构建的

话不多说先贴官方文档地址

小程序官网说明
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/trdparty.html
官网维护一个第三方组件项目包
https://github.com/wechat-miniprogram/miniprogram-custom-component
官网cli构建地址
https://github.com/wechat-miniprogram/miniprogram-cli

CLI初始化，先全局初始化（当然你也可以局部项目使用，或者配合npx使用）

1. npm install -g @wechat-miniprogram/miniprogram-cli
2. 创建一个项目文件夹
3. miniprogram init --type custom-component（此时会让你输入一些信息，例如包名、作者，git仓库地址等）
4. 打开项目，执行：npm i
5. 参考如下官网说明

开发
安装依赖：
npm install
执行命令：
npm run dev
默认会在包根目录下生成 miniprogram_dev 目录，src 中的源代码会被构建并生成到 miniprogram_dev/components 目录下。如果需要监听文件变化动态构建，则可以执行命令：

npm run watch
ps: 如果 minirpogram_dev 目录下已存在小程序 demo，执行npm run dev则不会再将 tools 下的 demo 拷贝到此目录下。而执行npm run watch则会监听 tools 目录下的 demo 变动并进行拷贝。

生成的 miniprogram_dev 目录是一个小程序项目目录，以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。

进阶：

如果有额外的构建需求，可自行修改 tools 目录中的构建脚本。
内置支持 webpack、less 语法、sourcemap 等功能，默认关闭。如若需要可以自行修改 tools/config.js 配置文件中相关配置。
内置支持多入口构建，如若需要可自行调整 tools/config.js 配置文件的 entry 字段。
默认开启 eslint，可自行调整规则或在 tools/config.js 中注释掉 eslint-loader 行来关闭此功能。

发布
ps: 发布前得确保已经执行构建，小程序 npm 包只有构建出来的目录是真正被使用到的。

如果还没有 npm 帐号，可以到 npm 官网注册一个 npm 帐号。
在本地登录 npm 帐号，在本地执行：
npm adduser
或者

npm login
在已完成编写的 npm 包根目录下执行：
npm publish
到此，npm 包就成功发布到 npm 平台了。

PS：一些开发者在开发过程中可能修改过 npm 的源，所以当进行登录或发布时需要注意要将源切回 npm 的源。