微信小程序 构建自己的第三方组件 并发布到 npm 官网

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、验证:

   

 

11、发布  进入项目(新建文件夹bjwdbtn  复制测试项目中的所有文件)  删掉 node_modules文件夹 (太大  使用的时候重新安装)

12、登录npm账号 

如果是淘宝镜像需要修改  C:\Users\bai

正确镜像  

12、发布npm  publish

  • 注意发布的时候 文件名命名需要规范(好像不能有大写字母我失败了好几次)最后成功的文件名为bjwdbtn
  • 项目中文件 package-lock.json 中的name需要和文件名一致bjwdbtn 否则发布不成功
  • 项目中文件package.json中的name需要和文件名一致bjwdbtn 否则发布不成功

13、查看 

猜你喜欢

转载自blog.csdn.net/weixin_41040445/article/details/114500937