微信小程序案例3-1 比较数字

一、运行效果

• 单击比较按钮，显示比较结果
  

二、知识储备

（一）Page()函数

（二）数据绑定

（三）事件绑定

（四）事件对象

（五）this关键字

（六）setData()方法

（七）条件渲染

（八）标签

（九）hidden属性

（十）查看项目源码

• app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信小程序",
    "navigationBarBackgroundColor": "#eee",
    "enablePullDownRefresh": true
  },
  "style": "v2",  
  "sitemapLocation": "sitemap.json"   
}  
1
2
3
4
5
6
7
8
9
10
11
12
13

• pages/index/index.wxml

<view class="student">
    <view class="item">学号：{{id}}view>
    <view class="item">姓名：{{name}}view>
    <view class="item">性别：{{gender}}view>
    <view class="item">年龄：{{age}}view>
    <view class="item">专业：{{major}}view>
    <view class="item">班级：{{class}}view>
    <view class="item">电话：{{telephone}}view>
view>

<button bind:tap="login">登录button>

<view id="outer" class="outer" bind:tap="viewtap">
    outer
    <view id="inner" class="inner">
        inner
    view>
view>

<button bind:tap="rename" style="margin-top: 20px;">改名button>

<view class="student">
    <view class="item" wx:if="{{gender == '男'}}">帅哥，你好view>
    <view class="item" wx:elif="{{age < 18}}">小妹，你好view>
    <view class="item" wx:else>美女，你好view>    
view>

<block wx:if="{{gender == '女'}}">
    <view class="item">青春无敌view>
    <view class="item">永远年轻view>
    <view class="item">开开心心view>
block>

<button hidden="{{gender == '男'}}">天长地久button>
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
30
31
32
33
34
35

• pages/index/index.wxss

/**index.wxss**/
.student {
    padding: 30rpx;
}
.item {
    font-size: large;
    color:blueviolet;
    line-height: 70rpx;
}
/* 外部视图容器样式 */
.outer {
    width: 80vw;
    height: 20vh;
    background: #ffa;
    margin-left: 10vw;
    margin-top: 3vh;
    text-align: center;
    border: 1rpx solid blueviolet ;
}
/* 内部视图容器样式 */
.inner {
    width: 80%;
    height: 70%;
    background: #aaaaff;
    margin-left: 10%;
    margin-bottom: 10%;
    border: 1rpx solid #f00
}
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

• pages/index/index.js

// index.js
Page({
    // 页面初始数据
    data: {
        id: 20220101,
        name: '陈燕文',
        gender: '女',
        age: 19,
        major: '计算机应用',
        class: '2022计应1班',
        telephone: '15867678904'
    },

    // 改名函数
    rename: function() {
        this.setData({
            name: "何赛飞"
        })
    },

    // 求和函数
    sum: function() {
        // 获取学生年龄数据
        let age = this.data.age
        // 根据年龄进行累加求和
        let sum = 0
        for (let i = 1; i <= age; i++) {
            sum = sum + i
        }
        return sum
    },

    // 加载生命周期回调函数
    onLoad: function() {
        console.log('onLoad()函数执行了……')   
        console.log('sum = ' + this.sum())     
    },
    // 显示生命周期回调函数
    onShow: function() {
        console.log('onShow()函数执行了……')        
    },
    // 就绪生命周期回调函数
    onReady: function() {
        console.log('onReady()函数执行了……')        
    },
    // 隐藏生命周期回调函数
    onHide: function() {
        console.log('onHide()函数执行了……')
    },
    // 卸载生命周期回调函数
    onUnload: function() {
        console.log('onUnload()函数执行了……')
    },
    // 页面下拉刷新回调函数
    onPullDownRefresh: function() {
        console.log('onPullDownRefresh()函数执行了……')
    },
    // 定义登录事件处理函数
    login(e) {
        // 弹出吐司
        wx.showToast({
          title: '欢迎登录~',
          icon: 'success',
          duration: 3000
        }),
        // 在控制台输出事件对象
        console.log(e)
    },
    // 定义外部视图容器点击事件处理函数
    viewtap(e) {
        // 输出target和currentTarget的id属性
        console.log(e.target.id + '-' + e.currentTarget.id)
    }
})
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

三、实现步骤

（一）准备工作

• 创建微信小程序 - 比较数字，不采用模板
  
• 单击【确定】按钮
  
• 清空页面结构
  
• 初始化页面样式
  
• 配置窗口表现
  

（二）实现页面结构

• 在pages/index/index.wxml文件里实现页面结构
  

<view class="input">
    <text>请输入第1个数字：text>
    <input type="number" />
view>
<view class = "input">
    <text>请输入第2个数字：text>
    <input type="number" />
view>
<button class='btn'>比较button>
<view class="result">
    <text>比较结果：text>
view>
1
2
3
4
5
6
7
8
9
10
11
12
13

• 查看预览效果
  

（三）实现页面样式

• 为了页面好看，编写页面样式文件pages/index/index.wxss
  

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}
.input {
    height: 6vh;
    width: 100%;
    padding: 3vw;
    display: flex;    
}
.input > input {
    background-color: antiquewhite;
    width: 45vw;
    border: 1px solid #aaa
}
.btn {
    background-color: #1AAD19;
    color: white;
    font-size: 15px;
}
.result {
    margin-top: 2vh;
    padding: 3vw;
}
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

（四）获取并保存用户输入的数字

1、给文本框绑定输入事件

• pages/index/index.wxml文件，第一个文本框绑定了事件处理函数inputNum1，第二个文本框绑定了事件处理函数inputNum2
  

2、在页面脚本文件里编写事件处理函数

• pages/index/index.js文件，定义两个变量，编写两个输入事件处理函数
  

// index.js
Page({
    // 定义变量
    num1: 0,
    num2: 0,
    // 定义输入事件处理函数
    inputNum1: function(e) {
        // 获取用户输入的数字
        this.num1 = Number(e.detail.value)
    },
    inputNum2: function(e) {
        // 获取用户输入的数字
        this.num2 = Number(e.detail.value)
    }    
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

（五）判断数字大小并显示结果

1、给按钮绑定点击事件

• pages/index/index.wxml文件，给按钮绑定事件处理函数compare
  

2、定义比较结果字符串变量

• pages/index/index.js文件，在data属性里定义一个字符串变量result，初值为空字符串
  

3、编写比较事件处理函数

• pages/index/index.js文件，定义比较事件处理函数compare
  

4、在页面上显示比较结果

• pages/index/index.wxml文件，设置比较结果文本组件
  
• 查看预览效果
  

（六）运行程序，查看效果

• 录屏显示操作
  
• 三种比较结果