从零开发一款自己的小程序UI组件库（一）
<p>写在前面：有开发过小程序的朋友肯定知道组件化开发的特性，<strong>高内聚与低耦合。</strong>使用已有的UI组件库，诸如：vantUI-weapp、minUI-weapp等UI组件库的诞生使我们的开发速度大大的加快，丰富的组件拿来即用【更多的UI组件库、框架可查看我的另一篇博客移动端、PC端（前后台）、小程序常用的UI框架。】，但是大家有没有遇到过只想使用某个组件库的某个单一功能、或者想把组件库中优秀的组件集合到自己的组件库中，或者说想开发自己的UI组件库看了官网文档却无从下手呢，接下来，请跟随我，从零开发一款自己的小程序UI组件库，并将其上传至npm供他人学习使用。</p><p><span style="background-color: rgba(255, 255, 0, 1)">特别注意</span>：此处的从零开发，并不是指从没接触过小程序的小白，开发组件库的前提是：①熟练使用css3布局以及js（es6）编写；②熟悉小程序已有组件及API，同时至少开发过小程序；③了解node、npm、熟悉git。</p>
<h3>本节为基础部分</h3>
<h3>1.下载小程序组件模板（官方地址），【默认大家对node、npm、命令行都有所了解】</h3>
<p>全局安装命令行工具，执行：</p>
<div class="cnblogs_code">
<pre>npm install -g @wechat-miniprogram/miniprogram-cli</pre>
</div>
<p>在某盘符下新建一个空目录，暂将其命名为：mineui（注意：须使用全英文小写，命名就要对它负责请慎重），以此空目录作为项目根目录，执行：</p>
<div class="cnblogs_code">
<pre>miniprogram init --type custom-component</pre>
</div>
<p>执行中会填写一些项目信息，一路回车即可。完成后，会在mineui下生成项目基础文件，我们会在此基础上开发我们的组件库。</p>
<h3>2.运行项目</h3>
<p>首先安装依赖，执行：</p>
<div class="cnblogs_code">
<pre>npm install</pre>
</div>
<p>然后运行项目，执行：</p>
<div class="cnblogs_code">
<pre>npm run dev 或者 npm run watch</pre>
</div>
<p>可以看到在项目目录中，多了一个<span style="background-color: rgba(255, 255, 0, 1)">miniprogram_dev</span>的目录，这就是我们编写组件后的预览目录，这个时候就要请出我们的微信发开着工具了（注意基础库版本调整至2.2.1以上），执行导入项目，目录选择我们刚刚创建的mineui文件夹下的miniprogram_dev目录，appid使用<span style="background-color: rgba(255, 255, 0, 1)">测试号<span style="background-color: rgba(255, 255, 255, 1)">。点击导入后，即可预览初始化的项目。</span></span></p>
<h3>3.了解各个文件的作用</h3>
<p><img src="https://img2018.cnblogs.com/blog/1324387/201907/1324387-20190728154156680-1503873361.png" alt=""></p>
<p>①miniprogram_dev目录：执行<span style="background-color: rgba(192, 192, 192, 1)">npm run dev</span> || <span style="background-color: rgba(192, 192, 192, 1)">npm run watch</span>（实时编译）后的生成文件，此目录及最终的小程序页面、组件结构；</p>
<p>②src目录：存放我们要编写的目标组件，也是打包后需要上传的文件，非常重要！</p>
<p>③tools目录：其中的demo文件夹即我们运行时的页面框架，需要注意配置json文件，与开发普通项目一致。此目录下的config.js文件也非常重要，<span style="background-color: rgba(255, 255, 0, 1)"> </span><span style="background-color: rgba(255, 255, 0, 1)">entry <span style="background-color: rgba(255, 255, 255, 1)"> 字段即为src目录下需要打包的组件目录，['index']即指此时只打包src目录下的第一层index相关文件。如果我们想开发多组件库，则需要在src目录下创建多个文件夹来存放组件，如：我们要写一个自己的button组件，则在src目录下创建button文件夹，在此文件夹下创建index.js、index.json、index.wxml、index.wxss，同时修改 <span style="background-color: rgba(255, 255, 0, 1)"> entry </span> 字段为：['index','button/index']。需要注意的是，当我们删改src下的文件目录时，同时也要修改 <span style="background-color: rgba(255, 255, 0, 1)"> entry </span> 字段，否则在执行命令时报错，导致失败。</span></span></p>
<h3><span style="background-color: rgba(255, 255, 0, 1)"><span style="background-color: rgba(255, 255, 255, 1)">4.打包并上传至npm</span></span></h3>
<p><span style="background-color: rgba(255, 255, 0, 1)"><span style="background-color: rgba(255, 255, 255, 1)">①首先，我们需要有自己的npm账号，注册地址。</span></span></p>
<p><span style="background-color: rgba(255, 255, 0, 1)"><span style="background-color: rgba(255, 255, 255, 1)">②在项目根目录，执行：</span></span></p>
<div class="cnblogs_code">
<pre>npm login</pre>
</div>
<p>输入刚刚注册的用户名、密码、邮箱。需注意的是，如果登陆失败，大多原因是由于使用了非 npmjs.org 官网的 registry，执行：</p>
<div class="cnblogs_code">
<pre>npm config set registry https://registry.npmjs.org/</pre>
</div>
<p>将npm源切换到npmjs.org 官网的 registry。</p>
<p>③验证是否登陆成功，执行：</p>
<div class="cnblogs_code">
<pre>npm who am i</pre>
</div>
<p>返回当前登录的用户名</p>
<p>④执行：</p>
<div class="cnblogs_code">
<pre>npm publish</pre>
</div>
<p>此时，我们的初始化组件模板就推送到npm官网了，掌声送给你自己吧O(∩_∩)O哈哈~。接下来，我们去npm官网查看自己的组件库，并且下载到一个全新的小程序项目里，查看下效果吧。</p>
<p>如果想删除npm包，或者只想删除npm包下的某个版本，可执行（需慎重，可能你的项目已经被多人使用予以厚望）：</p>
<div class="cnblogs_code">
<pre>npm unpublish --force <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">强制删除</span></pre>
</div>
<div class="cnblogs_code">
<pre>npm unpublish guitest@<span style="color: rgba(128, 0, 128, 1)">1.0</span>.0 <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">指定版本号</span></pre>
</div>
<h3>5.下载npm包并验证</h3>
<p>①打开npm官网，搜索刚刚创建的项目，我的名称叫mineui，大家搜自己的名称即可。找到了：</p>
<p><img src="https://img2018.cnblogs.com/blog/1324387/201907/1324387-20190728165322619-1286231464.png" alt="" width="600"></p>
<p>可以看到，当前mineui仅有一个版本，而且readme文件也是官方模板，还没有修改过，后面会做改动（markdown语法学习）。</p>
<p>②将组件库安装到现有的或者全新的项目中，我这边用一个全新的项目做演示。</p>
<p>再打开一个微信开发者工具，执行新建项目流程，信息自填，比如说：我的小程序项目命名为：mine-weapp。</p>
<p>初始化项目后，在项目根目录执行：</p>
<div class="cnblogs_code">
<pre>npm init</pre>
</div>
<p>同样一路默认回车，成功后项目根目录下会生成package.json、project.config.json两个文件</p>
<p><img src="https://img2018.cnblogs.com/blog/1324387/201907/1324387-20190728170426209-223056959.png" alt="" width="500"></p>
<p>在我们的npm组件库中，会看到如何安装，我们执行（每个人的包名都可能不一样哦，需注意）：</p>
<div class="cnblogs_code">
<pre>npm i mineui -S --production -verbose</pre>
</div>
<p>-S即为--save，添加–production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小。-verbose 是为了输出详细信息（可以不要），英文翻译是冗余的意思。</p>
<p>执行完毕，我们在开发者工具中操作：<span style="background-color: rgba(255, 255, 0, 1)">工具→构建npm</span>，同时在右侧的详情中勾选【<span style="background-color: rgba(255, 255, 0, 1)">使用npm模块选项</span>】</p>
<p> <img src="https://img2018.cnblogs.com/blog/1324387/201907/1324387-20190728170842209-1350116215.png" alt=""></p>
<p>我们会发现在项目根目录下会生成miniprogram_npm目录，这个就是开发者工具构建出来的模块，那我们如何引用他呢？</p>
<p>③由于对刚刚初始化的组件模板没有做任何修改，我们现在修改新创建的小程序的根目录下的app.json文件，新增usingComponents字段：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">usingComponents</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">: {
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">comp</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">mineui/index</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
},</span></pre>
</div>
<p>在pages→index→index.wxml文件中最下方添加组件：</p>
<div class="cnblogs_code">
<pre><comp /></pre>
</div>
<p>编译后发现，我们的组件已经成功渲染到小程序页面中：</p>
<p><img src="https://img2018.cnblogs.com/blog/1324387/201907/1324387-20190728171539728-567711517.png" alt="" width="300"></p>
<p>至此，初始化组件库模板、模板文件概述、模板上传npm、npm包文件下载至本地并运用到项目就讲解完了。</p>
<p>本节物料下载：mineui-weapp组件库v1.0、weapp-for-mineui程序v1.0</p>
<p>后续我会逐一讲解：基础UI组件库的搭建和丰富、如何在本地使用<span style="background-color: rgba(192, 192, 192, 1)">npm link<span style="background-color: rgba(255, 255, 255, 1)">调试npm包项目。</span></span></p>
<p>由于工作原因，后续不定时更新，请见谅、、</p>
</div>
<div id="MySignature" role="contentinfo">
欢迎体验由我个人开发的高颜值云开发工具小程序
<img src="https://img2018.cnblogs.com/blog/1324387/201905/1324387-20190524134827292-1343993864.png" style="max-width: 80%"><br><br>
来源：https://www.cnblogs.com/e-cat/p/11260134.html
頁:
[1]