微信小程序网悦新闻开发--自定义组件开发（六）

目录

微信小程序网悦新闻开发--功能介绍（一）

微信小程序网悦新闻开发--小程序配置（二）

微信小程序网悦新闻开发--首页模块开发（三）

微信小程序网悦新闻开发--视频模块开发（四）

微信小程序网悦新闻开发--我的模块开发（五）

微信小程序网悦新闻开发--自定义组件开发（六）

微信小程序网悦新闻开发--云函数以及云数据开发（七）

前言

在微信小程序开发的过程中，我认为组件式开发是必须要掌握的一种技能。开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用。也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

组件新建

1、首先在根目录下创建一个components目录，用来存放所有组件。

2、然后右击components文件夹选择新建一个components。

3、这里我们输入myTabBar就会给我们自动创建一个组件，里面包含了 json wxml wxss js 4个文件。

4、要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）。

{
  "component": true,
  "usingComponents": {}
}

组件编写

到这里组件就新建成功，父组件通过属性传值在子组件的properties属性可以取到，但是必须定义好type类型。子组件也可以通过triggerEvent事件把值传给父组件。下面我们给大家展示一下组件的代码。

1、wmxl代码

<scroll-view scroll-x='true'>  
<view style="width:{{width}}"  class="tabBarBox">
  <view data-item="{{item}}"  bindtap="tabBarItemTap" class="{{selected_tabBar.name==item.name?'tabBarItemActive':'tabBarItem'}}" wx:for="{{data_tabBar_list}}" wx:for-index="idx" wx:for-item="item" >
    <text>{{item.name}}</text>
  </view>
</view>
</scroll-view>

2、js代码

Component({
  properties: {
    data_tabBar_list: {
      type: Array,
      value: ''
    },
    selected_tabBar: {
      type: Object,
      value: {}
    },
    width: {
      type: String,
      value: '600px'
    },
  },
  data: {},
  methods: {
    tabBarItemTap:function(e){
      let data = e.currentTarget.dataset.item;
      this.triggerEvent("tabBarItemTap", data);
    }
  }

})

3、wxss代码

.tabBarBox{
  padding: 8px;
  display: flex;
  flex-direction: row;
  width:600px;
}
.tabBarItem{
  height: 20px;
  color: #B4B4B4;
  display: inline-block;
  margin-right:18px;
}
.tabBarItemActive{
  height: 20px;
  margin-right:18px;
  display: inline-block;
}

组件调用

在json文件中使用usingComponents引用组件

{
  "usingComponents": {
    "myLoading": "/components/myLoading/index",
    "myMessageBox": "/components/myMessageBox/index",
    "myTabBar": "/components/myTabBar/index"
  }
}

在父页面以标签的形式就可以调用

<myTabBar  width="{{'600px'}}"  bind:tabBarItemTap="tabBarItemTap" data_tabBar_list="{{data_tabBar_list}}" selected_tabBar="{{selected_tabBar}}"></myTabBar>