微信小程序入门篇，计算器的实现

今天是8月更文活动的最后一天，作为坚持了31天的博主，也算是不容易，有喜欢文章的小伙伴可以帮忙点个赞。今天要写的是微信小程序的入门实战篇，计算器的实现。这是写给微信小程序初学者学习的，大佬可以不用往下看了。

首先效果图如上图所示。

这个小程序就是一个单页面的应用，目录中最重要的部分就是这里面。

<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">AC</view>
<view hover-class="bg" bindtap="numBtn" data-val="0">0</view>

<view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
<view hover-class="bg" bindtap="opBtn" data-val="*">x</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>

我们先看来看看index.wxml中的ui布局写。上面是一个result用来显示打上去的数字和计算结果的。下面就是用一个个按钮排列而成。这里面没有太大的难度。

然后index.js才是重点内容，这是写了应用逻辑的。

const app = getApp()
Page({
  data: {
    num:'',
    op:'0' 
  },
  result: null,
  isClear: false,

上面的数据有数字，操作符，结果，是否清零记录。

 numBtn: function(e) {
if(this.data.op=='=')
{
  this.result = null
  this.isClear = false
  this.setData({ num: '0', op: '' })
}
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 }
  this.setData({num: this.result + '' }) 
 },

这里是操作符号的响应，也就是对数字进行加减乘除操作。然后将操作完的数字保存到结果里面去。

总的来说，写一个计算器小程序不算太难，有想要学习更多微信小程序知识的，可以关注公众号：诗一样的代码，找我一起学。