小程序基础知识整理（组件篇）

最新推荐文章于 2024-02-03 10:45:00 发布

꧁ଓ碎♡⃝碎ೡ꧂

最新推荐文章于 2024-02-03 10:45:00 发布

阅读量1.1k

点赞数 6

文章标签：微信小程序小程序微信前端

本文链接：https://blog.csdn.net/qq_63944356/article/details/127396172

版权

组件

复用性强

创建组件

项目根目录下，新建components
components---->新建文件夹 mycom--->myCom文件夹右击新建component 输入组件的名称回车自动生成4个文件

引入组件

全局引入

组件可以在每个小程序页面中使用

多个页面都会用到该组件使用全局

app.json

注册组件

"usingComponents":{
     "my-com":"/components/myCom/myCom"
},

使用组件

<my-com></my-com>

局部引入

组件只能在当前被引入的页面中使用

页面的json中

{
  "usingComponents": {
    "my-text":"/components/myText/myTest"
  }
}

使用组件

<my-text></my-text>

组件和页面的区别

都是由4个文件组成 .js .json .wxml .wxss

组件的json文件中需要声明 "component": true,

组件的 .js文件中调用Component() 函数

组件的事件处理函数需要定义到methods中

页面

页面的 .js中调用 Page()方法

样式

一般情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的ui结构

组件myCom的样式不会影响组件myText
组件myCom的样式不会影响小程序页面
小程序页面的样式不会影响组件myCom和组件myText

app.wxss中的全局样式对组件无效

只有class选择器有样式隔离的影响，id，标签，属性选择器不受样式隔离的影响

建议使用class选择器

data数据

定义组件的数据

  data: {
    count:0
  },

methods方法

事件处理函数和自定义方法定义到methods中

methods: {
    addCount(){
      this.setData({
        count:this.data.count+1
      })
      this.showCount()
    },
    showCount(){
      wx.showToast({
        title: 'count值为'+this.data.count,
      })
    }

  }

properties

父传子

properties是组件的对外属性，用来接收外界传递给组件中的数据

//父组件
<my-com tit="2202A大哥们好" num="{{20}}"></my-com>

 properties: {
    tit:{
      type:String,   //数据类型
      value:'hello'   //默认值
    },
    num:Number
  },

properties和data的区别

小程序的组件中，properties属性和data属性用法相同，都是可读可写的但是：
- data更倾向于存储组件的私有数据
- properties 存储外界传递给组件的私有数据

    addCount(){
      console.log(this.data)   //{count: 0, tit: "2202A大哥们好", num: 20}
      console.log(this.properties)
      // 本质上一样的，都是可读可写的
      console.log(this.properties===this.data)   //true
    }
 }

使用setData修改properties的值

this.setData({
          num:this.properties.num+2
})

数据监听器

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

Component({
    observers:{
        '字段A，字段B'：function(字段A的新值，字段B的新值){
            //代码
        }
    }
})

代码

<view class="box">
    <view>{{n1}}+{{n2}}={{sum}}</view>
    <button bindtap="addN1">n1+1</button>
    <button bindtap="addN2">n2+1</button>
</view>

Component({
  /**
   * 组件的初始数据
   */
  data: {
    n1:0,
    n2:0,
    sum:0
  },

  observers:{
    'n1,n2':function(newN1,newN2){
      this.setData({
        sum:newN1+newN2
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    addN1(){
      this.setData({
        n1:this.data.n1+1
      })
    },
    addN2(){
      this.setData({
        n2:this.data.n2+1
      })
    }
  }
})

监听对象属性的变化

支持监听对象中单个或多个属性的变化

Component({
  observers: {
    'some.field.**': function(field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      field === this.data.some.field
    },
  },
  attached: function() {
    // 这样会触发上面的 observer
    this.setData({
      'some.field': { /* ... */ }
    })
    // 这样也会触发上面的 observer
    this.setData({
      'some.field.xxx': { /* ... */ }
    })
    // 这样还是会触发上面的 observer
    this.setData({
      'some': { /* ... */ }
    })
  }
})

案例

wxml

{{fullColor}}
<view style="background-color:rgb({{fullColor}});" class="colorbox">
  {{fullColor}}
</view>
<button bindtap="changR" size="mini">R</button>
<button bindtap="changG" size="mini">G</button>
<button bindtap="changB" size="mini">B</button>

Component({
  /**
   * 组件的初始数据
   */
  data: {
    rgb:{
      r:0,
      g:0,
      b:0,
    },
    fullColor:'0,0,0'
  },

  // 监听对象中属性的变化
  observers:{
    'rgb.r,rgb.g,rgb.b':function(r,g,b){
      this.setData({
        fullColor:`${r},${g},${b}`
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changR(){
      this.setData({
        'rgb.r':this.data.rgb.r+5>255?255:this.data.rgb.r+5
      })
    },
    changG(){
      this.setData({
        'rgb.g':this.data.rgb.g+5>255?255:this.data.rgb.g+5
      })
    },
    changB(){
      this.setData({
        'rgb.b':this.data.rgb.b+5>255?255:this.data.rgb.b+5
      })
    }
  }
})

组件生命周期

组件全部生命周期

组件主要生命周期

在小程序组件中，最重要的生命周期函数有3个，分别是created，attached，detached

组件实例刚刚被创建好的时候，created生命周期函数会被触发

不能调用setData
用于给组件的this添加一些自定义的属性字段

组件完全初始化完毕，进入页面节点树后，attached生命周期函数会触发

this.data已被初始化完毕
初始化工作，比如发请求

组件离开页面节点树后，detached生命周期函数会触发

退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数
清理性质的工作

lifetimes节点

#### 组件主要生命周期

> 在小程序组件中，最重要的生命周期函数有3个，分别是created，attached，detached

组件实例刚刚被创建好的时候，created生命周期函数会被触发

- 不能调用setData
- 用于给组件的this添加一些自定义的属性字段

组件完全初始化完毕，进入页面节点树后，attached生命周期函数会触发

- this.data已被初始化完毕
- 初始化工作，比如发请求

组件离开页面节点树后，detached生命周期函数会触发

- 退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数
- 清理性质的工作

#### lifetimes节点

组件所在页面的生命周期

自定义组件的行为依赖于页面状态的变化，就需要用到组件所在页面的生命周期

每当触发页面的show生命周期函数的时候，我们希望能够重新生成一个随机的RGB颜色值

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

页面展示的时候，重新生成一个随机的RGB颜色值

Component({
 pageLifetimes:{
    show(){
      this._randomColor()
    }
  },
  methods:{
    _randomColor(){
      this.setData({
        _rgb:{
          r:Math.floor(Math.random()*256),
          g:Math.floor(Math.random()*256),
          b:Math.floor(Math.random()*256)
        }
      })
    }
  }
})

插槽

什么是插槽

组件的wxml中可以提供一个<slot>节点，用于承载组件引用时提供的子节点。

传递单个slot

需要使用多 slot 时，可以在组件 js 中声明启用。

options: {
    multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
  },

组件

<text>components/myTest/myTest.wxml</text>
<view>hello</view>

<slot name="one"></slot>
<view>good</view>
<slot name="two"></slot>

页面

<my-test>
  <view slot="one"> 
    <text>123</text>
  </view>
  <view slot="two"> 
    <text>345</text>
  </view>
</my-test>

父子组件通信

父子组件之间通信的 3 种方式

① 属性绑定

用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据

② 事件绑定

用于子组件向父组件传递数据，可以传递任意数据

③ 获取组件实例

父组件还可以通过 this.selectComponent() 获取子组件实例对象
这样就可以直接访问子组件的任意数据和方法