首页 > 编程语言> 文章详细

微信小程序精通到入门---06 组件

2021-04-12 20:29:49 阅读：104 来源： 互联网

标签：count 06 baseTable 微信 height --- type 组件 data

微信小程序精通到入门---06 组件

一、组件基本使用

1、组件基本使用

1）新建一个一级目录components，并且右键创建一个component组件

2）组件注册

在.json文件进行注册，app.json是全局注册

  "usingComponents": {
    "top": "/components/top/top",
    "baseTable": "/components/table/baseTable",
    "base": "/components/base/base",
    "count": "/components/count/count"
  },

3）组件的js

组件的js主要是通过properties接收父页面或父组件的参数，可以通过this.data.获取，页面可以使用模板语法{{}}，通过ready()函数，是组件加载时的钩子函数。组件内可以通过<slot>插槽接收组件标签的内容。案例如下：

Component({

  externalClasses:['myclass'],  
  // 外部样式  组件内引用 <view class="myclass">  组件使用：<top myclass='custom_class'>
  options: {multipleSlots: true },
  // 是否使用多slot
  
  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:'top'
    }
  },

wxml: (myclass 是外部传入的样式，即在页面编写组件时使用 myclass="自定义样式"，这个样式会传递给组件内部使用)

<view class="top_nav">
    <view class="tit_ myclass">
      <i>.</i>
      {{title}}
      <i>.</i>
      <slot/> 
    </view>
</view>

wxss:

.top_nav{
  height: 85rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  background: #2793da;
  line-height: 100%;
  text-align: center;
}
.top_nav .tit_{
  line-height: 85rpx;
  height: 85rpx;
  width: 100%;
  color: #fff;
}

4）页面使用组件

新建一个comp页面，用来演示组件的使用


  <view style="width:750rpx">
     <top title="{{title}}" myclass="custom_class">顶部bar</top>
  </view>

2、table组件案例

js：


Component({

  externalClasses: ['_class'],
  options: { multipleSlots: true },

  properties: {
    _height: {
      type: Number,
      value: 65
    },
    titles: {
      type: Array,
      value: ['', '', '']
    },
    widths: {
      type: Array,
      value: [30, 40, 30]
    },
    props: {
      type: Array,
      value: ['id', 'name', 'age']
    },
    datas: {
      type: Array,
      value: [{ "id": 1, "name": 'zhangsan1', "age": 20 }, { "id": 2, "name": 'zhangsan2', "age": 22 }]
    }
  },

  data: {
    show:false
  },

  methods: {
  },

  ready () {
    this.setData({
      size:this.data.datas.length
    });
  }

})

Wxml：


<view class="baseTable _class">
  <block wx:if="{{size!=0}}">
      <view class="tr" style="height: {{_height}}rpx;">
        <block wx:for="{{titles}}" wx:key="id">
          <view class="th" style="width:{{widths[index]}}%">{{item}}</view>
        </block>
      </view>
      <block wx:for="{{datas}}" wx:key="id">
        <view class="tr" style="height: {{mheight}}rpx;">
            <block wx:for="{{props}}" wx:for-item="obj">
              <view class="td" style="width:{{widths[index]}}%">{{item[obj]}}</view>
            </block>
        </view>
      </block>
    </block>
</view>

wxss：

view .baseTable{width: 100%; border: 0px solid #C1D2DE;}
view .baseTable .tr{display: flex;width: 100%;justify-content: center;align-items: center;height: 80rpx;}
view .baseTable .td{display: flex;justify-content: center;text-align: center;height: 100%;box-sizing: border-box}
view .baseTable .th{display: flex;justify-content: center;text-align: center;height: 100%;box-sizing: border-box}
view .baseTable .th{padding:10rpx 0px;background:#333;color:#fff;border:#C1D2DE 1px solid;}
view .baseTable .td{padding:10rpx 0px;border:#C1D2DE 1px solid;white-space:pre-line;display:block }
.baseTable {font-size: 24rpx;}
.baseTable th{height: 40rpx;}
.baseTable td{height: 40rpx;}

页面引用和效果

  <view style="width:750rpx"> 
    <baseTable titles="{{titles}}" datas="{{datas}}"></baseTable>
  </view>

3、组件内数据传递

父组件通过properties给子组件传递数据，子组件通过 this.triggerEvent('customEvent', {参数})，触发事件并且传递参数，父组件通过bindcustomEvent事件绑定方法接收。


<view class="base _class">
  <slot name="first"></slot> 
   {{out_text}}
  <button bindtap='customMethod'>点击</button>
  <button bindtap='triggerEventTop'>触发父组件的方法</button>
  <slot name="end"></slot> 
</view>

Component({

  externalClasses:['_class'],  // <view class='base _class'>
  options: {multipleSlots: true },

  /**
   * 组件的属性列表
   */
  properties: {
    out:{
      type:String,
      value:''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    inner:1,
    out_text:''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    customMethod() {
      var temp = '';
      for(var i =0 ;i<=this.data.inner; i++) {
        temp += this.data.out;
      }
      this.data.inner++;
      this.setData({
        out_text: temp
      })
    },
    // 子组件的方法触发父组件绑定的事件
    triggerEventTop() {
      // 触发父组件事件
      this.triggerEvent('customEvent', {a:1,b:2}); // 父使用 bindcustomEvent=""
    }
  }
})

页面引用组件 (这里使用了命名slot，即组件内用slot name = "name" 占位，页面使用带slot属性="name"，传入html元素)

  <view style="width:750rpx">
    <base bindcustomEvent="changeOutStr" out="{{out}}">
      <block slot="first">首</block>
      <block slot="end">尾</block>
    </base>
  </view>

4、综合案例

功能概述： 我们设计一个count组件，这个组件初始可以设置count值，并且有2个按钮，一个是increment，一个是substract，这2个按钮可以加减count的值。

流程概述：父组件（页面）通过 count属性给count组件通过properties的形式赋值，count组件内部ready函数校验count值的正确，count组件内部加减按钮触绑定事件，事件函数的功能是触发父组件自定义事件，并且传递count加减后的值（如果加减值超越边界，那么return），父组件自定义事件的方法负责更改父组件的count值，此时子组件的properties属性的count值就被改变了。

js 、wxss、wxml:

// components/count/count.js
Component({

  externalClasses:['_class'],  // <view class='base _class'>
  options: {multipleSlots: true },
  
  /**
   * 组件的属性列表
   */
  properties: {
    count:{
      type:Number,
      value:1
    },
    min:{
      type:Number,
      value:0,
    },
    max:{
      type:Number,
      value:10
    }
  },
  data: {
  },
  ready() {
    var count = this.data.count;
    count = Math.max(count,this.data.min);
    count = Math.min(count,this.data.max);
    this.setData({
      count:count
    })

  },
  methods: {
    increment() {
      var count = this.data.count + 1;
      if(count>this.data.max) {
        return ;
      }
      this.triggerEvent('changeCount', {count:count});
    },
    substract() {
      var count = this.data.count - 1;
      if(count < this.data.min) {
        return;
      }
      this.triggerEvent('changeCount', {count:count});
    },
  },

})


<view class="wrap_class _class">
  <button bindtap="increment">+</button>
  <text>{{count}}</text>
  <button bindtap="substract">-</button>
</view>

.wrap_class {
  display: flex;
  justify-content: space-between;  
  flex-wrap:nowrap;
  height: 80rpx;
  line-height: 80rpx;
  width: 750rpx;
  margin-top: 10rpx;
}

页面使用组件：


  <view style="width:750rpx">
    <count count="{{out_count}}" bindchangeCount="changeCount"> </count>
  </view>

标签：count,06,baseTable,微信,height,---,type,组件,data
来源： https://blog.csdn.net/shuixiou1/article/details/115636854