微信小程序 自定义组件 教程（一） | 封装、声明、使用 三部曲_微信小程序 组件封装让多个项目使用

一、情景

在开发微信小程序的过程中，经常会遇到：相同的内容，在多个地方出现。
（例如：商城小程序中的产品卡片，可能在“每周上新”模块用到，也可能在“为你推荐”模块用到。）

如果没有任何封装，将会在多个文件中，出现大量重复代码，这将严重降低代码的可读性、可复用性。

二、思路

显然，我们要做的，就是简化代码！
我们会想到：将某段需要重复的代码，单独拿出来，放进一个容器，每次需要用到时，就把这个容器拿过来用。

而 自定义组件，刚好可以满足这个需求。

三、教程

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>
1
2
3
4
5
6
7

页面pages/index/index.wxss

/**index.wxss**/
page{
   
  background-color: #f8f8f8;
}

.content{
   
  background-color: #fff;
  
1
2
3
4
5
6
7
8
9