微信小程序之 自定义组件

效果图

创建自定义组件

创建components 文件夹放置组件，一个组件 一个文件夹，右键新建自动创建.js、.json、.wxml、.wxss文件

组件

• 局部引用
  页面.json配置文件中引用组件的方式

{
  "usingComponents": {
    "my-test":"../components/test/test"
  },
  "enablePullDownRefresh":true,
  "onReachBottomDistance": 50
}

• 全局引用
  app.json全局配置文件中引用组件的方式

//新增字段
"usingComponents": {
    "my-test":"/pages/components/test/test"
  }

组件与页面的区别

• 组件的.json文件中需要声明 "component": true, 属性
• 组件的.js 文件中调用的是Component() 函数
• 组件的事件处理函数需要定义到methods节点中

// pages/components/Test1/test1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

自定义组件-样式

• 组件样式隔离
  自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构
• 样式隔离的注意点
  • app.wxss中的全局样式对组件无效
  • 只有class选择起会有样式隔离效果，id选择起、属性选择起、标签选择起不受样式隔离的影响
    TIPS:建议使用class选择器
• 修改组件的样式隔离选项
  通过stylelsolation修改组件的样式隔离选项

  Component({
    options:{
      styleIsolation:'isolated' //apply-shared(单向影响)   shared(互相影响)
    }
  )}
  或在 组件的.json文件中如下配置：
   "styleIsolation":'isolated' //apply-shared(单向影响)   shared(互相影响)
  

自定义组件-数据、方法、属性

• data数据
  用于组件模板渲染的私有数据，需要定义到data节点中
• methods 方法
  时间处理函数和自定义方法需要定义到methods节点中
• properties 属性
  properties是组件的对外属性，用来接收外界传递到组件中的数据
• data 和 properties的区别
  • data更倾向于存储组件的私有数据
  • properties 更倾向于存储外界传递到组件中的数据

pages/components/test/test.js

Component({
  options:{
    styleIsolation:'isolated'
  },
  /**
   * 组件的属性列表
   */
  properties: {
    max:{   // 完整定义属性的方法【当需要指定属性默认值时，建议使用此方法】
      type:Number, // 属性值的数据类型
      value:10 // 属性默认值
    },
    min:Number  // 简化定义属性的方式【不需要指定属性默认值时，可以使用简化方式】
  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 点击事件
     */
    addCount(){
      if(this.data.count >= this.properties.max) return
      this.setData({
        count:this.data.count + 1,
        max:this.properties.max - 1  // 修改属性中的值
      })
      this._showCount(),
      this.showInfo()
    },
    _showCount(){
      wx.showToast({
        title: 'count是'+this.data.count,
        icon:'none'
      })
    },
    /**
     * data 和 properties的区别
     */
    showInfo(){
      console.log(this.data); //输出结果：count: 1, max: 20, min: 5
      console.log(this.properties); //输出结果：count: 1, max: 20, min: 5
      console.log(this.data === this.properties); //输出结果：true
      //结果为true 证明 data 数据 和 properties属性【在本质上是一样的，都是可读可写的】
    }
  }
})

pages/components/test/test.json

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

pages/components/test/test.wxml

<button bindtap="addCount" type="warn">组件的count +1</button>
<view>组件的count：{{count}}</view>
<view>max:{{max}}---min:{{min}}</view>


<!--pages/message/message.wxml-->
<view>
<text>下拉刷新测试</text>
</view>
<view>
  <text>count值为:{{count}}</text>
<button type="primary" bindtap="handleCount">点击count+1</button>
</view>
<!-- 内嵌 wxs 脚本 -->
<view>{{username}}</view>
<view>{{test.toUpper(username)}}</view>
<wxs module="test">
  module.exports.toUpper = function(str){
    return str.toUpperCase()
  }
</wxs>

<!-- 外联wxs 脚本 -->
<wxs src="../message/tools.wxs" module="test1"></wxs>
<view>{{name}}</view>
<view>{{test1.toLower(name)}}</view>

<my-test max='20' min='5'></my-test>

数据监听器

监听和响应任何属性和数据字段的变化，从而执行特定的操作

• 数据监听器的基本用法
  • 监听数据变化
  • 监听对象属性的变化

     Component({
       observers:{
         '对象1.属性A，对象2.属性B': function(属性A的新值，属性B的新值){
           /**
             * 触发此监听器的3种情况
             * 1.【为属性A赋值】使用 setData 设置 this.data.对象.属性A时触发
             * 2.【为属性B赋值】使用 setData 设置 this.data.对象.属性B时触发
             * 3.【直接为对象赋值】使用 setData 设置 this.data.对象 时触发
             */

         }
       }
     })

// <!--pages/components/test/test.wxml-->
<view>{{n1}}+{{n2}}={{sum}}</view>
<button bindtap="addN1">n1 + 1</button>
<button bindtap="addN2">n2 + 1</button>


// pages/components/test/test.js
Component({
  options:{
    styleIsolation:'isolated'
  },
  /**
   * 组件的属性列表
   */
  properties: {
    max:{   // 完整定义属性的方法【当需要指定属性默认值时，建议使用此方法】
      type:Number, // 属性值的数据类型
      value:10 // 属性默认值
    },
    min:Number  // 简化定义属性的方式【不需要指定属性默认值时，可以使用简化方式】
  },

  /**
   * 组件的初始数据
   */
  data: {
      count:0,
      // 监听器 变量
      n1:0,
      n2:0,
      sum:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 点击事件
     */
    addCount(){
      if(this.data.count >= this.properties.max) return
      this.setData({
        count:this.data.count + 1,
        max:this.properties.max - 1  // 修改属性中的值
      })
      this._showCount(),
      this.showInfo()
    },
    _showCount(){
      wx.showToast({
        title: 'count是'+this.data.count,
        icon:'none'
      })
    },
    /**
     * data 和 properties的区别
     */
    showInfo(){
      console.log(this.data); //输出结果：count: 1, max: 20, min: 5
      console.log(this.properties); //输出结果：count: 1, max: 20, min: 5
      console.log(this.data === this.properties); //输出结果：true
      //结果为true 证明 data 数据 和 properties属性【在本质上是一样的，都是可读可写的】
    },
    addN1(){
      this.setData({
        n1:this.data.n1 + 1
      })
    },
    addN2(){
      this.setData({
        n2:this.data.n2 + 1
      })
    }
  },
  observers:{ // 数据监听器
      'n1,n2':function(newn1,newn2){
        this.setData({
          sum:newn1 + newn2
        })
      }
  }
})