看本文前相信你已经有过下方罗列的相关经验：
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
<view class="page">
<text id="show">我是测试组件show</text>
</view>
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
网友评论