2023面试高手

这个屌丝很懒，什么也没留下！

热门标签

微信小程序自定义组件_微信小程序自定义组件

作者：2023面试高手 | 2024-04-17 01:11:09

踩

微信小程序自定义组件

一，自定义组件的使用步骤

首先在我们的根目录创建一个components文件夹，专门用来存放我们自定义的组件
比如在item中，我们写好了一个顶部栏组件，我们想要在pages页面下的com文件中去使用这个组件，那么我们该怎么样去做呢？那么我们就需要来到com.json文件中将item组件给引入进来

当完成这两步的时候，其实你已经成功的引入进来了一个组件，只不过这个组件为空，没有编写内容，接下来我就教大家如何去写！

（1）组件的通信(父传子)

先来看一下代码，在父组件中

<cell title="今天吃大餐">我是父组件</cell>
1

在子组件中

<view>{{title}}</view> //今天吃大餐
1

子组件的js文件

  properties: {
    // 标题
    title:{
      type:String,
      value:""
    },
    // 显示右侧插槽
    showrslot:{
      type:Boolean,
      value:false,
    },
    // 图标
    icon:{
      type:String,
      value:""
    },
    tip:{
      type:String,
      value:"",
    },
    badge:{
      type:[Boolean,Number],
      value:false
    },
    url:{
      type:String,
      value:""
    },
    openType:{
      type:String,
      value:"navigate"
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在item.js文件的properties属性中，我们接收到了父组件传递过来的title

父组件向子组件传递值的时候是通过properties属性的，在item组件的js文件写法跟平时有些不同，我们会将所有的配置对象，例如data，methods，properties，都写在options方法中
在这里插入图片描述

properties，相当于我们所学vue中的props，是父组件向子组件传递数据的桥梁

2.子传父（triggerEvent）

父组件向子组件传递了一个值，
子组件接收该值之后会向父组件抛出一个反馈（命令）
父组件去执行子组件的命令
在子组件中

<view class="cell" bindtap="tapHd">
  <text>{{title}}</text>
  <text>{{count}}</text>
</view>
1
2
3
4

// components/cell/cell.js
Component({
  // 选项：
  options:{
    // 样式隔离：apply-shared 父影响子，shared父子相互影响， isolated相互隔离
    styleIsolation:"isolated",
    // 允许多个插槽
    multipleSlots:true,
    
  },
  // 通过组件的外部类实现父组件控制子自己的样式
  externalClasses:["cell-class"],

  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:""
    },
    num:{
      // 定了类型
      type:Number,
      //定义默认值
      value:1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
     count:1 
  },
  lifetimes:{
    // 当组件的生命周期被挂载时候
     attached(){
       console.log(this.data)
        // cout的值为父组件传递的num值
        this.setData({count:this.data.num})
      }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    tapHd(){
      this.setData({count:this.data.count+1})
      // 发送一个事件
      this.triggerEvent("cellclick",this.data.count)
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

在父组件中

<cell bind:cellclick="clickHd"></cell>
1

// components/cell/cell.js
Component({
  // 选项：
  options:{
    // 样式隔离：apply-shared 父影响子，shared父子相互影响， isolated相互隔离
    styleIsolation:"isolated",
    // 允许多个插槽
    multipleSlots:true,
    
  },
  // 通过组件的外部类实现父组件控制子自己的样式
  externalClasses:["cell-class"],

  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:""
    },
    num:{
      // 定了类型
      type:Number,
      //定义默认值
      value:1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
     count:1 
  },
  lifetimes:{
    // 当组件的生命周期被挂载时候
     attached(){
       console.log(this.data)
        // cout的值为父组件传递的num值
        this.setData({count:this.data.num})
      }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    tapHd(){
      this.setData({count:this.data.count+1})
      // 发送一个事件
      this.triggerEvent("cellclick",this.data.count)
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

3.样式隔离

因为组件具有很强的复用性，那么他们的样式是不应该互相干扰的，所以当styleIsolation为isolated时，各自的样式互相独立

  options:{
    // 样式隔离：apply-shared 父影响子，shared父子相互影响， isolated相互隔离
    styleIsolation:"isolated",
    // 允许多个插槽
    multipleSlots:true,
    
  },
1
2
3
4
5
6
7

3.定义外部类

externalClass:[“cell-class”]

在这里插入图片描述

<view cell-class='mycell1'>
  我是cell组件
</view> 
 <view cell-class='mycell2'>
  我是cell组件
</view> 
1
2
3
4
5
6

.mycell1{
  color: #f70;
  background-color: seagreen;
  line-height: 88rpx;
}
.mycell2{
  color: 'black';
  background-color: sienna;
  line-height: 88rpx;
}
1
2
3
4
5
6
7
8
9
10

这样我们就能够分别定义组件的样式了

4.插槽

跟vue中的使用方式是一模一样的，直接看代码
在父组件中

<cell>我在这里</cell>
1

在子组件中

<view>父组件插件来的内容都放在slot里面
  <slot></slot>
<view>
1
2
3

5.具名插槽

在父组件中

<cell cell-class="mycell">
<text>胡萝卜</text>
<text slot="first">第一</text>
<text slot="second">第二</text>

</cell>
1
2
3
4
5
6

在子组件中
在cell.js文件中开启多命名插槽

<view>
  <slot name="first"></slot>
  <slot name="second"></slot>
</view>
1
2
3
4

三，案例

1.下面这张页面就可以用组件来实现

在这里插入图片描述

在components文件夹下，新建一个item文件
item.wxml文件：

<navigator class="item itemclass" url="{{url}}" open-type="{{openType}}" bindtap="itemclick">
  <view class="icon" wx:if="{{icon}}">
    <image src="{{icon}}" mode="aspectFill"></image>
  </view>
  <view class="content">
      <view class="title">
        <view class="title" wx:if="{{title}}">{{title}}</view>
        <slot name="title"  wx:else ></slot>
      </view>
     
      <view class="right" wx:if="{{!showrslot}}">
          <view class="tip">{{tip}}</view>
          <view class="badge" wx:if="{{badge}}">
            <view wx:if="{{badge===true}}" class="dot">                           
            </view>
            <view wx:else  class="redbadeg">   
            {{badge}}                        
            </view>
          </view>
          <view class="arrow"></view>
      </view>
      <slot name="right" wx:else></slot>
  </view>
</navigator>

<!-- 
  icon 图标
  conent 内容
  title 标题
  right 右侧
  tip 提示
  badge 红点
  arrow 箭头
 -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

item.js文件

Component({
  options:{
    multipleSlots:true
  },
  externalClasses:["itemclass"],
  /**
   * 组件的属性列表
   */
  properties: {
    // 标题
    title:{
      type:String,
      value:""
    },
    // 显示右侧插槽
    showrslot:{
      type:Boolean,
      value:false,
    },
    // 图标
    icon:{
      type:String,
      value:""
    },
    tip:{
      type:String,
      value:"",
    },
    badge:{
      type:[Boolean,Number],
      value:false
    },
    url:{
      type:String,
      value:""
    },
    openType:{
      type:String,
      value:"navigate"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
      itemclick(e){
        console.log(e);    
        //发送一个事件 
        this.triggerEvent("itemclick",e.detail)
      }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

item.wxss文件

/* components/item/item.wxss */
.item{
  line-height: 88rpx;
 
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon{
  margin-left: 30rpx;
  margin-right: 30rpx;   
  height: 100%;
  display: flex;
  align-items: center;
}
.icon image{
  width: 60rpx;
  height: 60rpx;
}
.content{
  padding: 0 30rpx;
  border-bottom: 1rpx solid #ccc;
  display: flex;
  flex:1;

}
.title{
  flex:1;
  color:#333;
  font-size: 32rpx;
}
.right{
  display: flex;
  align-items: center;
}
.right .arrow{
  height: 30rpx;
  width: 30rpx;
  border-top:3rpx solid #999;
  border-right: 3rpx solid #999;
  transform: rotate(45deg);
}

.tip{
  color:#999;
  font-size: 24rpx;
}
.dot{
  height: 14rpx;
  width: 14rpx;
  background-color: #f00;
  border-radius: 12rpx;
  margin-left: 15rpx;

}
.redbadeg{
  font-size: 18rpx;
  color:#fff;  
  border-radius: 18rpx;
  background-color: #f00;
  max-height: 30rpx;
  width: 30rpx;
  line-height: 30rpx;
  text-align: center;
  margin-left: 15rpx;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

在父组件中
com.wxml文件

<item title="支付" icon="/images/icon01.png"></item>
<item title="相册" icon="/images/icon02.png"></item>
<item title="支付" ></item>

<item title="消息" icon="/images/icon02.png"  badge="{{true}}" tip="3条未读"></item>

<item title="消息" icon="/images/icon02.png"  badge="{{12}}" tip="12条未读"></item>

<item title="消息" icon="/images/icon02.png" showrslot="{{true}}">
  <switch checked="true" slot="right"></switch>
</item>

<item>
  <view slot="title">插槽title</view>
</item>

<item title="新闻" icon="/images/icon02.png"  url="/pages/yidian/yidian" open-type="switchTab"> 
</item>
<item title="首页" icon="/images/icon02.png"  url="/pages/home/home" > 
</item>

<item title="消息" icon="/images/icon02.png" showrslot="{{true}}" itemclass="myitem">
  <switch checked="true" slot="right"></switch>
</item>


<!-- <view class="title">自定义组件</view>
<cell bind:cellclick="cellHd"  title="中美两国和平相处" num="{{5}}"></cell>
<cell  bind:cellclick="cellHd" title="阶级不同立场也不同" ></cell> -->


<!-- <cell cell-class="mycell">
  <text slot="pre">声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/437393

推荐阅读

相关标签

微信小程序自定义组件_微信小程序 自定义组件