小程序自定义组件使用详解

我就是我 2023-02-24 03:44 2阅读 0赞

之前写过怎么使用小程序的组件，Weui，今天总结一下，怎么使用自定义组件，以 select 下拉框为例

![20200708101159902.png][]

首先，自定义组件，肯定要有组件，我们先在 components 里面新建 select 文件夹 （如果是小程序原生的，里面文件应该会自动生成，我这里用的是 mpvue ，里面的文件 select.js , select.json , select.wxml , select.wxss 是要自己添加的）

![20200708094733627.png][]

select.wxml

<view class='com-selectBox'>
      <view class='com-sContent' bindtap='selectToggle'>
        <view class='com-sTxt'>{
       {nowText}}</view>
        <image class="" src="../../../../../static/images/user.png" class='com-sImg' animation="{
       {animationData}}"></image>
      </view>
      <view class='com-sList' wx:if="{
       {selectShow}}">
        <view wx:for="{
       {propArray}}" data-index="{
       {index}}" data-level='{
       {item.level}}' wx:key='index' class='com-sItem' bindtap='setText'>
          {
       {item.text}}
        </view>
      </view>
    </view>

select.wxss

.com-sContent {
      border: 1px solid #e2e2e2;
      background: white;
      font-size: 24rpx;
      position: relative;
      height: 30px;
      line-height: 30px;
    }
    
    .com-sImg {
      position: absolute;
      right: 10px;
      top: 11px;
      width: 16px;
      height: 9px;
      transition: all .3s ease;
    }
    
    .com-sTxt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 20px 0 6px;
      font-size: 14px;
    }
    
    .com-sList {
      background: white;
      width: inherit;
      position: absolute;
      border: 1px solid #e2e2e2;
      border-top: none;
      box-sizing: border-box;
      z-index: 3;
      max-height: 120px;
      overflow: auto;
    }
    
    .com-sItem {
      height: 30px;
      line-height: 30px;
      border-top: 1px solid #e2e2e2;
      padding: 0 6px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }
    
    .com-sItem:first-child {
      border-top: none;
    }

select.json

{
      "component": true
    }

select.js

// Componet/Componet.js
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        propArray: {
          type: Array
        }
      },
      /**
       * 组件的初始数据
       */
      data: {
        selectShow: false, // 初始option不显示
        nowText: '请选择', // 初始内容
        animationData: {}, // 右边箭头的动画
      },
      /**
       * 组件的方法列表
       */
      methods: {
        // option的显示与否
        selectToggle: function () {
          var nowShow = this.data.selectShow // 获取当前option显示的状态
          // 创建动画
          var animation = wx.createAnimation({
            timingFunction: 'ease'
          })
          this.animation = animation
          if (nowShow) {
            animation.rotate(0).step()
            this.setData({
              animationData: animation.export()
            })
          } else {
            animation.rotate(180).step()
            this.setData({
              animationData: animation.export()
            })
          }
          this.setData({
            selectShow: !nowShow
          })
        },
        // 设置内容
        setText: function (e) {
          var nowData = this.properties.propArray // 当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
          console.log('level============', this.properties.level)
          console.log(nowData)
          var nowIdx = e.target.dataset.index // 当前点击的索引
          var nowText = nowData[nowIdx].text // 当前点击的内容
          // 再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
          this.animation.rotate(0).step()
          this.setData({
            selectShow: false,
            nowText: nowText,
            animationData: this.animation.export()
          })
          var nowDate = {
            id: nowData[nowIdx].id,
            text: nowText
          }
          this.triggerEvent('myget', nowDate)
        }
      }
    })

到这里自定义组件的组件就写好了，然后我们在需要使用的页面引用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

在需要使用的页面对应的 .json 文件里面添加

"usingComponents": {
        "Select": "/components/select/select"
      }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

.js 里面 getProjectType 方法是和 组件里面的 myget 是对应的， 打印出 e.detail 就是组件里面设置的数据了，

getProjectType: function (e) {
        console.log(e.detail)
      },

![20200708101647709.png][]

以上直接复制，稍微改改就可以看的明白了

现在讲一下细节

组件之间的传值

具体的可以看 [官方文档对组件的解释][Link 1]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3][]

才疏学浅，如有不足，欢迎指出 ，不胜感激 (•̀ᴗ•́)و ̑̑

[20200708101159902.png]: /images/20230209/3c604f611ae145a4a10e81ffaf3f6a5c.png
[20200708094733627.png]: /images/20230209/01b371617716428da732900a5e7c99b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200708095142442.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200708100136534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[20200708101647709.png]: https://img-blog.csdnimg.cn/20200708101647709.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200708155614776.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200708155736562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70