從零開發一款本身的小程序UI組件庫（一）

寫在前面：有開發太小程序的朋友確定知道組件化開發的特性，高內聚與低耦合。使用已有的UI組件庫，諸如：vantUI-weapp、minUI-weapp等UI組件庫的誕生使咱們的開發速度大大的加快，豐富的組件拿來即用【更多的UI組件庫、框架可查看個人另外一篇博客移動端、PC端（先後臺）、小程序經常使用的UI框架。】，可是你們有沒有遇到過只想使用某個組件庫的某個單一功能、或者想把組件庫中優秀的組件集合到本身的組件庫中，或者說想開發本身的UI組件庫看了官網文檔卻無從下手呢，接下來，請跟隨我，從零開發一款本身的小程序UI組件庫，並將其上傳至npm供他人學習使用。

特別注意：此處的從零開發，並非指從沒接觸太小程序的小白，開發組件庫的前提是：①熟練使用css3佈局以及js（es6）編寫；②熟悉小程序已有組件及API，同時至少開發太小程序；③瞭解node、npm、熟悉git。

本節爲基礎部分

1.下載小程序組件模板（官方地址），【默認你們對node、npm、命令行都有所瞭解】

全局安裝命令行工具，執行：

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

在某盤符下新建一個空目錄，暫將其命名爲：mineui（注意：須使用全英文小寫，命名就要對它負責請慎重），以此空目錄做爲項目根目錄，執行：

miniprogram init --type custom-component

執行中會填寫一些項目信息，一路回車便可。完成後，會在mineui下生成項目基礎文件，咱們會在此基礎上開發咱們的組件庫。

2.運行項目

首先安裝依賴，執行：

npm install

而後運行項目，執行：

npm run dev 或者 npm run watch

能夠看到在項目目錄中，多了一個miniprogram_dev的目錄，這就是咱們編寫組件後的預覽目錄，這個時候就要請出咱們的微信發開着工具了（注意基礎庫版本調整至2.2.1以上），執行導入項目，目錄選擇咱們剛剛建立的mineui文件夾下的miniprogram_dev目錄，appid使用測試號。點擊導入後，便可預覽初始化的項目。

3.瞭解各個文件的做用

①miniprogram_dev目錄：執行npm run dev || npm run watch（實時編譯）後的生成文件，此目錄及最終的小程序頁面、組件結構；

②src目錄：存放咱們要編寫的目標組件，也是打包後須要上傳的文件，很是重要！

③tools目錄：其中的demo文件夾即咱們運行時的頁面框架，須要注意配置json文件，與開發普通項目一致。此目錄下的config.js文件也很是重要， entry  字段即爲src目錄下須要打包的組件目錄，['index']即指此時只打包src目錄下的第一層index相關文件。若是咱們想開發多組件庫，則須要在src目錄下建立多個文件夾來存放組件，如：咱們要寫一個本身的button組件，則在src目錄下建立button文件夾，在此文件夾下建立index.js、index.json、index.wxml、index.wxss，同時修改  entry  字段爲：['index','button/index']。須要注意的是，當咱們刪改src下的文件目錄時，同時也要修改  entry  字段，不然在執行命令時報錯，致使失敗。

4.打包並上傳至npm

①首先，咱們須要有本身的npm帳號，註冊地址。

②在項目根目錄，執行：

npm login

輸入剛剛註冊的用戶名、密碼、郵箱。需注意的是，若是登錄失敗，大多緣由是因爲使用了非 npmjs.org 官網的 registry，執行：

npm config set registry https://registry.npmjs.org/

將npm源切換到npmjs.org 官網的 registry。

③驗證是否登錄成功，執行：

npm who am i

返回當前登陸的用戶名

④執行：

npm publish

此時，咱們的初始化組件模板就推送到npm官網了，掌聲送給你本身吧O(∩_∩)O哈哈~。接下來，咱們去npm官網查看本身的組件庫，而且下載到一個全新的小程序項目裏，查看下效果吧。

若是想刪除npm包，或者只想刪除npm包下的某個版本，可執行（需慎重，可能你的項目已經被多人使用予以厚望）：

npm unpublish --force //強制刪除

npm unpublish guitest@1.0.0 //指定版本號

5.下載npm包並驗證

①打開npm官網，搜索剛剛建立的項目，個人名稱叫mineui，你們搜本身的名稱便可。找到了：

能夠看到，當前mineui僅有一個版本，並且readme文件也是官方模板，尚未修改過，後面會作改動（markdown語法學習）。

②將組件庫安裝到現有的或者全新的項目中，我這邊用一個全新的項目作演示。

再打開一個微信開發者工具，執行新建項目流程，信息自填，好比說：個人小程序項目命名爲：mine-weapp。

初始化項目後，在項目根目錄執行：

npm init

一樣一路默認回車，成功後項目根目錄下會生成package.json、project.config.json兩個文件

在咱們的npm組件庫中，會看到如何安裝，咱們執行（每一個人的包名均可能不同哦，需注意）：

npm i mineui -S --production -verbose

-S即爲--save，添加–production選項，能夠減小安裝一些業務無關的 npm 包，從而減小整個小程序包的大小。-verbose 是爲了輸出詳細信息（能夠不要），英文翻譯是冗餘的意思。

執行完畢，咱們在開發者工具中操做：工具→構建npm，同時在右側的詳情中勾選【使用npm模塊選項】

 

咱們會發如今項目根目錄下會生成miniprogram_npm目錄，這個就是開發者工具構建出來的模塊，那咱們如何引用他呢？

③因爲對剛剛初始化的組件模板沒有作任何修改，咱們如今修改新建立的小程序的根目錄下的app.json文件，新增usingComponents字段：

"usingComponents": {
    "comp": "mineui/index"
},

在pages→index→index.wxml文件中最下方添加組件：

<comp />

編譯後發現，咱們的組件已經成功渲染到小程序頁面中：

至此，初始化組件庫模板、模板文件概述、模板上傳npm、npm包文件下載至本地並運用到項目就講解完了。

本節物料下載：mineui-weapp組件庫v1.0、weapp-for-mineui程序v1.0

後續我會逐一講解：基礎UI組件庫的搭建和豐富、如何在本地使用npm link調試npm包項目。

因爲工做緣由，後續不定時更新，請見諒、、