一、运行效果
- 单击比较按钮,显示比较结果

二、知识储备
(一)Page()函数

(二)数据绑定

(三)事件绑定

(四)事件对象

(五)this关键字

(六)setData()方法

(七)条件渲染

(八)<block>标签

(九)hidden属性

(十)查看项目源码
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信小程序",
"navigationBarBackgroundColor": "#eee",
"enablePullDownRefresh": true
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
<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>
.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
}
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) {
console.log(e.target.id + '-' + e.currentTarget.id)
}
})
三、实现步骤
(一)准备工作
- 创建微信小程序 -
比较数字
,不采用模板

- 单击【确定】按钮

- 清空页面结构

- 初始化页面样式

- 配置窗口表现

(二)实现页面结构
- 在
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>
- 查看预览效果

(三)实现页面样式
- 为了页面好看,编写页面样式文件
pages/index/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
文件,定义两个变量,编写两个输入事件处理函数

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
文件,设置比较结果文本组件

- 查看预览效果

(六)运行程序,查看效果
- 录屏显示操作

- 三种比较结果

