04. JavaScript 逻辑

小程序的 JavaScript 逻辑主要用于处理数据和事件。

一、页面生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Page({
    onLoad(options) {
        // 页面加载
    },

    onShow() {
        // 页面显示
    },

    onReady() {
        // 页面渲染完成
    },

    onHide() {
        // 页面隐藏
    },

    onUnload() {
        // 页面卸载
    },

    onPullDownRefresh() {
        // 下拉刷新
    },

    onReachBottom() {
        // 上拉加载
    }
});

二、数据处理

1
2
3
4
5
6
7
8
9
10
11
Page({
    data: {
        message: "Hello"
    },

    changeMessage() {
        this.setData({
            message: "New Message"
        });
    }
});

三、事件处理

1
<button bindtap="handleClick">点击</button>
1
2
3
4
5
Page({
    handleClick(e) {
        console.log("点击按钮", e);
    }
});

总结

熟练掌握小程序的 JavaScript 逻辑是开发好小程序的关键。