看本文前相信你已經(jīng)有過下方羅列的相關(guān)經(jīng)驗：
1癞揉、知道什么是Node筐赔，Npm铣猩，以及相關(guān)原理。
2茴丰、知道如果開發(fā)一個微信小程序應(yīng)用或插件达皿。（微信小程序后稱小程序，請不要與支付寶小程序或其他小程序混淆较沪。）
說在前面的話
本文所介紹的是如何使用小程序的語法鳞绕，開發(fā)一套小程序的組件庫，并發(fā)布到NPM上尸曼，別人可以下載你的組件庫们何，并應(yīng)用到自己小程序開發(fā)中。
正文
1控轿、安裝命令行工具
npm install -g @wechat-miniprogram/miniprogram-cli
2冤竹、新建一個空項目，cd進去執(zhí)行
miniprogram init --type custom-component
這樣我們就利用小程序官方提供的腳手架創(chuàng)建了一個demo
3茬射、安裝依賴
npm install
4鹦蠕、目錄介紹
|--miniprogram_dev // 開發(fā)環(huán)境構(gòu)建目錄 構(gòu)建的時候自動生成 默認(rèn)沒有
|--miniprogram_dist // 生產(chǎn)環(huán)境構(gòu)建目錄 構(gòu)建的時候自動生成 默認(rèn)沒有
|--src // 源碼
| |--assets// 靜態(tài)資源
| |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模塊/自定義組件入口文件
|
|--test // 測試用例
|--tools // 構(gòu)建相關(guān)代碼
| |--demo // demo 小程序目錄，開發(fā)環(huán)境下會被拷貝生成到 miniprogram_dev 目錄中
| |--config.js // 構(gòu)建相關(guān)配置文件
|
|--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肠阱、構(gòu)建
npm run dist
7票唆、發(fā)布
// 登錄 npm
npm login
// 發(fā)布
npm publish
8、這時候別人按照你的包名就可以下載啦屹徘。
關(guān)于如何使用已經(jīng)發(fā)布的npm包走趋，請百度搜索 “微信小程序使用npm包”
相關(guān)鏈接參考：
官方默認(rèn)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
