从零开发一款本身的小程序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包项目。

因为工做缘由，后续不定时更新，请见谅、、