从零开发一款自己的小程序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.了解各个文件的作用

从零开发一款自己的小程序UI组件库(一)

①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,大家搜自己的名称即可。找到了:

从零开发一款自己的小程序UI组件库(一)

可以看到,当前mineui仅有一个版本,而且readme文件也是官方模板,还没有修改过,后面会做改动(markdown语法学习)。

②将组件库安装到现有的或者全新的项目中,我这边用一个全新的项目做演示。

再打开一个微信开发者工具,执行新建项目流程,信息自填,比如说:我的小程序项目命名为:mine-weapp。

初始化项目后,在项目根目录执行:

npm init

同样一路默认回车,成功后项目根目录下会生成package.json、project.config.json两个文件

从零开发一款自己的小程序UI组件库(一)

在我们的npm组件库中,会看到如何安装,我们执行(每个人的包名都可能不一样哦,需注意):

npm i mineui -S --production -verbose

-S即为--save,添加–production选项,可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小。-verbose 是为了输出详细信息(可以不要),英文翻译是冗余的意思。

执行完毕,我们在开发者工具中操作:工具→构建npm,同时在右侧的详情中勾选【使用npm模块选项】

从零开发一款自己的小程序UI组件库(一)

我们会发现在项目根目录下会生成miniprogram_npm目录,这个就是开发者工具构建出来的模块,那我们如何引用他呢?

③由于对刚刚初始化的组件模板没有做任何修改,我们现在修改新创建的小程序的根目录下的app.json文件,新增usingComponents字段:

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

在pages→index→index.wxml文件中最下方添加组件:

<comp />

编译后发现,我们的组件已经成功渲染到小程序页面中:

从零开发一款自己的小程序UI组件库(一)

至此,初始化组件库模板、模板文件概述、模板上传npm、npm包文件下载至本地并运用到项目就讲解完了。

本节物料下载:mineui-weapp组件库v1.0weapp-for-mineui程序v1.0

后续我会逐一讲解:基础UI组件库的搭建和丰富、如何在本地使用npm link调试npm包项目。

由于工作原因,后续不定时更新,请见谅、、

上一篇:十九、android中判断sim卡状态和读取联系人资料的方法


下一篇:Java中返回参数值的几种状态