微信小程序第三方自定义组件开发详细流程

微信小程序官方文档中有描述怎么去开发第三方自定义组件(官方文档)，但是官方文档对于没有制作过npm包的小白可能有点不那么好懂。

安装相关工具及下载模板

1.官方提供了命令行工具，用于快速初始化一个项目。执行如下命令安装命令行工具：

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

注:npm的安装大家自行网上查询

2.然后新建一个空目录作为项目根目录，在此根目录下执行：

miniprogram init --type custom-component

执行该命令之后，新建的目录下会生成很多文件，这些文件是根据官方的项目模板生成的完整项目

image-20210825145200743.png

3.通过微信官方开发工具打开项目执行命令

npm install

image-20210825145818597.png

执行完后会生成node_modules文件夹

4.在执行

npm run dev

image-20210825145937737.png

执行完后生成miniprogram_dev文件夹

文件夹之间的关系

image-20210825151916045.png

其中

• miniprogram_dev:执行npm run dev生成的文件夹

• node_modules:执行npm install生成的依赖文件夹

• src:开发自定义组件及相关文件存放的地方（源文件存放的地方）

• test:测试文件

• tools:工具文件夹起重miniprogram_dev文件的生成就是根据tools->demo文件夹生成的

  其他文件就是一些配置文件，不清楚的可以在网上查询一下

image-20210825152434942.png

image-20210825152452185.png

image-20210825152533248.png

大家可以发现一个问题，miniprogram_dev中的components文件夹中的文件全部来自于src中，其他文件全部来自于tools中的demo文件夹中的文件

那么现在的问题就是怎么将不要的文件给删除掉，当然不删掉也是可以的，但是对于有强迫症的我来说，我一定要把我不需要的文件给干掉，在删除这些文件，我也是踩了很多坑，直接删除再次运行直接报错，报文件缺失。报文件缺失那是肯定的，毕竟我删除了文件，那么怎么去掉这个问题，并正确的加上自己的代码捏？一般报文件缺失，要么就是其他文件有引用找不到文件，要么就是某些配置文件中，配置了该路径发现文件没有。第一种情况我通过全局搜索发现没有引用，那么肯定就是配置的问题，那么我们就来找配置文件，一般就是config.js

image-20210825153956904.png

到这一步之后大家运行npm run dev发现miniprogram_Dev中的文件并没有发生改变，此时我们要换一个命令npm run watch，miniprogram_dev文件夹就会更新为最新的代码

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

大家会发现miniprogram_dev文件夹中的目录结构是一个完整的小程序结构，可以通过微信小程序开发工具打开并运行便于开发者开发自定义组件。

npm发布

在发布前先执行npm run build构件正式版本，会生成一个miniprogram_dist文件夹，这个目录是正在被大家使用的

1.如果还没有npm账号的，可以先到npm官网先注册一个账号

2.在本地登录npm账号，执行

npm adduser

或者

npm login

账号名

密码

邮箱

3.在已完成编写的 npm 包根目录下执行

npm publish

注意：发布之前一定要检查下你当前的源是不是npm的源，很有可能之前你改过源为taobao的

• 查看当前源

npm config get registry

• 切换源

npm config set registry https://registry.npmjs.org/

发布之前也需要更改一下readme.md文件，里面是描述当前npm包是怎么使用的，有什么注意点或其他的解释

发布完之后可以登录npm官网查看下是否上传成功