微信小程序之计算器
在日常生活中,计算器是人们广泛使用的工具,可以帮助我们快速且方便地计算金额、成本、利润等。下面将会讲解如何开发一个“计算器”微信小程序。
一、开发思路
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或num2
num1: '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, m
try {
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, n
try {
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 : r2
return ((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, r2
try {
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 = 0
if (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.val
if(this.resultflag){
this.resetBtn()
}
if(this.numChangeFlag){
this.numChangeFlag=false
this.execflag=true
this.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.val
this.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=false
this.execflag=true
calc.num2=this.data.num
}
//如果已经输入第2个数字,执行计算操作
if(this.execflag){
this.resultflag=true
var result=calc.getResult()
this.setData({
sub: calc.num1+' '+calc.op+' '+calc.num2+'=',
num: result
})
calc.num1=result
}
} ,
//重置按钮事件处理函数
resetBtn:function(){
calc.reset()
this.execflag=false
this.numChangeFlag=false
this.resultflag=false
this.setData({
sub: '',
num: '0'
})
},
//小数点按钮事件
dotBtn:function(){
//如果是计算结果状态,则重置计算器
if(this.resultflag){
this.resetBtn()
}
//如果等待输入第2个数字且还没有输入第2个数字,设为‘0’
if(this.numChangeFlag) {
this.numChangeFlag=false
calc.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进行双向绑定的数据显示。
其它的事件处理函数如代码所示,分别完成复位、小数点、删除等处理函数,处理逻辑请参照代码。
本文主要论述了微信小程序计算器的设置,从思路、界面、计算模块、处理逻辑等方面进行了详细的论述,并给出了源代码。
原文地址:https://blog.csdn.net/ch_s_t/article/details/140530276
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!