微信小程序之计算器

最新推荐文章于 2025-07-16 15:34:19 发布

原创

最新推荐文章于 2025-07-16 15:34:19 发布 · 4.3k 阅读

55 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

在日常生活中，计算器是人们广泛使用的工具，可以帮助我们快速且方便地计算金额、成本、利润等。下面将会讲解如何开发一个“计算器”微信小程序。

一、开发思路

1、界面和功能

“计算器”微信小程序的页面效果如图所示

在计算器中可以进行整数和小数的加(+)、减(－)、乘(×)、除(÷)运算。“C”按钮为清除按钮，表示将输入的数字全部清空；“DEL”按钮为删除按钮，表示删除前面输入的一个数字；“+/-”按钮为正负号切换按钮，用于实现正负数切换；“.”按钮为小数点按钮，表示在计算过程中可以输入小数进行计算；“=”按钮为等号按钮，表示对输入的数字进行计算。

2、计算器设计数学原理

此计算器本本质是对数学表达式的求解，例如 Z=X+Y，其中，X,Y为两个自变量，Z为因变量,主要设计思路为千先输入X,Y,和"+"号，再输入“=”号计算结果并显示。由此可知，基本操作为：

（1）输入第一个数字（存储为变量num1并显示）。

（2）输入运算符（存储为num2并显示）。

（3）输入运算符（形成表达式并显示）。

（4）按下”=“(计算结果并显示)。

3. 设计主要思路

根据以上分析可知，处理逻辑主要编写以下三个函数

numBtn()：处理函数三个数字按钮的事件处理函数

opBtn：运算符按钮的事件处理函数

execBtn()：编写“=”按钮的事件处理函数

设计三个标识用以标识用户的三种状态，其中，数字改变标识为真：

numChangeFlag : 数字改变标识，第一数字和第二数字切换标识，初始值为false

execflag: 执行状态标识，初始值为false

resultflag: 结果状态标识，初始值为false

具体的处理逻辑详见四处理逻辑

二、界面设计

据以上的开发思路，界面分为显示区和按钮区，其中显示区又分为数字显示区、公式显示区两部分，上下排列；按钮可分为数字按钮，运算符按钮，功能按钮三部分，按钮显示区按四行四列显示，其中“0”独占两个单元格。代码如下所示：

<!--index.wxml-->
<navigation-bar title="计算器" back="{
  
  {false}}" color="black" background="#FFF"></navigation-bar>
<!--结果区域-->
<view class="result">
<view class="result-num">{
  
  {num}}</view>
<view class="result-sub">{
  
  {sub}}</view>
</view>
<!--按钮区域-->
<view class="btns">
<view>
<view hover-class="bg"  hover-stay-time="50"  bindtap="resetBtn">C</view>
<view hover-class="bg"  hover-stay-time="50"  bindtap="delBtn">DEL</view>
<view hover-class="bg"  hover-stay-time="50"  bindtap="negBtn">+/-</view>
<view hover-class="bg"  hover-stay-time="50"  bindtap="opBtn" data-val='×'>×</view>
</view>
<view>
    <view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
    <view hover-class="b