微信小程序15: 小程序组件

创建组件

①在项目的根目录中,鼠标右键,创建components -> test文件夹

②在新建的components -> test文件夹上,鼠标右键,点击"新建Component'

③键入组件的名称之后回车,会自动生成组件对应的4个文件,后缀名分别为js,json,wxml和wxSS

组件和页面的区别

组件的js和json与页面不同

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

自定义组件样式

默认情况下,组件样式只会对当前组件生效,不会影响到组件之外的UI结构如图所示:

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

在使用组件的时候最好使用class选择器

修改组件的样式隔离

默认情况下,自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时,我们希望在外界能够控制组件内部的样式,此时,可以通过 stylelsolation修改组件的样式隔离选项,用法如下:

js配置

javascript 复制代码
Compontent({
  options:{
    stylelsolation:"isolated"
  }
})

json配置

javascript 复制代码
{
  "stylelsolation":"isolated"
}

引用方式

局部和全局、两种引用方式

局部引用:组件只能在当前页面进行引用

在页面的json文件红进行引用

javascript 复制代码
{  
  "usingComponents": {
    "mytese":"/components/test/test"
  }
}

组件的使用

html 复制代码
<mytese></mytese>

全部引用:组件可以在每个小程序中使用

在app.json文件中,引入组件

javascript 复制代码
"usingComponents": {
  "mytest1":"/components/test1/test1"
}

然后在任何页面都可以使用该组件

html 复制代码
<mytest1></mytest1>

经常使用的组件我们需要进行全局引用,局部引用在特定页面中

data数据

在小程序组件中,用于组件模版渲染和私有数据,需要定义到data节点中

javascript 复制代码
/**
   * 组件的初始数据
   */
data: {
  count:1
},

methods方法

在小程序中,事件处理函数和自定义方法需要定义到methods节点中,示例如下:

html 复制代码
<view>{{count}}</view>
<button bind:tap="addCount">+1</button>

js文件

javascript 复制代码
methods: {
  addCount(){
    this.setData({
      count:this.data.count+1
    })
    this._showCount()
  },
  _showCount(){
    wx.showToast({
      title: 'count值为:'+this.data.count,
      icon:'none'
    })
  }
}
})

properties属性

在小程序组件中,properties是组件的对外属性,用来接收外界传递到组件中的数据,示例代码:

javascript 复制代码
/**
   * 组件的属性列表
   */
properties: {
  max:{
    type:Number,
      value:10
  },
},

当然也可以不定义value直接定义number
max:Number

使用

javascript 复制代码
methods: {
  addCount(){
    if(this.data.count>=9) return
    this.setData({
      count:this.data.count+1
    })
    this._showCount()
  },

使用setData修改properties的值

由于data数据和 properties属性在本质上没有任何区别,因此 properties 属性的值也可以用于页面渲染, 或使用 setData为 properties中的属性重新赋值,示例代码如下:

javascript 复制代码
this.setData({
  max:this.properties.max+1
})

数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。他的作用类似于vue中的watch侦听器。在小程序组件中,数据监听器的基本语法格式如下:

observers:{
    '字段A, 字段B': function(){
      
    }
  }

数据监听器基本用法

在wxml中定义基本的dom结构,该案例是一个简单的加法案例

html 复制代码
<view>{{number1}}+{{number2}} = {{sum}}</view>

<button size="mini" bind:tap="addn1">n1自增</button>

<button size="mini" bind:tap="addn2">n2自增</button>

然后定义js

javascript 复制代码
//在Data中定义三个参数
data: {
  number1:0,
    number2:0,
    sum:0
},
//在method方法中定义addn1方法和addn2方法
methods: {
    addn1(){this.setData({number1:this.data.number1+1})},
    addn2(){this.setData({number2:this.data.number2+1})},

监听器监听对象属性的变化

数据监听器支持监听对象中单个或者多个属性的变化:

wxml渲染

html 复制代码
HTML<view style="background-color: rgb({{fullColor}})" class="colorBox">颜色值为:{{fullColor}}</view>
<button size="mini" bind:tap="changeR" type="default">R</button>
<button size="mini" bind:tap="changeG" type="primary">G</button>
<button size="mini" bind:tap="changeB" type="warn">B</button>

wxss样式

javascript 复制代码
.colorBox{
  height: 100rpx;
  color: white;
  text-align: center;
  line-height: 100rpx;
}

js

javascript 复制代码
data: {
  rgb:{
    r:0,
      g:0,
      b:0
  },
  fullColor:'0,0,0'
},
methods: {
  changeR(){ // 修改rgb对象上的r属性的值
    this.setData({
      'rgb.r':this.data.rgb.r +5 >255?255:this.data.rgb.r+5
    })
  },
  changeG(){ // 修改rgb对象上g属性的值
    this.setData({
      'rgb.g':this.data.rgb.g+5>255?255:this.data.rgb.g+5
    })
  },
  changeB(){ //修改rgb对象上b属性的值
    this.setData({
      'rgb.b': this.data.rgb.b+5>255?255:this.data.rgb.b +5
    })
  }
},
// 监听数据节点
observers:{
  'rgb.r,rgb.g,rgb.b':function(r,g,b){
    // 监听数据变化改变值
    this.setData({
      // 为data中的fullColor重新赋值
      fullColor:`${r},${g},${b}`
    })
  }

}

监听对象中给所属性的变化

如果某个对象中需要被监听的属性太多,为了方便,可以使用通配符**来监听监听对象中所有属性的变化:

javascript 复制代码
observers:{
  "rgb.**":function(obj){
    this.setData({
      fullColor:`${obj.r},${obj.g},${obj.b}`
    })
  }
}
}

这个在功能上和之前的代码分别监听不同颜色其实是一一对应的,只不过使用"**"通配符进行对象的监听比较简单,在实际开发中,各位开发人员可以更具程序具体情况使用。

纯数据字段

:::info

纯数据字段值的是那些不用于洁面渲染的data字段

:::

应用场景:例如在有些情况下,某些data中的字段既不会展示在界面上,也不会传递给其他组件 ,仅仅在当前组件内部使用。带有这种特性的data字段是河北设置为纯数据字段。

优势:纯数据字段有助于提升页面更新的性能。

使用规则

在Component的构造器的options节点中,指定pureDataPattern,为一个正则表达式,字段名符合这个正则表达的字段将成为纯数据字段:

javascript 复制代码
Component({
  options:{
    // 在data中所有以下划线开头的都为纯数据字段
    pureDataPattern:/^_/
  },
  data:{
    a:'asasas'
      // _a为纯数据字段
      _a:'asasasas'
}
})

可以使用纯数据字段改造数据监听器案例

小程序组件的生命周期

在小程序组件中,最重要的生命周期函数有3个,分别是created、attached、detached。它们各自的特点如下:

  • 组件实例刚被创建好的时候,created 生命周期函数会被触发
    • 此时还不能调用setData
    • 通常在这个生命周期函数中,只应该用于给组件的this添加一些自定义的属性字段
  • 在组件完全初始化完毕、进入页面节点树后, attached 生命周期函数会被触发
    • 此时,this.data已被初始化完毕
    • 这个生命周期很有用,绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)
  • 在组件离开页面节点树后,detached 生命周期函数会被触发
    • 退出一个页面时,会触发页面内每个自定义组件的detached生命周期函数
    • 此时适合做一些清理性质的工作

小程序生命周期函数的定义

:::info

小程序生命周期函数定义有两种方式,一种是旧的方法在Component里面进行定义,另外一种新的方法,新建一个lifetimes 节点进行定义

:::

这里推荐使用新的lifetimes节点定义

javascript 复制代码
lifetimes:{
    created(){
      console.log('创建声明周期');
    },
    attached(){
      console.log('attached');
    }
  }

若新旧两种生命周期在js中同时出现,新的优先

组件所在页面的生命周期

有时,自定义组件行为以来页面的状态变化,此时就需要用到组件再页面的生命周期。

在自定义组件中,组件所能访问到页面的声明周期函数一共有3个,分别是:

如何监听所在页面的生命周期函数?

需要再组件中定义PageLifetimes节点,示例代码如下:

javascript 复制代码
pageLifetimes:{
    show:function(){
      //页面被展示
      console.log('test组件加载');
    },
    hide:function(){
      //页面被隐藏
      console.log('页面发生切换');
    },
    resize:function(size){
      //页面尺寸变化
    }
  }

注意:这里不是({}),而是直接{},有时候可能你会习惯打出({}).

在页面加载后生成随机RGB颜色值

javascript 复制代码
pageLifetimes:{
    show:function(){
      //页面被展示
      // 生成三个rgb值
      let r = Math.floor(Math.random()*255)+1;
      let g = Math.floor(Math.random()*255)+1;
      let b = Math.floor(Math.random()*255)+1;
      this.setData({
        fullColor:`${r},${g},${b}`
      })
      console.log(r);
      console.log('test组件加载');
    },
    hide:function(){
      //页面被隐藏
      console.log('页面发生切换');
    },
    resize:function(size){
      //页面尺寸变化
    }
  }

当然这样写比较丑,我们还可以把方法放到method里面,然后再show中去调用那个方法。

自定义组件插槽

在自定义组件中,可以提供一个节点(插槽),用于承担组件使用者提供的wxml结构。

单个插槽

小程序中,默认每个自定义组件中只允许使用一个进行占位,这种个数上的限制叫做单个插槽。

组件wxml代码

html 复制代码
<text>components/test1/test1.wxml</text>
<slot></slot>

使用组件代码

html 复制代码
<view>
  <mytest1>
    <view>这是插槽填充的内容 </view>
  </mytest1>
</view>

多插槽

小程序自定义组件中,需要使用多个插槽时,可以在组件js文件中定义下面代码:

javascript 复制代码
Component({
  options:{
    // 在组件定义时的选项目启动多slot支持
    multipleSlotes:true
  },
  properties:{},
  methods:{}
})

使用多插槽,可以使用多个slot标签占位使用不同的name进行区分

再组件中定义多个插槽

html 复制代码
<!--components/test1/test1.wxml-->
<slot name="slot1"></slot>
<slot name="slot2"></slot>

使用者定义slot属性加上插槽名字就可以直接使用

html 复制代码
<view>
  <mytest1>
    <view slot="slot1">我是插槽1的内容 </view>
    <view slot="slot2">我是插槽2的内容 </view>
  </mytest1>
</view>
相关推荐
V+zmm101343 小时前
基于微信小程序的乡村政务服务系统springboot+论文源码调试讲解
java·微信小程序·小程序·毕业设计·ssm
还这么多错误?!3 小时前
uniapp微信小程序,使用fastadmin完成一个一键获取微信手机号的功能
微信小程序·小程序·uni-app
_院长大人_3 小时前
微信小程序用户信息解密 AES/CBC/NoPadding 解密失败问题
微信小程序·小程序
web135085886354 小时前
uniapp小程序使用webview 嵌套 vue 项目
vue.js·小程序·uni-app
guanpinkeji4 小时前
废品回收小程序:助力企业转型发展
小程序·小程序开发·小程序制作·回收·废品回收小程序·废品回收
407指导员4 小时前
uniapp 微信小程序 页面部分截图实现
微信小程序·小程序·uni-app
三木吧7 小时前
开发微信小程序的过程与心得
人工智能·微信小程序·小程序
Kika写代码7 小时前
【微信小程序】3|首页搜索框 | 我的咖啡店-综合实训
微信小程序·小程序
金金金__7 小时前
微信小程序:解决顶部被遮挡的问题
微信小程序·小程序
zhulangfly18 小时前
Wux weapp 组件库的 bug—— wux-picker选择器组件无法正确初始化到选定的value
小程序·wux weapp