微信小程序 day3

1. 下拉刷新

下拉刷新指手指向下滑动，重新获取页面数据的行为

 1.1 开启下拉刷新

下拉刷新分为全局下拉刷新（不推荐）与局部下拉刷新

1.1.1 全局下拉刷新

在 app.json 的 window 节点中，将 enablePullRefresh 设置为 true

1.1.2 局部下拉刷新

在页面的 window 节点中，将 enablePullRefresh 设置为 true

1.2 配置下拉刷新窗口样式

在全局或者局部的 json 文件中 ，通过 backgroundColor 和 backgroundTextStyle 来配置背景颜色以及 loading 样式。

backgroundColor：背景颜色，仅支持16进制颜色

backgroundTextStyle：下拉刷新 loading 样式，仅支持 dark 和 light

1.3 监听页面的下拉刷新事件

在页面的 JS 文件中，通过 onPullDownRefresh()  函数监听当前页面下拉刷新事件

代码演示

每次下拉刷新都将count值赋值为1
page({
    data:{
        count:0
    }
})

onPullDownRefresh: function() {
    this.setData({
        count: 1
    })
}

注：下拉刷新loading效果并不会自己消失，需要通过 wx.stopPullRefresh() 停止效果

2. 页面生命周期

2.1 生命周期分类

分为应用生命周期与页面生命周期

2.1.1 应用生命周期

启动 -> 运行 -> 销毁

函数	用法
onLaunch	当小程序初始化完成时，会触发 onLaunch（全局只触发一次
onShow	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	当小程序从前台进入后台，会触发 onHide

2.1.2 页面生命周期

加载  -> 渲染 -> 销毁

函数	用法
onLoad	生命周期函数--监听页面加载,一个页面只调用一次
onReady	生命周期函数--监听页面初次渲染完成，一个页面只调用一次
onShow	生命周期函数--监听页面显示
onHide	生命周期函数--监听页面隐藏
onUnload	生命周期函数--监听页面卸载，一个页面只调用一次

3. WXS脚本

不常用，相当于过滤器

 4. 组件

4.1 组件的创建和引用

 4.1.1 创建组件

① 在项目根目录创建 components 文件夹

② 在 components 文件夹内 -> 创建文件 test  -> 右键选择 test 新建component，会自动生成四个文件

4.1.2 引用组件

全局引用：组件可以在每个小程序页面中使用

代码演示

在 app.json 全局配置文件中引用组件

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

局部引用：组件只能在当前被引用的页面内使用

代码演示

在页面的 json 配置文件中引用

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

4.2 组件的样式

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构。

组件A不会影响组件B；

组件A不会影响小程序页面的样式；

小程序页面的样式不会影响组件样式；

只有 class 选择器会有样式隔离，ID选择器、属性选择器、标签选择器不收样式影响（不推荐）；

通过 styleIsolation 可以选择样式之间是否影响

在组件的.js 文件中

Component({
    options: {
        styleIsolation: 'isolated'
        默认值isolated: 代表启动样式隔离
        apply-shared: 代表页面wxss样式将影响自定义组件
        shared: 代表双向的影响
    }
})


或在组件的.json 文件中,配置同上

{
    "styleIsolation": "isolated"
}

4.3 组件的数据、方法和属性

4.3.1 组件的数据

小程序组件中，数据需要定义到data节点中

代码演示

data:{
    num1: 0,
    num2: 1,
    num3: 2
}

4.3.2 组件的方法

事件处理函数和自定义方法需要定义到 methods 节点中

代码演示

methods:{
    addNum() {
    }    
    addNum1() {
    }    
    addNum2() {
    }
}

4.3.3 组件接收外来数据

使用 properties 接收父组件传递数据代码

代码演示

Components({
    // 属性定义
    properties: {
        // 完整定义 属性的方式【当需要指定属性默认值时，建议使用此方式】
        max: {
        // 属性值的数据类型
        type: Number,
        // 属性值的默认值
        value: 10
        },
        // 简化定义 属性的方式
        max: Number
    }
})
<my-test1 max="10"></my-test1>

调用： this.properties.max

注：不建议直接修改 properties 里的数据，如果修改建议使用子组件通信父组件方式

5.  数据监听器

observers，监听和响应属性或数据字段的变化，从而进行特定操作，类似于watch

代码演示

Components({
    // observers: 观察者
    observers: {
        '字段A， 字段B': function(字段A的新值， 字段B的新值) {
            对字段新值的操作
        }
    }
})

5.1 监听对象属性的变化

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

5.1.1  普通方式

Components({
    // observers: 观察者
    observers: {
        '对象.属性A， 对象.属性B': function(属性A的新值， 属性B的新值) {
        // 触发此侦听器的 3 种情况：
        // 【为属性A赋值】：使用setData 设置this.data.对象.属性A 时触发
        // 【为属性B赋值】：使用setData 设置this.data.对象.属性B 时触发
        // 【为对象赋值】：使用setData 设置this.data.对象 时触发
    }
})

5.1.2 通配符方式,, 监听对象中所有属性的变化

observers: {
    '_rgb.**': function (obj) {
        this.setData({
            fullColor:`${obj.r}, ${obj.g}, ${obj.b}`
        })
    }
}