小程序生命周期函数、组件

2023-01-09 14:16:03

一、生命周期函数

二、组件

小程序中比如出现多个页面的tab选项卡效果、轮博图效果或者星星评分等，我们一般不是每个页面都实现这个功能，一般是把重复的功能或者模块封装成组件，哪个页面使用就导入即可。

1.创建组件

在项目的根目录下面新建components文件夹（和pages目录平级），里面再新建每个组件。

2.全局引用组件

在app.json中定义如下：

{
  "pages":[
    。。。。
  ],
  "usingComponents": {
    "my-test":"/components/test1/test1"
  },
  。。。
}

然后在每个页面中都可以通过如下方式使用

<my-test></my-test>

3.局部引用组件

在单独一个页面的json文件中如下设置

{
  "usingComponents": {
    "my-test":"/components/test1/test1"
  }
}

在页面中使用如下：

<my-test></my-test>

4.组件和页面的区别

虽然组件和页面都是由4个文件组件，但是组件的json文件中有如下属性：

{
  "component": true
}

组件初始化的是Component函数，页面初始化的是Page函数

Page({})

Component({})

组件的事件处理函数需要放在methods中，页面的事件处理函数直接放在Page()中

Component({
  data: {

  },
  methods: {
    事件函数名:function(){}
  }
})


Page({
    事件函数名:function(){}
})

5.样式处理

app.wxss中的样式设置只影响页面，不影响组件

比如app.wxss中定义样式如下：

.red{
  color:red;
}

页面search.wxml中如果这样写字体颜色是红色的，组件不受影响

<view class="red">测试文字</view>

注意

注意上面的设置只针对类选择器有用，如果你在app.wxss中使用标签选择器设置的样式，组件和页面都会起作用，为了避免样式冲突，建议有组件的页面在app.wxss中使用类选择器定义样式

6.组件属性和方法设置

(1)data

组件中的data和页面一样，也是自己定义变量，页面视图通过{{}}渲染。

组件.js文件中定义如下

Component({
  data: {
    num:10
  }
})

组件.wxml中使用如下：

{{num}}

(2)事件

组件.wxml中定义结构如下：

<button bindtap="addNum">点击+1</button>
<view>{{num}}</view>

组件.js中定义如下：

// components/test1/test1.js
Component({

  data: {
    num:10
  },
  methods: {
    addNum:function(){
      this.setData({
        num:this.data.num+1
      })
    }
  }
})

所以我们发现和页面中使用是一样的

(3)properties

properties是接受页面传递给组件的内容，格式如下：

页面传递如下：

<my-test info="tom"></my-test>

组件test.js中设置如下：

Component({
  properties: {
    info:{
      type:String,
      value:'默认值'
    }
  }
})

此时如果传递成功，就会显示tom，如果传递不成功就显示默认值是字符串"默认值"

（4）组件中使用监听器

子组件的wxml中添加内容：

<view>{{num1}}+{{num2}}={{sum}}</view>
<button bindtap="addNum1">点击num1+1</button>
<button bindtap="addNum2">点击num2+1</button>

子组件的js中添加事件和监听器

Component({
  data: {
    num1:0,
    num2:0,
    sum:0
  },
  methods: {
    addNum1:function(){
      this.setData({
        num1:this.data.num1+1
      })
    },
    addNum2:function(){
      this.setData({
        num2:this.data.num2+1
      })
    }
  },
  observers:{
    "num1,num2":function(newNum1,newNum2){
      this.setData({
        sum:newNum1+newNum2
      })
    }
  }
})

此时点击两个按钮的时候，数字1和数字的值会发生变化，总和也会发生变化，如果不添加监听器，和不会随着变化。

7.父子组件传值

(1)父传子

项目根目录新建components文件夹，里面新建子组件son
新建页面test，配置test.json如下：

{
  "usingComponents": {
    "my-son":"/components/son/son"
  }
}

test.wxml使用组件并通过属性传值

<my-son num="{{10}}"></my-son>

子组件son.js的properties中配置如下：

Component({
  properties: {
    num:Number
  }
  。。。
}

子组件通过{{}}模板语法渲染接收的num变量

<text>{{num}}</text>

(2)子传父

子组件test.wxml中绑定传递事件

<button bindtap="click">子组件给父组件传值</button>

子组件的事件click方法中传递数据注意triggerEvent中的第一个参数是传递的事件名，第二个参数是传递的值，可以是变量。

// components/son/son.js
Component({
  data: {

  },
  methods: {
    click:function(){
      this.triggerEvent('handle',{value:111})
    }
  }
})

页面中接收数据页面test.wxml中处理如下：

<my-son bind:handle="getContent"></my-son>

页面test.js中定义如下：

Page({
  data: {
    。。。
  },
  getContent:function(event){
    console.log(event.detail.value)
  },
  。。。
  
}

(3)获取组件实例对象

页面test.wxml中如下定义

<my-son class="son-box"></my-son>
<button bindtap="getChild">获取子组件实例</button>

页面test.js中处理getChild方法

Page({
  data: {
    。。。
  },
  getChild:function(){
   let son= this.selectComponent(".son-box");
   son.setData({
     number:son.data.number+1
   })
  },
  。。。
})

子组件son.js中定义

Component({
  properties: {
    。。。
  },

  data: {
    number:0
  },
  。。。
})

子组件son.wxml中渲染如下：

<text>{{number}}</text>

此时点击页面中的按钮，子组件中的数据会发生变化。

8.behaviors

behaviors主要是实现多个组件之间的数据共享。

(1)使用步骤

项目根目录创建behaviors文件夹，新建一个文件，比如命名share.js

module.exports=Behavior({
  properties:{},
  data:{
    num:0
  },
  methods:{
    addNum:function(){
      this.setData({
        num:this.data.num+1
      })
    }
  }
})

某个子组件中引入behaviors文件并使用里面的数据和方法

子组件展示内容和使用方法

页面中加载上面的子组件因为我们的组件时无法直接查看的，只有在每个页面中才能看到，所以我们随便打开一个页面，用组件展示即可。

此时我们在页面中随意点击按钮等，就可以让标签中的内容发生变化，本质上是页面加载组件，组件并没有自己定义数据，是借用了behaviors文件中的共享数据和方法

码农公寓

一、生命周期函数

二、组件

相关文章