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

本文详细介绍了微信小程序中的Page()函数、数据绑定、事件处理、生命周期回调等基础知识,并通过实例展示了如何实现页面结构、获取用户输入、判断数字大小并显示结果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、运行效果

  • 单击比较按钮,显示比较结果
    在这里插入图片描述

二、知识储备

(一)Page()函数

在这里插入图片描述

(二)数据绑定

在这里插入图片描述

(三)事件绑定

在这里插入图片描述

(四)事件对象

在这里插入图片描述

(五)this关键字

在这里插入图片描述

(六)setData()方法

在这里插入图片描述

(七)条件渲染

在这里插入图片描述

(八)<block>标签

在这里插入图片描述

(九)hidden属性

在这里插入图片描述

(十)查看项目源码

  • app.json
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信小程序",
    "navigationBarBackgroundColor": "#eee",
    "enablePullDownRefresh": true
  },
  "style": "v2",  
  "sitemapLocation": "sitemap.json"   
}  
  • pages/index/index.wxml
<!--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>
<!-- 显示组件的hidden属性 -->
<button hidden="{{gender == '男'}}">天长地久</button>
  • 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
}
  • 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)
    }
})

三、实现步骤

(一)准备工作

  • 创建微信小程序 - 比较数字,不采用模板
    在这里插入图片描述
  • 单击【确定】按钮
    在这里插入图片描述
  • 清空页面结构
    在这里插入图片描述
  • 初始化页面样式
    在这里插入图片描述
  • 配置窗口表现
    在这里插入图片描述

(二)实现页面结构

  • pages/index/index.wxml文件里实现页面结构
    在这里插入图片描述
<!--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>
  • 查看预览效果
    在这里插入图片描述

(三)实现页面样式

  • 为了页面好看,编写页面样式文件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、给文本框绑定输入事件

  • 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、给按钮绑定点击事件

  • pages/index/index.wxml文件,给按钮绑定事件处理函数compare
    在这里插入图片描述

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

  • pages/index/index.js文件,在data属性里定义一个字符串变量result,初值为空字符串
    在这里插入图片描述

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

  • pages/index/index.js文件,定义比较事件处理函数compare
    在这里插入图片描述

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

  • pages/index/index.wxml文件,设置比较结果文本组件
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述

(六)运行程序,查看效果

  • 录屏显示操作
    在这里插入图片描述
  • 三种比较结果

在这里插入图片描述在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

酒城译痴无心剑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值