This is the 31st day of my participation in the August Text Challenge.More challenges in August

Today is the last day of the Activity of More articles in August. As a blogger who has persisted for 31 days, it is not easy. If you like the article, you can give a thumbs up for it. Today is to write micro channel small program entry combat, calculator implementation. This is written for micro channel small program beginners to learn, big guy can not look down.

The first rendering is shown in the figure above.

This widget is a single page application, and the most important part of the directory is inside.

<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>Copy the code

Let’s take a look at UI layout writing in index. WXML. Above is a result that shows the number typed and the result calculated. The following is a sequence of buttons. There is no great difficulty in this.

And then index.js is the focus, which is where the application logic is written.

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

Copy the code

The data above has numbers, operators, results, whether to clear zero records.

 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 })
}
 },
Copy the code

Here is the response of the digital button, dealing with the result of the digital button being pressed in different cases.

 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 + '' }) 
 },
Copy the code

Here is the response to the operation symbol, which is to add, subtract, multiply and divide the number. Then save the number to the result.

In general, writing a small calculator program is not too difficult, there are want to learn more micro channel small program knowledge, you can pay attention to the public number: poem like code, find me to learn together.