微信小程序实现自定义组件

  作者:冷影再见   标签:[ 微信小程序 ]  点击:[ 470 ]
简介: 在平时开发中难免会遇见使用 一个功能很多次的时候,这个时候我们就需要实现自定义组件,这里我就简单的说下,音频播放器子组件的使用,并使用插槽,让我们如虎添翼,废话不多说,上代码...

第一步:子组件 wxml 代码

<!-- 音频播放组件 -->
<view class="co_recording clear" style="{{co_recstyle}}">
  <view class="tit" wx:if='{{filename == true && uname == true }}'>
    <text class="f_shier_jiu">{{filename}}</text>
    <text class="f_shier_jiu">{{uname}}</text>
  </view>
  <view class="pay clear">
    <view class="icoi">
      <!-- 插槽播放按钮 插槽 name的值在使用的时候需要与name 值同名-->
      <slot name="play"></slot>
      <!--播放按钮-->
    </view>
    <view class="progress">
        <view class="body-view">
            <!-- _asliderchange  是绑定一个事件 名字自己随便取 -->
            <slider bindchange="_asliderchange" bindchanging="_bchangi" activeColor='#666' value='{{reckon}}'

 left-icon="cancel" min="0" block-size='18' max='{{total}}' right-icon="success_no_circle"/>
        </view>
      <view class="txtti">
        <text class="f_shi_j">{{reckon}}s</text>
        <text class="f_shi_j">{{total}}s</text>
      </view>
    </view>
  </view>
</view>

第二步:子组件 js 代码

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    filename:{
      type: String,
      value: '文件名'
    },
    uname: {
      type: String,
      value: '发布者'
    },
    reckon:{
      type: Number,
      value: '计时'
    },
    total: {
      type: Number,
      value: '时长'
    },
    trans: {   // 过度多少秒
      type: String,
      value:'0'
    },
    co_recstyle: { // co_recording 自定义样式
      type: String,
      value: ''
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    valr:''
  },

  /**
   * 组件的方法列表
   */  
  methods: {
    // 进度拖动
    _asliderchange: function (e) {
      // 事件带参传入父级 注意名字 没有下划线 asliderchange
      this.triggerEvent("asliderchange",{
        ...e.detail
      });
    },
    _bchangi:function(e){
      // console.log(e, '52')
    }
  
  }
})

第三步:引入 子组件 ,

1.可以在app.json 直接进行公共引入,

2.也可以直接在使用的页面的json中引入

  "usingComponents": {
    "recording": "component/recording/recording",
  }

第四步:在使用的地方引入 子组件 

        <!-- 语音 -->
  <view class="mb" style="height:auto;line-height:auto;padding:8px 14px;" wx:if="{{item.record.length > 3}}">
    <recording id="recording" bi rate='0' data-id="{{index}}" bind:asliderchange="_bchangi"

 filename='' uname='' trans='{{item.trans}}' reckon='{{item.reckon}}' total='{{item.duration / 1000}}' co_recstyle=''>
       <van-icon slot="play" data-id="{{index}}" size='26px' wx:if="{{item.ifpar}}" bindtap='pauseb'

 color='#777' name="pause-circle-o" />
    <van-icon slot="play" data-id="{{index}}" size='26px' wx:else bindtap='playb' color='#777' name="play-circle-o" />
    </recording>
  </view>

最后一步:在使用的页面 js 中 实现与子组件的 通信,接收子组件传来的参数

  // 进度拖动
  _bchangi: function (e) {
    let val = e.detail.value; // 进度
    let index = e.currentTarget.dataset.index; // 索引
    let inifpar = this.data.inifpar; //上次记录
    voicePlayer.seek(val);
    if (index == inifpar && inifpar != ''{
      let paused = voicePlayer.paused; // false 播放中
      if (paused{
        this.playb(e);
      }
      console.log(paused, 'paused 状态')
      voicePlayer.seek(val);
    } else {
      this.playb(e);
    }
    console.log(val, '进度拖动 348', e)
  },