Calculator for applet development

In this mini-program development tutorial, we will introduce how to use the mini-program development calculator function. This article is divided into two parts: the main part of the applet and the business page of the calculator. in this mini-program development tutorial, we will introduce how to use the mini-program development calculator function.

This article consists of two parts: the main part of the applet and the business page of the calculator.

I. main part of the applet

A applet consists of three files and must be placed in the project root directory, as shown below:

1. applet logic

App({  onLaunch: function() {     // Do something initial when launch.  },  onShow: function() {      // Do something when show.  },  onHide: function() {      // Do something when hide.  },  globalData: 'I am global data'})

2. mini-program public settings

{  "pages": [    "page/index/index"  ],  "window": {    "navigationBarBackgroundColor": "#000",    "backgroundColor": "#000",    "navigationBarBackgroundColor": "#000"  },  "networkTimeout": {    "request": 10000,    "connectSocket": 10000,    "uploadFile": 10000,    "downloadFile": 10000  },  "debug": true}

II. Calculator page

The calculator page consists of the following files.

1. Calculator page structure

The page structure consists of the display area and keyboard area.

The keyboard area is divided into function keys, number keys, and Operation keys. the page structure is as follows:

   
  {{display}}
 
   
      
   
    {{displayValue}}
     
    
      
         
            
             
             
           
          /*sdf*/      
            
             
             
             
             
             
             
             
             
             
             
           
        
       
           
            
            
            
            
        
     
  
 

2. calculator style sheet

The style code is as follows:

@ Import "reset. wxss "; page {font: 100 14px 'roboto ';}. calculator {width: 100%; height: 100vl; background: black; position: relative; box-shadow: 0px 0px 20px 0px # aaa; display: flex; flex-direction: column; box-sizing: border-box ;}. calculator-display {background: # 1c191c; flex: 1;}/* TODO: solves the vertical text center problem */. calculator-display-text {padding: 0 30px; font-size: 6em; color: white; text-align: right ;}. calculator-keypad {display: flex ;}. calculator. function-keys {display: flex ;}. calculator. digit-keys {background: # e0e0e7; display: flex; flex-direction: row; flex-wrap: wrap-reverse ;}. calculator-key-hover {box-shadow: inset 0px 0px 25vw 0px rgba (0.25, 0 );}. calculator-key {display: block; width: 25vw; height: 25vw; line-height: 25vw; border-top: 1px solid #777; border-right: 1px solid #666; text-align: center; box-sizing: border-box ;}. calculator. function-keys. calculator-key {font-size: 2em ;}. calculator. digit-keys. calculator-key {font-size: 2.25em ;}. calculator. digit-keys. key-0 {width: 50vw; text-align: left; padding-left: 9vw ;}. calculator. digit-keys. key-dot {padding-top: 1em; font-size: 0.75em ;}. calculator. operator-keys. calculator-key {color: white; border-right: 0; font-size: 3em ;}. calculator. function-keys {background: linear-gradient (to bottom, rgba (202,202,204, 1) 0%, rgba (196,194,204, 1) 100% );}. calculator. operator-keys {background: linear-gradient (to bottom, rgba (252,156, 0%, 247,126) 100%, rgba );}. input-keys {width: 75% ;}. operator-keys {width: 25% ;}

3. Calculator page logic processing

Page ({data: {value: null, // result after the last calculation. null indicates that the last calculation result displayValue: '0' is not displayed, // The value operator: null is displayed, // The last calculated symbol. null indicates that there is no unfinished calculation waitingForOperand: false // whether the previous key is a calculated symbol}, onLoad: function (options) {this. calculatorOperations = {'key-pide ': (prevValue, nextValue) => prevValue/nextValue, 'Key-multiply': (prevValue, nextValue) => prevValue * nextValue, 'key-add': (prevValue, nextValue) => prevValue + n ExtValue, 'Key-subtract ': (prevValue, nextValue) => prevValue-nextValue, 'Key-equals': (prevValue, nextValue) => nextValue }}, /* AC operation, return to pre-liberation */clearAll () {this. setData ({value: null, displayValue: '0', operator: null, waitingForOperand: false})},/* only clear the currently displayed input value */clearDisplay () {this. setData ({displayValue: '0'})}, onTapFunction: function (event) {const key = event.tar get. dataset. key; Switch (key) {case 'key-clear': if (this. data. displayValue! = '0') {this. clearDisplay ();} else {this. clearAll ();} break; case 'key-sign': var newValue = parseFloat (this. data. displayValue) *-1 this. setData ({displayValue: String (newValue)}) break; case 'key-percent ': const fixedDigits = this. data. displayValue. replace (/^ -? \ D *\.? /, '') Var newValue = parseFloat (this. data. displayValue)/100 this. setData ({displayValue: String (newValue. toFixed (fixedDigits. length + 2)}); break; default: break; }}, onTapOperator: function (event) {const nextOperator = event.tar get. dataset. key; const inputValue = parseFloat (this. data. displayValue); if (this. data. value = null) {this. setData ({value: inputValue});} else if (this. data. bytes Ator) {const currentValue = this. data. value | 0; const newValue = this. calculatorOperations [this. data. operator] (currentValue, inputValue); this. setData ({value: newValue, displayValue: String (newValue)});} this. setData ({waitingForOperand: true, operator: nextOperator}) ;}, onTapDigit: function (event) {const key = event.tar get. dataset. key; // Press the if (key = 'key-dot ') {// press the point if (! (/\. /). Test (this. data. displayValue) {this. setData ({displayValue: this. data. displayValue + '. ', waitingForOperand: false})} else {// Press the number key const digit = key [key. length-1]; if (this. data. waitingForOperand) {this. setData ({displayValue: String (digit), waitingForOperand: false})} else {this. setData ({displayValue: this. data. displayValue = '0 '? String (digit): this. data. displayValue + digit })}}}})

3. Procedures