微信小程序计算器实现教程：WXML/WXSS/JS核心代码解析

前言

大家好，经过一段时间的空窗期，本期内容将简要介绍如何使用微信小程序开发一个基础计算器应用。

实现效果

实现步骤

首先创建新项目，并在app.json文件中配置导航栏的标题文本及主题颜色。

在index.wxml文件中构建计算器的外层DOM结构，包含两个主要view：第一个view用于显示数字输入和运算符，第二个view用于展示功能按钮。随后在index.wxss中定义样式，利用page级别的flex布局，将result和btns两个view的flex属性均设为1，使它们平分页面垂直空间。

<view class="result"></view>
<view class="btns"></view>

page{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.result{
    flex: 1;
    background-color: #e0e0e0;
}
.btns{
    flex: 1;
}

wxml

接下来编写页面具体内容。观察计算器布局可知，其结构为5行4列。因此，先创建5个view代表5行，每个行view内再包含4个view代表4列，每个最内层view对应一个按键，并为其绑定data-val属性以存储按键值。上半部分仅包含两个view，分别用于展示用户输入的数字num和操作符op。此处涉及知识点：view组件的hover-class属性表示该组件按下时的class样式。

<view class="result">
    <view class="result-num">{{num}}</view>
    <view class="result-op">{{op}}</view>
</view>
<view class="btns">
    <view>
        <view hover-class="bg" bindtap="resetBtn">C</view>
        <view hover-class="bg" bindtap="delBtn">DEL</view>
        <view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
        <view hover-class="bg" bindtap="opBtn" data-val="/">/</view>
    </view>
    <view>
        <view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
        <view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
        <view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
        <view hover-class="bg" bindtap="opBtn" data-val="*">x</view>
    </view>
    <view>
        <view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
        <view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
        <view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
        <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
    </view>
    <view>
        <view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
        <view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
        <view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
        <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
    </view>
    <view>
        <view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
        <view hover-class="bg" bindtap="dotBtn">.</view>
        <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
    </view>
</view>

wxss

接着编写样式代码。利用flex布局使按钮根据容器大小自动平分宽高，并设置flex-basis为“50%”，以确保数字“0”按钮占据两个标准按钮的宽度。

page{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.result{
    flex: 1;
    background-color: #e0e0e0;
    position: relative;
}
.result-num{
    position: absolute;
    font-size: 27pt;
    bottom: 5vh;
    right: 3vw;
}
.result-op{
    font-size: 15pt;
    position: absolute;
    bottom: 1vh;
    right: 3vw;
}
.btns{
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 17pt;
    border-top: 1rpx solid #ccc;
    border-left: 1rpx solid #ccc;
}
.btns > view{
    flex: 1;
    display: flex;
}
.btns > view > view{
    flex-basis: 25%;
    border-right: 1rpx solid #ccc;
    border-bottom: 1rpx solid #ccc;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btns > view:last-child > view:first-child{
    flex-basis: 50%;
}
.btns > view:first-child > view:first-child{
    color: red;
}
.btns > view >view:last-child{
    color: #fc8e00;
}
.bg{
    background: #ccc;
}

页面渲染效果如下所示：

js

数字按钮事件处理函数

实现数字按钮的点击事件以完成数字输入。首先初始化num和op变量。
设置result变量用于保存上一次运算的结果，同时设置isClear标志位。当isClear为false时，新输入的数字将追加到当前显示数字的末尾；当isClear为true时，新输入的数字将替换当前显示的数字。
判断当前输入的数字是否为0。若为0，则将num的值设为0；否则，将num的值更新为当前输入的数字。

Page({
    data: {
        num: '',
        op: '',
    },
    // 数字按钮处理事件
    // 保存上次运算结果
    result: null,
    isClear: false,
    numBtn:function(e){
        var num = e.target.dataset.val;
        if(this.data.num === '0' || this.isClear){
            this.setData({num:num});
            this.isClear = false;
        }else{
            this.setData({num:this.data.num+num});
        }
    }
})

计算按钮处理事件

获取当前输入的数字和运算符；
判断是否存在重复计算的情况；
判断具体的运算符类型。当符号为+时，返回结果为当前数字加上已添加的数字；当符号为-时，返回结果为当前数字减去已添加的数字……

// 计算按钮事件
    opBtn:function(e){
        var op = this.data.op;
        var num = Number(this.data.num);
        this.setData({op:e.target.dataset.val});
        //判断是否重复计算
        if(this.isClear){
            return
        }
        this.isClear = true;
        if(this.result === null){
            this.result = num;
            return
        }
        if(op === '+'){
            this.result = this.result + num;
        }else if(op === '-'){
            this.result = this.result - num;
        }else if(op === '*'){
            this.result = this.result * num;
        }else if(op === '/')
        {
            this.result = this.result / num;
        }else if(op === '%'){
            this.result = this.result % num;
        }
        this.setData({num:this.result + ''})
    },

清空数字、删除数字、添加“.”事件处理函数

  // 清空数字、删除数字、添加“.”事件处理函数
    dotBtn:function(){
        if(this.isClear){
            this.setData({num:'0.'});
            this.isClear =  false;
            return
        }
        if(this.data.num.indexOf('.' >=0)){
            return
        }
    },
    delBtn:function(){
        var num = this.data.num.substr(0,this.data.num.length - 1);
        this.result = num;
        this.setData({num:num === ''?'0':num})
    },
    resBtn:function(){
        this.result = null;
        this.isClear = false;
        this.setData({num:'0',op:''})
    }
})

总结

关于微信小程序计算器实现案例的介绍到此结束。如需了解更多相关微信小程序计算器案例内容，请搜索本站历史文章或继续浏览后续相关文章，希望大家以后多多支持本站！

微信小程序简易计算器开发实战

前言

实现效果

实现步骤

wxml

wxss

js

数字按钮事件处理函数

计算按钮处理事件

清空数字、删除数字、添加“.”事件处理函数

总结

实用工具推荐