一、情景
在开发微信小程序的过程中,经常会遇到:相同的内容,在多个地方出现。
(例如:商城小程序中的产品卡片,可能在“每周上新”模块用到,也可能在“为你推荐”模块用到。)
如果没有任何封装,将会在多个文件中,出现大量重复代码,这将严重降低代码的可读性、可复用性。
二、思路
显然,我们要做的,就是简化代码!
我们会想到:将某段需要重复的代码,单独拿出来,放进一个容器,每次需要用到时,就把这个容器拿过来用。
而 自定义组件,刚好可以满足这个需求。
三、教程
1. 封装
1) 假设原页面代码及显示效果如下
页面pages/index/index.wxml
<!--index.wxml-->
<view>
<view class="content">需要重复使用的部分</view>
<view class="content">需要重复使用的部分</view>
<view class="content">需要重复使用的部分</view>
<view class="content">需要重复使用的部分</view>
</view>
页面pages/index/index.wxss
/**index.wxss**/
page{
background-color: #f8f8f8;
}
.content{