【商城实战(34)】突破常规！手把手教你在uniapp中进行组件库二次开发
【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配，乃至运营推广策略，102 章内容层层递进。无论是想深入钻研技术细节，还是探寻商城运营之道，本专栏都能提供从 0 到 1 的系统讲解，助力你打造独具竞争力的电商平台，开启电商实战之旅。
目录
- 一、认识 uniapp 组件库
-
- 1.1 uView 组件库
- 1.2 vant weapp - uni 组件库
- 二、二次开发前的准备工作
-
- 2.1 明确商城需求
- 2.2 搭建开发环境
- 三、基于现有组件库的二次开发实战
-
- 3.1 选择基础组件库
- 3.2 定制组件实例
- 四、发布自定义组件库
-
- 4.1 组件库打包
- 4.2 发布到项目内
- 4.3 团队协作与维护
- 五、总结与展望
一、认识 uniapp 组件库
在当今的商城开发领域，uniapp 凭借其强大的跨平台能力和高效的开发特性，成为了众多开发者的首选框架。它允许开发者使用一套代码构建出同时运行在 iOS、Android、H5 以及各种小程序平台上的应用，大大节省了开发时间和成本。而组件库作为 uniapp 开发中的重要工具，为开发者提供了丰富的预制组件，进一步加速了开发进程。
uView 和 vant weapp - uni 是 uniapp 生态中广受欢迎的两个组件库，它们各自具备独特的特点和功能，在商城项目中有着广泛的应用场景。
1.1 uView 组件库
uView 是一个功能丰富、高度可定制的 uniapp 组件库。它提供了大量涵盖各种常见 UI 元素的组件，例如按钮、表单、卡片、列表等，基本能够满足商城开发中大部分的界面需求。在商品展示页面，uView 的列表组件可以方便地展示商品信息，包括商品图片、名称、价格等；而在用户登录注册页面，其表单组件能快速搭建出包含输入框、按钮等元素的登录注册表单。
uView 的优点十分显著。它的组件丰富，这意味着开发者无需花费大量时间去从头编写各种基础组件，大大提高了开发效率。其自定义能力强，支持开发者自定义主题和样式，能轻松根据商城的品牌风格调整 UI。它还提供了良好的 API 接口和扩展机制，方便开发者进行二次开发和定制 ，以满足商城复杂的业务逻辑需求。此外，uView 的兼容性也很强，能够兼容多种平台，实现真正的跨平台开发，确保商城应用在不同终端上都能稳定运行。
然而，uView 也存在一些缺点。对于初学者来说，其学习成本较高，需要花费一定时间去学习和掌握众多组件的使用方法和自定义技巧。由于它提供了大量的组件和丰富的自定义功能，在某些情况下可能会带来一定的性能开销，影响商城应用的运行速度，特别是在一些性能较低的设备上。
1.2 vant weapp - uni 组件库
vant weapp - uni 是有赞前端团队推出的 vant 组件库的 uniapp 版本，它专注于移动端开发，对移动设备的适配能力非常出色。该组件库同样提供了丰富的组件库，像 Tabbar、NavBar、Grid 等常用组件一应俱全，并且在性能方面进行了精心优化，能确保商城应用在移动端流畅运行。在商城底部的导航栏设计中，vant weapp - uni 的 Tabbar 组件可以快速实现简洁美观的导航效果；而在商品分类页面，Grid 组件能很好地展示各类商品分类。
vant weapp - uni 的优点主要体现在移动端适配能力强和组件库完善这两方面。它针对移动设备进行了专门的优化，无论是界面布局还是交互效果，都能给用户带来良好的体验。丰富的组件库也能让开发者快速实现商城的各种功能。它在性能优化上也下了很大功夫，保证了应用的流畅度，减少了卡顿现象，提升了用户满意度。
不过，vant weapp - uni 也并非完美无缺。其学习成本相对较高，组件和功能较多，开发者需要花时间去熟悉和掌握。虽然它支持一定程度的主题和样式定制，但与 uView 相比，在某些复杂的自定义场景下，灵活性稍显不足，可能无法完全满足商城独特的样式需求。
二、二次开发前的准备工作
2.1 明确商城需求
在对 uniapp 组件库进行二次开发之前，深入分析商城的业务流程是至关重要的第一步。这需要我们全面梳理从用户进入商城到完成购买并售后的整个过程，从而确定各个页面的布局和交互方式。例如，在商品展示页面，我们可能需要根据商品的分类、热门程度、价格区间等因素，设计不同的展示布局，以方便用户快速找到心仪的商品。对于商品详情页，除了展示商品的基本信息、图片、价格等，还可能需要添加用户评价、推荐商品、相关商品等模块，这就对组件的展示和交互提出了特定的要求。
从交互方式来看，商城首页可能需要实现轮播图自动切换、商品分类导航的滑动切换、搜索框的实时搜索提示等功能；商品列表页则需要支持上拉加载更多商品、下拉刷新商品列表等交互操作。在购物车页面，用户需要能够方便地添加、删除商品，修改商品数量，并且实时显示商品总价和优惠信息。明确这些交互需求，有助于我们确定对组件库的功能需求。
在样式需求方面，商城通常有自己独特的品牌风格，包括色彩搭配、字体选择、图标设计等。我们需要确保二次开发后的组件库能够融入这些风格元素。如果商城的品牌色是蓝色，那么按钮、导航栏、链接等元素的颜色就需要以蓝色为主色调进行定制；字体可能会选择简洁易读的无衬线字体，并且对不同层级的文本（如标题、正文、提示信息等）有不同的字号和粗细要求。此外，图标也需要根据商城的风格进行统一设计，以提供一致的视觉体验。
2.2 搭建开发环境
搭建一个稳定且高效的开发环境是进行 uniapp 组件库二次开发的基础。在众多开发工具中，HBuilderX 是一款专门为 uniapp 开发量身定制的强大工具，它具备丰富的功能和良好的性能，能够极大地提升开发效率。
首先，我们需要下载并安装 HBuilderX。可以直接从 DCloud 官网（https://www.dcloud.io/hbuilderx.html）获取安装包，根据安装向导的提示完成安装过程。安装完成后，打开 HBuilderX。
接下来创建 uniapp 项目。在 HBuilderX 的菜单栏中，依次点击 “文件”->“新建”->“项目”，在弹出的窗口中选择 “uni-app” 项目类型，然后输入项目名称，选择合适的项目模板（如 Hello uni-app 模板用于快速了解基本组件和 API 的使用，uni ui 项目模板则内置了大量常用组件，更适合日常开发），最后点击 “创建” 按钮，即可成功创建一个 uniapp 项目。
创建项目后，还需要进行一些基本的配置。例如，在项目的 manifest.json 文件中，可以设置应用的名称、图标、版本号、权限等信息。在 pages.json 文件中，我们可以配置页面路径、窗口样式、原生导航栏、底部原生 tabbar 等内容。如果项目需要使用 sass、less 等预处理语言，还需要安装相应的插件，并在 vue.config.js 文件中进行配置。
完成上述步骤后，我们可以通过点击 HBuilderX 工具栏中的 “运行” 按钮，选择将项目运行到浏览器、真机或小程序模拟器上，来验证开发环境是否配置正确。如果能够正常运行并展示出预期的页面效果，说明开发环境搭建成功，可以开始进行组件库的二次开发工作。
三、基于现有组件库的二次开发实战
3.1 选择基础组件库
经过对 uView 和 vant weapp - uni 组件库优缺点的深入分析，并结合商城的具体需求，我们决定选择 uView 组件库作为二次开发的基础。商城需要丰富多样的组件来构建复杂的页面结构，uView 的组件丰富性能够很好地满足这一需求。同时，商城对于品牌风格的一致性要求较高，uView 强大的自定义能力使得我们能够轻松定制组件的样式，以符合商城独特的风格。虽然 uView 存在一定的学习成本和可能的性能开销，但通过合理的代码优化和性能调优措施，这些问题是可以得到有效解决的。
3.2 定制组件实例
- 按钮组件定制
在商城中，按钮是用户进行交互的重要元素，其样式和交互效果直接影响用户体验。我们希望按钮具有独特的样式，与商城的整体风格相匹配，并且在用户点击时能够提供清晰的反馈，以增强交互感。
基于 uView 组件库，我们对按钮组件进行如下定制：
<template>
<view class="custom-button" @click="handleClick">
<slot></slot>
</view>
</template>
<script>
export default {
methods: {
handleClick() {
// 点击按钮后的逻辑处理
console.log('按钮被点击了');
}
}
}
</script>
<style scoped lang="scss">
.custom-button {
/* 商城品牌色，如蓝色 */
background-color: #007BFF;
color: #FFFFFF;
padding: 12px 24px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
&:active {
/* 点击动画效果，背景色加深 */
background-color: #0056b3;
}
}
</style>
实现思路是通过在原 uView 按钮组件的基础上，重新定义样式类.custom-button。在样式中，设置了按钮的背景色、文字颜色、内边距、圆角、字体大小等样式属性，使其符合商城的风格。添加transition属性实现过渡效果，当按钮被点击时，通过&:active伪类改变背景色，从而实现点击动画效果。在script部分，定义了handleClick方法，用于处理按钮点击后的逻辑，这里简单地在控制台打印信息，实际应用中可以根据业务需求进行更复杂的操作，如发起网络请求、跳转页面等。
- 商品列表组件定制
商城的商品列表页是展示商品信息的核心页面，需要清晰、美观地展示商品的图片、名称、价格、评价等关键信息，以吸引用户的注意力并引导购买。同时，为了提升页面加载速度和用户体验，我们需要实现商品图片的懒加载功能；对于价格，要进行格式化处理，使其展示更加规范；评价展示则需要直观地反映用户的评价情况。
下面是基于 uView 组件库定制商品列表组件的示例代码：
<template>
<view class="product-list">
<view v-for="(product, index) in productList" :key="index" class="product-item">
<!-- 图片懒加载 -->
<lazy-load :src="product.imgUrl">
<image class="product-img" slot="placeholder" src="/static/placeholder.png"></image>
</lazy-load>
<view class="product-content">
<text class="product-name">{{ product.name }}</text>
<!-- 价格格式化 -->
<text class="product-price">￥{{ formatPrice(product.price) }}</text>
<!-- 评价展示 -->
<view class="product-rating">
<text v-for="(star, i) in product.rating" :key="i" class="star">{{ star }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
productList: [
{
id: 1,
imgUrl: 'https://example.com/product1.jpg',
name: '示例商品1',
price: 199.99,
rating: [1, 1, 1, 1, 0] // 5颗星，4颗点亮，1颗未点亮
},
// 更多商品数据...
]
};
},
methods: {
// 价格格式化函数
formatPrice(price) {
return price.toFixed(2);
}
}
}
</script>
<style scoped lang="scss">
.product-list {
display: flex;
flex-wrap: wrap;
}
.product-item {
width: 30%;
margin: 15px;
border: 1px solid #E0E0E0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.product-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.product-content {
padding: 12px;
}
.product-name {
font-size: 18px;
font-weight: bold;
color: #333333;
margin-bottom: 8px;
}
.product-price {
font-size: 16px;
color: #FF5722;
}
.product-rating {
margin-top: 8px;
}
.star {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('/static/star.png');
background-size: cover;
margin-right: 2px;
}
</style>
实现过程如下：在模板部分，使用v-for指令遍历productList数组，为每个商品生成一个列表项。通过引入lazy-load组件实现商品图片的懒加载，在图片加载前显示占位图。对于价格，调用formatPrice方法进行格式化处理，保留两位小数。评价展示部分，根据product.rating数组的值，动态生成相应数量的星星图标，通过v-for指令遍历数组，并根据数组元素的值判断星星是否点亮，从而展示用户的评价情况。在script部分，定义了productList数组模拟商品数据，以及formatPrice方法用于价格格式化。在样式部分，通过scss对商品列表的整体布局、每个商品项的样式、图片样式、文字样式等进行了详细的定义，以实现美观、清晰的商品列表展示效果。
四、发布自定义组件库
4.1 组件库打包
在完成组件的定制开发后，我们需要将这些定制好的组件整理成一个组件库，以便于在项目中复用和团队协作。组件库打包的首要任务是整理目录结构，确保组件库的结构清晰、易于理解和使用。
我们可以在项目根目录下创建一个新的文件夹，例如my - custom - components，用于存放所有自定义组件。在这个文件夹中，为每个组件创建一个独立的文件夹，文件夹名称与组件名称一致，如custom - button、product - list等。在每个组件文件夹中，放置组件的.vue文件、样式文件（如果有单独的样式文件）以及可能需要的其他资源文件（如图片、图标等）。
对于样式文件，如果使用了scss或less等预处理语言，需要确保在打包过程中能够正确编译成浏览器可识别的css。可以使用gulp、webpack等构建工具来完成这一任务。以gulp为例，首先需要安装gulp、gulp - sass（用于编译scss）和gulp - autoprefixer（用于自动添加浏览器前缀）等相关插件：
npm install gulp gulp - sass gulp - autoprefixer --save - dev
然后在项目根目录下创建gulpfile.js文件，编写如下任务：
const gulp = require('gulp');
const sass = require('gulp - sass');
const autoprefixer = require('gulp - autoprefixer');
// 编译scss并添加前缀
gulp.task('styles', function () {
return gulp.src('my - custom - components/**/*.scss')
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('my - custom - components'));
});
// 默认任务
gulp.task('default', gulp.series('styles'));
运行gulp命令，即可将my - custom - components目录下所有组件的scss样式文件编译成css，并添加浏览器前缀。
完成样式处理后，还需要将组件库中的所有文件打包成一个可分发的文件或文件夹。可以使用npm pack命令将整个my - custom - components文件夹打包成一个tar.gz格式的压缩包。在项目根目录下执行该命令，会在当前目录生成一个以组件库名称命名的压缩包，如my - custom - components - 1.0.0.tgz（版本号根据实际情况而定）。这个压缩包就包含了我们定制的组件库的所有文件，可以方便地在项目中引入和使用。
4.2 发布到项目内
将打包好的组件库引入到 uniapp 项目中，是使其在项目中发挥作用的关键步骤。首先，在 uniapp 项目的根目录下创建一个uni_modules文件夹（如果项目中已经存在该文件夹，则直接使用）。将之前打包生成的组件库压缩包my - custom - components - 1.0.0.tgz复制到uni_modules文件夹中。
接下来，在项目的pages.json文件中配置easycom组件模式，以实现组件的自动引入和注册。在pages.json文件中添加如下配置：
{
"easycom": {
"autoscan": true,
"custom": {
"^my - (.*)": "@/uni_modules/my - custom - components/components/my - $1/my - $1.vue"
}
},
"pages": [
// 项目页面配置
]
}
上述配置中，^my - (.*)表示匹配以my -开头的组件名，@/uni_modules/my - custom - components/components/my - $1/my - $1.vue则指定了组件的路径，其中$1是正则表达式的捕获组，会被替换为实际的组件名。例如，当我们在页面中使用
在项目中使用自定义组件库的组件时，与使用普通 uniapp 组件类似。在页面的模板中直接使用组件标签即可，例如：
<template>
<view>
<my - custom - button>点击我</my - custom - button>
<my - product - list></my - product - list>
</view>
</template>
需要注意的是，在引入组件库后，如果组件库中的组件依赖于某些全局样式或脚本，需要在项目的App.vue或main.js文件中进行相应的引入和配置。如果组件库使用了uView组件库的某些功能，可能需要在main.js中引入uView的主 JS 库和全局 SCSS 主题文件：
// main.js
import uView from 'uview - ui';
import '@/uni_modules/my - custom - components/theme.scss'; // 假设组件库有自定义主题样式
Vue.use(uView);
并且在App.vue中引入组件库的基础样式：
<style lang="scss">
@import "@/uni_modules/my - custom - components/index.scss";
</style>
这样，自定义组件库中的组件就能在 uniapp 项目中正常使用了。
4.3 团队协作与维护
在团队开发中，共享组件库和有效的版本管理是确保项目顺利进行的重要环节。为了实现组件库的共享，我们可以使用版本控制系统，如 Git。将组件库的代码托管到 Git 仓库中，团队成员可以通过克隆仓库来获取最新的组件库代码。
在项目的package.json文件中，可以记录组件库的版本信息，以便在项目中准确引用特定版本的组件库。例如：
{
"name": "my - uniapp - project",
"version": "1.0.0",
"dependencies": {
// 其他依赖
},
"devDependencies": {
"my - custom - components": "1.0.0"
}
}
当组件库有更新时，团队成员可以通过npm install命令来更新本地项目中的组件库到最新版本。在更新组件库时，可能会出现兼容性问题，因此在每次更新后，需要进行充分的测试，确保组件库在项目中仍然能够正常工作。
对于自定义组件库的后期维护，需要建立良好的反馈机制。团队成员在使用组件库的过程中，如果发现组件存在问题或有新的需求，可以及时反馈给组件库的维护者。维护者根据反馈信息，对组件库进行更新和修复。在更新组件库时，需要遵循版本管理的规范，合理地增加版本号，以区分不同的版本。如果只是修复了一些小的 bug，可以增加补丁版本号（如从 1.0.0 更新到 1.0.1）；如果增加了新的功能或对组件进行了较大的改动，需要增加次要版本号（如从 1.0.0 更新到 1.1.0）。
定期对组件库进行优化和重构也是很有必要的。随着项目的发展，业务需求可能会发生变化，组件库也需要不断地适应这些变化。通过优化和重构，可以提高组件库的性能、可维护性和可扩展性，使其更好地服务于项目开发。同时，及时更新组件库的文档，确保文档与组件库的实际功能保持一致，方便团队成员查阅和使用。
五、总结与展望
在本次 uniapp 组件库二次开发的过程中，我们首先深入分析了 uView 和 vant weapp - uni 这两个常见组件库的优缺点，基于商城的具体需求，选择了 uView 组件库作为二次开发的基础。通过明确商城的业务流程、页面布局、交互和样式需求，搭建起了稳定的开发环境，为后续的开发工作奠定了坚实的基础。
在开发实战阶段，我们成功定制了按钮组件和商品列表组件，使其满足商城独特的风格和业务逻辑。按钮组件通过重新定义样式和添加点击动画，提升了用户交互体验；商品列表组件则实现了图片懒加载、价格格式化和评价展示等功能，优化了页面性能和用户浏览体验。
完成组件定制后，我们将组件库进行打包，并成功发布到项目内，实现了组件在项目中的复用。同时，通过版本控制系统和合理的团队协作流程，确保了组件库在团队开发中的高效共享和维护。
这次二次开发不仅提升了商城应用的独特性和用户体验，还增强了组件的复用性，提高了开发效率，为商城项目的长期发展提供了有力支持。
展望未来，我们可以进一步优化组件库的性能，通过代码优化、资源压缩等方式，减少组件库的加载时间和内存占用，提升应用的运行速度。在功能扩展方面，可以根据商城业务的发展，不断添加新的组件和功能，如优惠券组件、订单跟踪组件等，以满足日益增长的业务需求。
鼓励读者在实践中不断探索创新，根据自己的项目需求对组件库进行二次开发和定制。在开发过程中，积极参与 uniapp 社区的交流与分享，共同推动 uniapp 组件库生态的发展和完善。相信通过不断的努力和创新，我们能够利用 uniapp 组件库开发出更加优秀、高效的商城应用。