1、小程序自身有一套脚手架叫 @wechat-miniprogram/miniprogram-cli 我们使用这套脚手架来搭建自己的组件并发布到 npm 官网
wechat-miniprogram/miniprogram-cli GitHub官网
2、桌面新建文件夹 MeBtn
3、打开文件夹 在文件夹中打开 cmd 终端 全局安装wechat-miniprogram/miniprogram-cli
4、’安装成功之后 能找到相应文件夹
通过指令 miniprogram --help 查看相应指令
5、init 初始化 指令
6、miniprogram init --type MeBtn 创建一个项目 名称为 MeBtn 直接回车。。。
MeBtn 组件的模板
7、package.json文件中的依赖项安装-----------安装依赖项 npm install
src 目录下 删掉不需要的问价 other是模板中引用的一个组件 删掉
8、在index.wxml中创建自己的button
9、cmd中执行 gulp 回车(安装gulp否则不是命令不能执行)
10、验证:
-
在微信小程序 第三方组件的运用 vant-weapp 文章中测试
-
miniprogram_npm文件夹下 创建的文件夹 mybutton
-
将MeBtn\miniprogram_dist 中的文件复制到 demo中的 文件夹 mybutton中
-
pages---> index.json中引入
-
pages---->index.wxml中使用
11、发布 进入项目(新建文件夹bjwdbtn 复制测试项目中的所有文件) 删掉 node_modules文件夹 (太大 使用的时候重新安装)
12、登录npm账号
如果是淘宝镜像需要修改 C:\Users\bai
正确镜像
12、发布npm publish
- 注意发布的时候 文件名命名需要规范(好像不能有大写字母我失败了好几次)最后成功的文件名为bjwdbtn
- 项目中文件 package-lock.json 中的name需要和文件名一致bjwdbtn 否则发布不成功
- 项目中文件package.json中的name需要和文件名一致bjwdbtn 否则发布不成功