微信小程序61~70

发布于:2025-07-07 ⋅ 阅读:(13) ⋅ 点赞:(0)
1.组件wxml的slot-插槽
  • 在使用基础组件时,可以在组件中间写子节点,从而将子节点内容展示到页面中,自定义组件也可以接收子节点
  • 但是要在组件模板中定义节点,承载组件中间的子节点
  • 需要使用多个插槽时,要在组件.js中声明启用,同时给slot添加name属性来区分不同的slot(具名插槽)
  • 然后给子节点内容添加slot属性,属性值是对应的slot的name名称,来将内容插入对应的slot中。

label和slot中的内容可以二选一

.js中的代码

Component({
    option: {
        multipleSlot: true
    },
}

页面page

<custom01>
    <text slot="slot-top">我要显示到顶部</text>
    我是子节点内容
    <text slot="slot-bottom">我要显示到底部</text>
</custom01>

components组件

<view>
    <slot name="slot-top" />
    <!-- slot就是用来接收、承接子节点的内容 -->
    <!-- slot只是一个占位符,子节点内容会将slot进行替换 -->
    <view><slot /></view>
    <slot name="slot-bottom" />
</view>
2.组件样式及注意事项

自定义组件拥有自己的 wxss 样式,组件 wxss 文件的样式,默认只对当前组件生效

编写组件样式时,需要注意以下几点:

  1. app.wxss 或页面的 wxss 中使用了标签名(view)选择器(或一些其他特殊选择器)来直接指定样式
    这些选择器会影响到页面和全部组件,通常情况下这是不推荐的做法
  2. 在自定义的wxss文件中,不允许使用标签、ID、属性选择器,只能用class选择器
  3. 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用
  4. 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
  5. 继承样式,如 font 、 color ,会从组件外继承到组件内。
  6. 除继承样式外, 全局中的样式、组件所在页面的的样式对自定义组件无效 (除非更改组件样式隔离选项)
3.组件样式隔离

自定义组件的样式只受自身 wxss 的影响,但是有时候我们需要组件使用者的样式能够影响到组件,这时候就需要指定特殊的样式隔离选项 styleIsolation。

有以下取值:

  1. isolated:表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值)
  2. apply-shared:表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面
  3. shared:表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。
options: {
        // isolated开启样式隔离,是默认值
        //apply-shared组件使用者样式能够影响到自定义组件本身,反之不行
        // shared表示组件使用者、页面的wxss样式能够影响到自定义组件,反之也可以
        styleIsolation: "shared"
    },

4.小程序修改checkbox样式

在这里插入图片描述

5.数据监听器-observers

数据监听器主要用于监听和响应任何属性(properties)和数据(data)的变化,数据变化时 就会发生回调函数,方便开发者进行业务逻辑处理。
数据监听需要使用-observers字段

Component({

    /**
     * 组件的属性列表
     */
    properties: {
        label: {
            type: String,
            value: "测试"
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        num:10,
        count: 100,
        obj: { name: 'tom', age: 10 },
        arr: [1, 2, 3]
    },
    // 用来监听数据以及属性是否发生了变化
    observers: {
        // key:需要监听的数据
        // value:回调函数,形参:最新的数据
        num: function(newNum) {
            // 对data中数据进行监听,如果数据没有发生,监听器不会执行
            console.log(newNum)
        },
        // 同时监听多个数据
        'num, count': function(newNum, newCount) {
            console.log(newNum, newCount);
        },
        // 支持监听属性以及内部数据的变化
        "obj.name": function(newName) {
            console.log(newName);
        },
        "arr[1]": function(newArr) {
            console.log(newArr);
        },
        // 监听对象中所有属性变化
        // 用通配符
        "obj.**": function(newObj) {
            console.log(newObj);
        },
        // 与data中不同,只要组件使用者传递了数据,监听器中就能获取数据
        "label": function(newLabel) {
            console.log(newLabel);
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 更新数据
        updateData () {
            this.setData({
                num: this.data.num + 1,
                count: this.data.count - 1,
                'obj.name': 'jerry',
                'arr[1]': 666,
                'label': "最新的标题"
            })
        }
    }
})
6.组件通信-父组件传值
  1. 在父组件WXML中使用数据绑定的方式向子组件传递动态数据
  2. 子组件内部使用properties接收父组件传递的数据即可
observers: {
            // 如过需要properties中的数据赋值给data
            // 可以使用 observers进行处理
            checked: function(newChecked) {
                this.setData({
                    isChecked: newChecked
                })
            }
        }
7.组件通信-子往父传值
  1. 自定义组件内部使用triggerEvent方法发射一个自定义的事件,同时可以携带数据
  2. 自定义组件标签通过bind方法监听发射的事件,同时绑定事件处理函数,在事件处理函数中通过事件对象获取传递的数据
 methods: {
        // 将数据传递给子组件
        sentData () {
            // 如果需要将数据传递给父组件
            // 需要用triggerEvent发射自定义事件
            this.triggerEvent('myevent', this.data.num)

        }
    }

<!-- 需要在自定义组件标签上通过bind方法绑定自定义事件,同时绑定事件处理函数 -->
<view>{{ num }}</view>
<custom05 bind:myevent="getData" />

data: {
        num : ''
    },
    getData (event) {
        console.log(event);
        // 可以通过事件对象.detail获取子组件传递给父组件的数据
        this.setData({
            num: event.detail
        })
    },


<button plain type="primary" bindtap="sentData">传递数据</button>

8.获取组件实例

父组件通过this.selectComponent方法,获取子组件实例对象,这样就可以访问子组件的任意数据和方法
this.selectComponent方法在调用时需要传入一个匹配选择器selector

getChild () {
       const res = this.selectComponent('.child')
       console.log(res);
    }
9.组件生命周期
  • 组件生命周期:指组件自身的一些钩子函数,函数在特定的时间节点被触发
  • 函数要在lifetimes字段内进行声明
  • 有5个:created, attached, ready, moved, detached

在这里插入图片描述

Component({
    lifetimes: {
        // 组件实例被创建好以后执行
        // 在组件实例刚刚被创建时执行,注意此时不能调用 setData
        created () {}, 
        // 组件被初始化完毕,模板解析完成,已经把组件挂载到页面上
        attached () {
            // 一般页面中的交互会在attached钩子函数中进行
            this.setData({
                
            })
        }, 
        // 组件被销毁
        detached () {},
        ready () {}, 
        moved () {}
    }
})
10.组件所在页面的生命周期
  • 组件中还有一些特殊的生命周期,其与组件没有很强的关联
  • 主要用于组件内部监听父组件的展示、隐藏状态、从而方便组件内部执行一些业务逻辑的处理
  • 共四个:show, hide, resize, routeDone, 要在pageLifetimes中声明

在这里插入图片描述

pageLifetimes: {
        // 监听组件所在页面展示(后台切前台)状态
        show () {

        },
        // 监听组件所在页面隐藏(前台切后台,点击tabbar)状态
        hide () {
            
        }
    }

网站公告

今日签到

点亮在社区的每一天
去签到