微信程序封装成npm并发布

看本文前相信你已经有过下方罗列的相关经验：

1、知道什么是Node，Npm，以及相关原理。
2、知道如果开发一个微信小程序应用或插件。（微信小程序后称小程序，请不要与支付宝小程序或其他小程序混淆。）

说在前面的话

本文所介绍的是如何使用小程序的语法，开发一套小程序的组件库，并发布到NPM上，别人可以下载你的组件库，并应用到自己小程序开发中。

正文

1、安装命令行工具

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

2、新建一个空项目，cd进去执行

miniprogram init --type custom-component

这样我们就利用小程序官方提供的脚手架创建了一个demo

3、安装依赖

npm install

4、目录介绍

|--miniprogram_dev // 开发环境构建目录 构建的时候自动生成 默认没有
|--miniprogram_dist // 生产环境构建目录 构建的时候自动生成 默认没有
|--src // 源码
|   |--assets// 静态资源
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件
|
|--test // 测试用例
|--tools // 构建相关代码
|   |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
|   |--config.js // 构建相关配置文件
|
|--gulpfile.js

5、在src下写一个组件 show
show.js 注意换行符也要

Page({})

show.json

{
  "component": true,
  "usingComponents": {}
}

show.wxml

    我是测试组件show

show.wxss

#show {
  color: #f00;
}

这四个文件都在src文件夹下，请不要再给他们套上一个文件夹了

5、配置组件入口
修改 tools/config.js 的 entry如下

entry: ['show'],

你自己写了几个组件，这里就要配置几个

6、构建

npm run dist

7、发布

// 登录 npm
npm login

// 发布
 npm publish

8、这时候别人按照你的包名就可以下载啦。

关于如何使用已经发布的npm包，请百度搜索 “微信小程序使用npm包”

相关链接参考：
官方默认demo
https://github.com/wechat-miniprogram/miniprogram-custom-component

weui
https://github.com/Tencent/weui-wxss

官方介绍文档
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/trdparty.html