微信小程序案例3-1 比较数字-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序案例3-1 比较数字。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、运行效果

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

二、知识储备

（一）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)
    }    
})