微信小程序之计算器

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

一、开发思路

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="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="÷">÷</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="execBtn" data-val="=">=</view></view>
</view>

界面布置总体上采用“flex”流式布局column方式,上下排列,按钮区以每四个按钮为一组,共分四组,同样采用flex的流式布局,具体css代码如下所示:

​
/**index.wxss**/
page {display: flex;flex-direction: column;height: 100vh;color: #555;
}
.result {flex: 1;background: #f3fef6;position: relative;
}
.result-num {position: absolute;font-size: 15vw;bottom: 5vh;right: 3vw;
}
.result-sub{
font-size: 10vw;
position: absolute;
bottom: 1vh;
right: 3vw;
}.btns {
flex: 1;
}/* 按钮样式 */
.bg {
background: #eee;
}
.btns {
flex: 1;
display: flex;
flex-direction: column;
font-size: 64rpx;
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: #f00;
}.btns > view > view:last-child {
color: #fc8e00;
}​

三,知识储备

1、data-*自定义属性

data-*是微信小程序的自定义属性,由data-前缀加上自定义的属性名,自定义属性值表示要传递的数据 ,在事件处理函数中通过targert或currentTarget对象的datasett属性获取数据

2、模块

微信小程序提供了模块化开发的语法,,使用module.exports语法对外暴露接口,然后在需要使用模块的地方通过require()函数引入 模块。

四、处理逻辑

1、数学处理模块

模块代码如下:

​
// 精确计算
module.exports = {target: 'num1',  //表示当前正在输入哪个数字,取num1或num2num1: '0',num2: '0',op: '',// 重置reset() {this.num1 = '0'this.num2 = '0'this.target = 'num1'this.op = ''},changeNum2: function(){this.target='num2'},setNum: function(arg1){this[this.target]=arg1},getNum: function(){return this[this.target]},add: function(arg1, arg2) {var r1, r2, mtry {r1 = arg1.toString().split(".")[1].length} catch (e) {r1 = 0}try {r2 = arg2.toString().split(".")[1].length} catch (e) {r2 = 0}m = Math.pow(10, Math.max(r1, r2))return (arg1 * m + arg2 * m) / m},sub: function(arg1, arg2) {var r1, r2, m, ntry {r1 = arg1.toString().split(".")[1].length} catch (e) {r1 = 0}try {r2 = arg2.toString().split(".")[1].length} catch (e) {r2 = 0}m = Math.pow(10, Math.max(r1, r2))//动态控制精度长度n = (r1 >= r2) ? r1 : r2return ((arg1 * m - arg2 * m) / m).toFixed(n)},mul: function(arg1, arg2) {var m = 0,s1 = arg1.toString(),s2 = arg2.toString()try {m += s1.split(".")[1].length} catch (e) {}try {m += s2.split(".")[1].length} catch (e) {}return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)},div: function(arg1, arg2) {var t1 = 0,t2 = 0,r1, r2try {t1 = arg1.toString().split(".")[1].length} catch (e) {}try {t2 = arg2.toString().split(".")[1].length} catch (e) {}r1 = Number(arg1.toString().replace(".", ""))r2 = Number(arg2.toString().replace(".", ""))return (r1 / r2) * Math.pow(10, t2 - t1)},// 进行运算getResult() {let result = 0if (this.op === '+') {result = this.add(this.num1, this.num2)} else if (this.op === '-') {result = this.sub(this.num1, this.num2)} else if (this.op === '×') {result = this.mul(this.num1, this.num2)} else if (this.op === '÷') {result =this. div(this.num1, this.num2)}return result}
}​

模块全局变量:

                target: 'num1',  //表示当前正在输入哪个数字,取num1或num2
                num1: '0',   //第一个操作数
                num2: '0',  //第二个操作数
                     op: '',  //操作符

模块函数:

        changeNum2():  //设置当前操作数为第二操作数

          setNum():    //设置操作数的值

         getNum():   //获取操作数的值

         getResult():  //获取计算结果

其它的 add,sub,mul,div分别为加、减、乘、除函数。

 2、计算器处理逻辑

// index.js
const calc = require('../../utils/calc.js')
Page({/**  页面的初始数据  */data: {num: '0',op:''},//设置变量标识numChangeFlag : false,execflag: false,resultflag: false,//数字按钮的事件处理函数numBtn: function(e) {//点击数字按钮,获取对应的数字,将其值赋给num var  num=e.target.dataset.valif(this.resultflag){this.resetBtn()}if(this.numChangeFlag){this.numChangeFlag=falsethis.execflag=truethis.data.num='0'calc.changeNum2()}//设置输入的数字calc.setNum(this.data.num=='0'? num  : this.data.num +num)//页面中显示数字this.setData({ num: calc.getNum() })},//运算符按钮处理函数opBtn: function(e){calc.op=e.target.dataset.valthis.numChangeFlag=true//判断是否已输入第2个数字if(this.execflag){this.execflag=false//已经输入第2个数字,再判断是否有结果状态if(this.resultflag){this.resultflag=false} else {calc.num1=calc.getResult()}}this.setData({sub: calc.num1+' '+calc.op+' ',num: calc.num1}) },//"="按钮事件处理函数execBtn: function(){//解决没有输入第2个数字,不能按=号问题if(this.numChangeFlag){this.numChangeFlag=falsethis.execflag=truecalc.num2=this.data.num}//如果已经输入第2个数字,执行计算操作if(this.execflag){this.resultflag=truevar result=calc.getResult()this.setData({sub: calc.num1+' '+calc.op+' '+calc.num2+'=',num: result})calc.num1=result}} ,//重置按钮事件处理函数resetBtn:function(){calc.reset()this.execflag=falsethis.numChangeFlag=falsethis.resultflag=falsethis.setData({sub: '',num: '0'})},//小数点按钮事件dotBtn:function(){//如果是计算结果状态,则重置计算器if(this.resultflag){this.resetBtn()}//如果等待输入第2个数字且还没有输入第2个数字,设为‘0’if(this.numChangeFlag) {this.numChangeFlag=falsecalc.setNum('0.')} else if(this.data.num.indexOf('.')<0){//如果当前数字没有".",需要加上"."calc.setNum(this.data.num+'.')}this.setData({num: calc.getNum(),          })},//删除按钮事件处理函数delBtn:function(){//如果当前是计算结果状态,则重置计算器if(this.resultflag) {return this.resetBtn()}//非计算结果状态var num=this.data.num.substr(0,this.data.num.length-1)calc.setNum(num==='' || num==='-' || num==='-0.' ? '0' : num)   this.setData({num: calc.getNum()})},
//正负切换按钮事件处理函数
negBtn:function(){//如果是0,不加正负号if(this.data.num==='0' || this.data.num==='0.'){return }//如果当前是计算结果状态,则重置计算器if(this.resultflag){this.resetBtn()} else if(this.data.num.indexOf('-')<0){//当前没有负号,加负号calc.setNum('-'+this.data.num)} else {//当前有负号,去掉负号calc.setNum(this.data.num.substr(1))}this.setData({num: calc.getNum()})
},
})

 模块首先使用require()函数引入计算模块,其次是全局变量、事件处理函数,具体事件处理函数如下:

numBtn:数字键处理函数,具体逻辑如下:首先判断是否是结果状态,如果是结果状态则复位,否则判断是第二操作数状态,是则设置为第二操作数。最后,使用计算模块的setNum设置操作数,并使用setData进行双向绑定的数据显示。

execBtn:"="事件处理函数,此函数的主要作用是调用计算模块的getResult函数,获取计算结果,并使用setData进行双向绑定的数据显示。

其它的事件处理函数如代码所示,分别完成复位、小数点、删除等处理函数,处理逻辑请参照代码。

本文主要论述了微信小程序计算器的设置,从思路、界面、计算模块、处理逻辑等方面进行了详细的论述,并给出了源代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/388989.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL基础练习题16-电影评分

题目 准备数据 分析数据 总结 题目 查找评论电影数量最多的用户名。如果出现平局&#xff0c;返回字典序较小的用户名。 查找在 February 2020 平均评分最高 的电影名称。如果出现平局&#xff0c;返回字典序较小的电影名称。 准备数据 ## 创建库 create database db; u…

【C++】初识C++

目录 命名空间域的概念命名空间的概念示例1示例2 命名空间的嵌套定义命名空间的访问指定命名空间访问using访问命名空间对于嵌套命名空间的访问 输入&输出输入输出输入输出的特性换行 命名空间 在C/C中&#xff0c;变量、函数和类的定义很多&#xff0c;在某些方面我们难免…

一刷代码随想录(贪心5)

56. 合并区间 题意&#xff1a; 给出一个区间的集合&#xff0c;请合并所有重叠的区间。 示例 1: 输入: intervals [[1,3],[2,6],[8,10],[15,18]]输出: [[1,6],[8,10],[15,18]]解释: 区间 [1,3] 和 [2,6] 重叠, 将它们合并为 [1,6]. 示例 2: 输入: intervals [[1,4],[4…

windows子系统wsl完成本地化设置locale,LC_ALL

在 Windows 的子系统 Linux&#xff08;WSL&#xff09;环境中&#xff0c;解决本地化设置问题可以采取以下步骤&#xff1a; 1. **检查本地化设置**&#xff1a; 打开你的 WSL 终端&#xff08;比如 Ubuntu、Debian 等&#xff09;&#xff0c;运行以下命令来查看当前的本…

51单片机和STM32区别

51单片机和 STM32 区别 51单片机和 STM32 是两种常见的微控制器&#xff0c;它们在架构、性能、外设接口、功耗和开发环境等方面有所不同。 1. 架构差异 51单片机基于传统的哈佛总线结构&#xff0c;采用 CISC 架构&#xff0c;而 STM32 基于 ARM Cortex-M 系列的32位处理器核…

CRMEB-众邦科技 使用笔记

1.启动项目报错 Unable to load authentication plugin ‘caching_sha2_password’. 参考&#xff1a;http://t.csdnimg.cn/5EqaE 解决办法&#xff1a;升级mysql驱动 <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</ar…

【天机学堂】面试总结

写在前面&#xff0c;首先要将天机学堂包装一下&#xff0c;智慧教育平台》&#xff0c;暂时就想到这个。天机学堂文档 1.包装简历 待更新。。。

【iOS】iOS内存五大分区

iOS内存五大分区 总揽 iOS中&#xff0c;内存主要分为五大区域&#xff1a;栈区&#xff0c;堆区&#xff0c;全局区/静态区&#xff0c;常量区和代码区。总览图如下。 这个图我觉得更好记&#xff0c;因为下面是低地址&#xff0c;上面是高地址&#xff0c;是比较符合日常…

堆的实现-向上调整算法-向下调整算法-堆排序-TopK问题 C语言

一、堆的概念及结构 二、 向上调整算法 注意:循环条件不可写parent > 0 //向上调整算法 //child为下标 void adjustup(int* a, int child) {int parent (child - 1) / 2;while (child > 0){if (a[child] < a[parent]){swap(&a[child], &a[parent]);child pa…

CoderGuide

CoderGuide是一个针对同学们前后端求职面试的开源项目&#xff0c;作为一名互联网/IT从业人员&#xff0c;经常需要搜索一些书籍、面试题等资源&#xff0c;在这个过程中踩过很多坑、浪费过很多时间。欢迎大家 Watch、Star&#xff0c;供各位同学免费使用&#xff0c;永不收费&…

Spring框架 配置Gateway网关/spring cloud gateway 基础入门案例教程

文章目录 目录 文章目录 安装流程 小结 概要安装流程技术细节小结 概要 网关作为微服务集群唯一的对外入口,可以实现很多功能. 例如: 统一的解决跨域(一个ajax请求 origin域名和请求目标url中域名不同,ip不同,域名不同,端口不同,都会引发的问题)问题. 统一的身份认证.认证解…

C++ 关键字与库函数 学习总结

sizeof与strlen 含义 sizeof&#xff1a;是一个操作符&#xff0c;用于计算数据类型或变量的大小&#xff08;以字节为单位&#xff09;。在编译时求值strlen&#xff1a; 是一个函数&#xff0c;用于计算字符串的长度&#xff08;不包括终止符 \0&#xff09;。在运行时求值不…

考研数学|保100冲130暑假强化保姆级规划

只做这些的话还不够&#xff0c;还要加上真题、模拟题。而且必须确保自己完全掌握上面的内容。 只看30讲和做1000题考90分是比较有困难的。如果刷完知能行1000题&#xff0c;90分应该很稳。 张宇1000题是考研数学难度较大一些的题集&#xff0c;题目难&#xff0c;计算量大&a…

机器学习笔记 - RAFT 光流简读

一、光流 光流是图像序列中像素的表观运动。为了估计光流,场景中物体的移动必须具有相应的亮度位移。这意味着一个图像中移动的红球在下一个图像中应该具有相同的亮度和颜色,这使我们能够确定它以像素为单位移动了多少。下图显示了光流示例,其中一系列图像捕获了逆时针旋转的…

增加一个按钮,批量获取凭证号

create PROCEDURE Cux_Ar_ServiceLedger_Voucher_ProcOrgId Int ,result Int output AS BEGIN SET NOCOUNT ONDECLARE Date DATETIME IF OrgId 0 or OrgIdBEGIN RAISERROR(N获取当前组织ID失败&#xff01;, 16, 1) RETURNEND SET Date GETDATE()BEGIN TRANSACTION BEGIN…

微调(一)

微调有两种办法&#xff0c; 一是模型全部参数的微调&#xff0c;二是少量参数高效的微调。前者由于参数多&#xff0c;需要的GPU多&#xff0c;并且全参数微调可能把模型带偏&#xff0c;后者只需要微调少量参数&#xff0c;需要的GPU少&#xff0c;还可能达到不错的效果&…

秒懂Linux之自动化构建工具-make/Makefile

目录 一.前文摘要 二.make/Makefile 一.前文摘要 在学习自动化构建工具前我们先来补充一下动静态库的相关指令 动态库指令 gcc -o 文件&#xff08;重命名&#xff09; 源文件 静态库指令 gcc -o 文件&#xff08;重命名&#xff09; 源文件 -static 二.make/Makefile 怎么形…

MATLAB(14)预处理

一、前言 在MATLAB中进行插值拟合、主成分分析&#xff08;PCA&#xff09;和小波分析之前&#xff0c;通常需要对数据进行一些预处理。这些预处理步骤可能包括数据清洗、缺失值处理、标准化或归一化等。下面我将分别为这三种分析方法提供预处理模型的示例代码。 二、实现 1.…

校园点餐系统

1 项目介绍 1.1 摘要 在这个被海量信息淹没的数字化时代&#xff0c;互联网技术以惊人的速度迭代&#xff0c;信息的触角无处不在&#xff0c;社会的脉动随之加速。每一天&#xff0c;我们都被汹涌而至的数据浪潮包裹&#xff0c;生活在一个全方位的数字信息矩阵中。互联网的…