微信小程序开发——自定义组件开发

做好了小程序，发现两个页面的tab样式基本相同，只是个数不同，那能不能提炼成一个公共组件呢？如何抽象，以下咱们来探索“如何开发出一个自定义的小程序组件”！

目录

一、新建组件

二、组件编写

三、组件引用

四、组件交互

五、实现组件动态样式

一、新建组件

新建文件夹components文件夹->新建tabs文件夹->右键->新建Component

建好的组件目录如下：

​​​​​​​

二、组件编写

组件开发，其实跟我们之前写页面一样，把之前组件的.js、.json、.wxml、.wxss文件拷贝过来即可。

这里具体code如下：

tab.wxml文件：

<!--components/tab.wxml--> 
<view class="swiper-tab"> 
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">商业贷款</view> 
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">公积金贷款</view> 
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">组合贷款</view> 
</view>

tab.js文件

// components/tab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabTitles: {
        type: Array,
        value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentTab: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //  tab切换逻辑
    swichNav: function( e ) {
        var that = this;
        if( this.data.currentTab === e.target.dataset.current ) {
            return false;
        } else {
            that.setData( {
                currentTab: e.target.dataset.current
            })
        }
        this.triggerEvent('myevent', this.data.currentTab);
    },
  }
})

tab.wxss文件

/* components/tab.wxss */
.swiper-tab{
    width: 100%;
    text-align: center;
    line-height: 80rpx;
}
    
.swiper-tab-list{ 
    font-size: 30rpx;
    display: inline-block;
    width: 33.33%;
    color: gray;
}

.on{ 
    font-weight:bolder;
    color:skyblue;
    border-bottom: 4rpx solid skyblue;
}

因为tab.json这里没做改动，就不贴code了。以上，组件的代码编写基本完成！

三、组件引用

组件编写完了，就需要将组件引用到具体的文件中，那如何引用组件呢？组件引用分为如下两种：

1、全局引用：app.json中引用组件

// app.json
{
  ....
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
  "usingComponents": {
      "tab":"/components/tab/tab"
  }
}

2、局部引用：在具体页面的.json文件中引用组件

// index.json 文件
{
  "usingComponents":{
    "tab":"/components/tab/tab"
    }
}

修改使用组件页面的.xml文件，使用tab组件

<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
    <!--tab组件使用-->
    <tab></tab>
    <view class="swiper-tab">
        <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">商业贷款</view>
        <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">公积金贷款</view>
        <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">组合贷款</view>
    </view>
    <!--其他页面样式code-->
    ....
</scroll-view>

修改响应js，增加console.log()。保存后，刷新，组件显示如下：

这里原样式没有删除，后面再删除即可。

四、组件交互

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

//组件页面
swichNav: function( e ) {
    var myEventOption = {};
    this.triggerEvent('myevent', this.data.currentTab, myEventOption);
}
// 父页面
<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<tab bindmyevent="onMyEvent"></tab>

Page({
// 事件监听
onMyEvent: function(e){
    console.log(e.detail);
  }
 })

点击参数打印：

实现效果：

​​​​​​​

删除原文件中的组件相关代码，即可实现tab组件

五、实现组件动态样式

因为我们两个页面的tab数量是不同的，那么就需要我们需要传入不同的参数，让组件tab动态显示不同的个数和名称。那如何实现呢？其实，很好实现，如下：

修改component/tab组件.wxml文件及.js文件

<!--tab.wxml-->
<view class="swiper-tab">
    <!-- 组件样式数组形式传入，初始化tab -->
    <block wx:for="{{tabTitles}}" wx:key="index" wx:for-item="item">
        <view class="swiper-tab-list {{currentTab== index ? 'on' : ''}}" data-current="{{index}}" bindtap="swichNav">{{index}}--{{item}}</view>
    </block>
</view>

//tab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabTitles: {
        type: Array,
        value: []
    }
  }
}

注意：

这里，我们需要从父页面传入tabTitles这个数组，来进行双向绑定，动态渲染组件tab title的数量。

修改index.js和index.xml页面(使用tab组件的页面js和xml)

<!--index.wxml-->
<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<!-- tabTitles为传入值 -->
<tab bindmyevent="onMyEvent" tabTitles="{{tabList}}"></tab>

// index.js
Page({
  data: {
    tabList:["商业贷款","公积金贷款","混合贷款"]
    }
 })

另一个使用了tab组件的页面也同步修改

<!--detail.wxml-->
<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<!-- tabTitles为传入值 -->
<tab bindmyevent="onMyEvent" tabTitles="{{tabList}}"></tab>

// detail.js
Page({
  data: {
    tabList:["等额本息","等额本金"]
    }
 })

重新运行，自定义组件基本实现！完美！！！

最后，欢迎大家体验小程序，有宝贵意见或建议，感谢留言~~~