微信小程序（13）：Component 实现公共组件

蔚落 2022-10-29 07:35 615阅读 0赞

## 一、不需要进行组件间属性传递 ##

我们的小程序一般都有固定头部和固定底部，在每个.wxml文件中都写入头部和底部的代码就会很麻烦，这时候我们就可以用到 Component 自定义组件。

#### 1. 新建 component 文件夹，在该文件夹创建 headerView 文件夹，然后右键点击“ 新建 Component ” ####

![在这里插入图片描述][20210209160403487.png]

#### 2. 将头部代码剪切到 headerView.wxml 文件中，将对应的 wxss代码剪贴到headerView.wxss 文件中，例如： ####

headerView.wxml 文件代码：

headerView.wxss 文件代码：

.header{  
      background: #fff; 
      border-bottom:1px solid #ccc; 
      height: 90rpx; 
      padding:0 30rpx; 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      position: relative; 
      z-index: 100
    }
    .header .logo image{  
      width:245rpx;
      height: 60rpx; 
      display: block; 
    }
    .header .wxchat{  
      display: block; 
      background: none; 
      margin:0; 
      padding:0;
      width:60rpx; 
      height: 60rpx;
    }
    .header .wxchat::after{ 
      border:none;
    }
    .header .wxchat image{  
      width:60rpx; 
      height: 60rpx; 
      animation: wxChat 1s infinite alternate; 
      display: block;
    }
    @keyframes wxChat{ 
      0%,50%,100%{  
        opacity: 1
      }
      25%{  
        opacity: 0
      }  
    }

#### 3. 然后在你要引入的页面的json文件中引入 headerView ，例如在首页index中 index.json 文件中引入： ####

{ 
      "usingComponents": { 
        "headerView":"/component/headerView/headerView"
      }
    }

#### 4. 最后在页面中引入 headerView 标签即可。 ####

效果图：  
![在这里插入图片描述][20210209162245589.png]

#### 5. 之后每需要该头部都进行上述 3、4操作即可。 ####

## 二、进行组件间属性传递 ##

如果页面中有两部分内容的样式相同但是文本或图片不同，如果样式代码各写一份就显得很没必要，这时候也可以用到 Component 自定义组件，只不过此时需要将文本或图片传入。例如公共标题：

#### 1. 同上述 一 中步骤一样，先在 component 文件夹中创建文件夹，然后新建 Component ，将对于代码剪切到对应文件中。 ####

![在这里插入图片描述][20210209164554107.png]  
pubTitle.wxml 文件代码：

<view class="pubTitle">
        <view class="txt">{
       {title}}</view>
        <navigator open-type="reLaunch" class="more" url="{ {moreUrl}}">更多 ></navigator>
    </view>

pubTitle.wxss文件代码：

.pubTitle{  
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-bottom:40rpx;
    }
    .pubTitle .txt{  
    font-size: 32rpx; 
    color:#222;
    position: relative; 
    padding-left: 20rpx;
    }
    .pubTitle .txt::before{  
    content: ""; 
    display: block;
    width:6rpx; 
    height: 20rpx; 
    background: #2ebefd; 
    position: absolute; 
    top:12rpx; 
    left: 0;
    }
    .pubTitle .more{  
    font-size: 24rpx; 
    color:#666;
    }

在 pubTitle.js 文件中写入组件的属性，pubTitle.js文件的 properties 部分的代码：

/** * 组件的属性列表 */
      properties: { 
        title:{ 
          type:String,
          value:""
        },    
        moreUrl:String,  
    },

![在这里插入图片描述][20210209165218452.png]

#### 2. 在首页的index.json文件中引入 pubTitle ： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

#### 3. 最后在页面中引入 pubTitle 标签，并传入相应值。 ####

效果图：  
![在这里插入图片描述][20210209165724648.png]

#### 4. 之后需要写相同样式的标题时，重复操作3即可。 ####

[20210209160403487.png]: /images/20221024/e98f006aa7a94d6e90bd90688d49eec7.png
[20210209162245589.png]: /images/20221024/825b04228ea0411ea07454b98cb1fba5.png
[20210209164554107.png]: /images/20221024/036cdca6013741eca893a9b23adef66d.png
[20210209165218452.png]: /images/20221024/e1ee31328d7f4409a4b1ad289c4000c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221024/0aee271ee71848c1ad24c8a7c068b10c.png
[20210209165724648.png]: /images/20221024/8acbb7161df54ac9b709e9a96d2638ad.png