Back-end separation calculator programming

832101311 张佳颖

已于 2023-10-21 19:13:54 修改

阅读量78

点赞数

文章标签：小程序

于 2023-10-21 19:02:25 首次发布

本文链接：https://blog.csdn.net/2301_79904881/article/details/133953115

版权

Assignment Description

Project Source Address

PSP Table

Overall Display

Design And Implementation Process

Function Realization

Page Optimization Design

Flow Chart

Problem Solving And Idea

Summary

Assignment Description

This task is based on a simple visual calculator designed with wechat developer tools. On this basis, it is optimized to increase the functions of the calculator and realize the reading of historical data from the back-end database.

Project Source Address

The Link Your Class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/617378696
The Aim of This Assignment	Independent front and back end calculators, perfect corresponding functions
MU STU ID and FZU STU ID	21126160(MU)/832101311(FZU)

Other References：GitHub - luckyLucy999/calculatornew

PSP Table

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	30	45
• Estimate	30	45
Development	580	730
• Analysis	30	50
• Design Spec	20	30
• Design Review	30	40
• Coding Standard	30	58
• Design	50	65
• Coding	250	289
• Code Review	150	168
• Test	20	30
Reporting	115	108
• Test Repor	45	35
• Size Measurement	30	40
• Postmortem & Process Improvement Plan	40	33
Sum	725	883

Overall Display

Design And Implementation Process

Front-End

Through.js,.json,.wxml,.wxSS each part of the code writing, the realization of page design, style design, interactive behavior, etc. It can realize various functions such as digital input and basic operation, calculation result display, responsive layout and so on.

cal.js

This part of the code is modified on the basis of simple addition, subtraction, multiplication, division and trigonometric function operations of the original calculator. The operations of inverse trigonometric function, complement, reciprocal, ln, lg, square root and power are added.

Page({ 
  data: {
     id1: "back", 
     id2: "clear", 
     id3: "negative", 
     id4: "+", 
     id5: "9", 
     id6: "8", 
     id7: "7", 
     id8: "-", 
     id9: "6", 
     id10: "5", 
     id11: "4", 
     id12: "x", 
     id13: "3", 
     id14: "2", 
     id15: "1", 
     id16: "÷", 
     id17: "0", 
     id18: ".", 
     id19: "history", 
     id20: "=", 
     id21: "sin", 
     id22: "cos", 
     id23: "tan", 
     id24: "√", 
     id25: "lg", 
     id26: "^", 
     id27: "(", 
     id28: ")", 
     id29: "^(-1)", 
     id30: "%", 
     id31: "ln", 
     id32:"asin",
     id33:"acos",
     id34:"atan",
     id35:"π",
     id36:"MS",
     id37:"MR",
     id38:"MC",
     screenData: "0", 
     lastIsOpt: false, 
     arr: [], 
     logs: [],
     bracketLevel:0,
     memory:"",
     },
      clickButton: function (event) { 
        console.log(event.target.id); 
        var id = event.target.id; 
        var newdata; 
        var sd = this.data.screenData;
        if (id == this.data.id1) { 
            if ('0' == sd) return; 
            newdata = sd.substring(0, sd.length - 1); 
            if ("-" == newdata || "" == newdata) newdata = "0"; 
            this.data.arr.pop(); 
        } else if (id == this.data.id2) { 
            newdata = "0"; 
            this.data.arr.length = 0; 
          } else if (id == this.data.id3) { 
            if ("0" == sd) return; 
            var fstChar = sd.substring(0, 1); 
            if ('-' == fstChar) { 
              newdata = sd.substring(1, sd.length); 
              this.data.arr.shift(); 
            } else { 
              newdata = "-" + sd; 
              this.data.arr.unshift('-'); 
            } 
        } else if (id == this.data.id20) { 
          if ('0' == sd) return; 
          if (true == this.data.lastIsOpt) return; 
          var arr = this.data.arr; 
          var optarr = []; 
          var num = ""; 
  
  for (var i in arr) { 
    if (false == isNaN(arr[i]) || arr[i] == this.data.id18 || arr[i] == this.data.id3) { 
      num += arr[i]; 
    } else { 
      optarr.push(num); 
      optarr.push(arr[i]); 
      num = ""; 
    } 
  } 
  
  optarr.push(num); 
  var result = Number(optarr[0]) * 1.0; 
  
  for (var i = 1; i < optarr.length; i++) { 
    if (true == isNaN(optarr[i])) { 
      if (optarr[i] == this.data.id4) { 
        result += Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id8) { 
        result -= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id12) { 
        result *= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id16) { 
        result /= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id26) { 
        result = Math.pow(result, Number(optarr[i + 1])); 
      } else if(optarr[i] == this.data.id30){
        result %= Number(optarr[i+1]);
      }else if(optarr[i] == this.data.id29){
        result = 1/result;
      }else if(optarr[i]== this.data.id31){
        result = Math.log(Number(optarr[i+1]))
      }else if(optarr[i]== this.data.id25){
        result = Math.log10(Number(optarr[i+1]))
      }else if (optarr[i] == this.data.id21) { 
        result = Math.sin(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id22) { 
        result = Math.cos(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id23) { 
        result = Math.tan(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id32) { 
        result = Math.asin(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      } else if (optarr[i] == this.data.id33) { 
        result = Math.acos(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      } else if (optarr[i] == this.data.id34) { 
        result = Math.atan(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      } else if (optarr[i] == this.data.id24) { 
        result = Math.sqrt(Number(optarr[i+1])); 
      } else if (optarr[i] == this.data.id36) { 
        this.data.memory=sd; 
      } else if (optarr[i] == this.data.id37) { 
        result = this.data.memory;
        this.data.arr = this.data.memory.split("");
      } else if(optarr[i]==this.data.id38){
        this.data.memory="";
      }
    } 
  } 
  
  this.data.arr.length = 0; 
  this.data.arr.push(result); 
  newdata = result; 
  var nowlog = sd + "=" + result; 
  this.data.logs.push(nowlog); 
  wx.setStorageSync('calcu-logs', this.data.logs); 
  const db = wx.cloud.database();
      db.collection('calculation').add({
        data: {
          formula: sd,
          result: result
        },
        success: function (res) {
          console.log(res);
        },
        fail: function (err) {
          console.error(err);
        }
      });
} else if (id == this.data.id21 || id == this.data.id22 || id == this.data.id23) { 
  if ('0' == sd) return; 
  if (true == this.data.lastIsOpt) return; 
  var arr = this.data.arr; 
  var optarr = []; 
  var num = ""; 
  
  for (var i in arr) { 
    if (false == isNaN(arr[i]) || arr[i] == this.data.id18 || arr[i] == this.data.id3) { 
      num += arr[i]; 
    } else { 
      optarr.push(num); 
      optarr.push(arr[i]); 
      num = ""; 
    } 
  } 
  
  optarr.push(num); 
  var result = Number(optarr[0]) * 1.0; 
  
  for (var i = 1; i < optarr.length; i++) { 
    if (true == isNaN(optarr[i])) { 
      if (optarr[i] == this.data.id4) { 
        result += Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id8) { 
        result -= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id12) { 
        result *= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id16) { 
        result /= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id26) { 
        result = Math.pow(result, Number(optarr[i + 1])); 
      } else if(optarr[i]==this.data.id30){
        result=Number(optarr[i+1]) % Number(optarr[i+2]);
      } else if(optarr[i] == this.data.id29){
        result = 1/result;
      }else if(optarr[i]== this.data.id31){
        result = Math.log(Number(optarr[i+1]))
      }else if(optarr[i]== this.data.id25){
        result = Math.log10(Number(optarr[i+1]))
      }else if (optarr[i] == this.data.id21) { 
        result = Math.sin(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id22) { 
        result = Math.cos(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id23) { 
        result = Math.tan(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id32) { 
        result = Math.asin(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      } else if (optarr[i] == this.data.id33) { 
        result = Math.acos(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      } else if (optarr[i] == this.data.id34) { 
        result = Math.atan(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      }else if (optarr[i] == this.data.id24) { 
        result = Math.sqrt(Number(optarr[i+1])); 
      } else if (optarr[i] == this.data.id36) { 
        this.data.memory=sd; 
      } else if (optarr[i] == this.data.id37) { 
        result = this.data.memory;
        this.data.arr = this.data.memory.split("");
      } else if(optarr[i]==this.data.id38){
        this.data.memory="";
      }
    } 
  } 
  
  // var angle = result; 

  // if (id === this.data.id21) { 
  //   result = Math.sin(angle * Math.PI / 180); 
  // } else if (id === this.data.id22) { 
  //   result = Math.cos(angle * Math.PI / 180); 
  // } else if (id === this.data.id23) { 
  //   result = Math.tan(angle * Math.PI / 180); 
  // } 
  
  this.data.arr.length = 0; 
  this.data.arr.push(result); 
  newdata = result; 
  var nowlog = sd + "=" + result; 
  this.data.logs.push(nowlog); 
  wx.setStorageSync('calcu-logs', this.data.logs); 
  const db = wx.cloud.database();
      db.collection('calculation').add({
        data: {
          formula: sd,
          result: result
        },
        success: function (res) {
          console.log(res);
        },
        fail: function (err) {
          console.error(err);
        }
      });
} else if (id == this.data.id24) { 
  if ('0' == sd) return; 
  if (true == this.data.lastIsOpt) return; 
  var arr = this.data.arr; 
  var optarr = []; 
  var num = ""; 
  
  for (var i in arr) { 
    if (false == isNaN(arr[i]) || arr[i] == this.data.id18 || arr[i] == this.data.id3) { 
      num += arr[i]; 
    } else { 
      optarr.push(num); 
      optarr.push(arr[i]); 
      num = ""; 
    } 
  } 
  
  optarr.push(num); 
  var result = Number(optarr[0]) * 1.0; 
  
  for (var i = 1; i < optarr.length; i++) { 
    if (true == isNaN(optarr[i])) { 
      if (optarr[i] == this.data.id4) { 
        result += Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id8) { 
        result -= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id12) { 
        result *= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id16) { 
        result /= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id26) { 
        result = Math.pow(result, Number(optarr[i + 1])); 
      } else if(optarr[i]==this.data.id30){
        result %= Number(optarr[i+1]);
      }else if(optarr[i] == this.data.id29){
        result = 1/result;
      }else if(optarr[i]== this.data.id31){
        result = Math.log(Number(optarr[i+1]))
      }else if(optarr[i]== this.data.id25){
        result = Math.log10(Number(optarr[i+1]))
      }else if (optarr[i] == this.data.id21) { 
        result = Math.sin(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id22) { 
        result = Math.cos(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id23) { 
        result = Math.tan(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id32) { 
        result = Math.asin(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      } else if (optarr[i] == this.data.id33) { 
        result = Math.acos(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      } else if (optarr[i] == this.data.id34) { 
        result = Math.atan(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      }else if (optarr[i] == this.data.id24) { 
        result = Math.sqrt(Number(optarr[i+1])); 
      } else if (optarr[i] == this.data.id36) { 
        this.data.memory=sd; 
      } else if (optarr[i] == this.data.id37) { 
        result = this.data.memory;
        this.data.arr = this.data.memory.split("");
      } else if(optarr[i]==this.data.id38){
        this.data.memory="";
      }
    } 
  } 
  
  result = Math.sqrt(result); 
  this.data.arr.length = 0; 
  this.data.arr.push(result); 
  newdata = result; 
  var nowlog = sd + "=" + result; 
  this.data.logs.push(nowlog); 
  wx.setStorageSync('calcu-logs', this.data.logs); 
  const db = wx.cloud.database();
      db.collection('calculation').add({
        data: {
          formula: sd,
          result: result
        },
        success: function (res) {
          console.log(res);
        },
        fail: function (err) {
          console.error(err);
        }
      });
} else if (id == this.data.id25) { 
  if ('0' == sd) return; 
  if (true == this.data.lastIsOpt) return; 
  var arr = this.data.arr; 
  var optarr = []; 
  var num = ""; 
  
  for (var i in arr) { 
    if (false == isNaN(arr[i]) || arr[i] == this.data.id18 || arr[i] == this.data.id3) { 
      num += arr[i]; 
    } else { 
      optarr.push(num); 
      optarr.push(arr[i]); 
      num = ""; 
    } 
  } 
  
  optarr.push(num); 
  var result = Number(optarr[0]) * 1.0; 
  
  for (var i = 1; i < optarr.length; i++) { 
    if (true == isNaN(optarr[i])) { 
      if (optarr[i] == this.data.id4) { 
        result += Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id8) { 
        result -= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id12) { 
        result *= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id16) { 
        result /= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id26) { 
        result = Math.pow(result, Number(optarr[i + 1])); 
      } else if(optarr[i]==this.data.id30){
        result%=Number(optarr[i+1])
      }else if(optarr[i] == this.data.id29){
        result = 1/result;
      }else if(optarr[i]== this.data.id31){
        result = Math.log(Number(optarr[i+1]))
      }else if(optarr[i]== this.data.id25){
        result = Math.log10(Number(optarr[i+1]))
      }else if (optarr[i] == this.data.id21) { 
        result = Math.sin(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id22) { 
        result = Math.cos(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id23) { 
        result = Math.tan(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id32) { 
        result = Math.asin(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      } else if (optarr[i] == this.data.id33) { 
        result = Math.acos(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      } else if (optarr[i] == this.data.id34) { 
        result = Math.atan(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      }else if (optarr[i] == this.data.id24) { 
        result = Math.sqrt(Number(optarr[i+1])); 
      } else if (optarr[i] == this.data.id36) { 
        this.data.memory=sd; 
      } else if (optarr[i] == this.data.id37) { 
        result = this.data.memory;
        this.data.arr = this.data.memory.split("");
      } else if(optarr[i]==this.data.id38){
        this.data.memory="";
      }
    } 
  } 
  // result = Math.log10(result); 
  this.data.arr.length = 0; 
  this.data.arr.push(result); 
  newdata = result; 
  var nowlog = sd + "=" + result; 
  this.data.logs.push(nowlog); 
  wx.setStorageSync('calcu-logs', this.data.logs); 
  const db = wx.cloud.database();
      db.collection('calculation').add({
        data: {
          formula: sd,
          result: result
        },
        success: function (res) {
          console.log(res);
        },
        fail: function (err) {
          console.error(err);
        }
      });
} else if (id == this.data.id27) { 
  if ('0' == sd) { 
    newdata = event.target.id; 
  } else { 
    newdata = sd + event.target.id; 
  } 
  
  this.data.arr.push(event.target.id); 
} else if (id == this.data.id28) { 
  if ('0' == sd) return; 
  if (true == this.data.lastIsOpt) return; 
  var arr = this.data.arr; 
  var optarr = []; 
  var num = ""; 
  
  for (var i in arr) { 
    if (false == isNaN(arr[i]) || arr[i] == this.data.id18 || arr[i] == this.data.id3) { 
      num += arr[i]; 
    } else { 
      optarr.push(num); 
      optarr.push(arr[i]); 
      num = ""; 
    } 
  } 
  
  optarr.push(num); 
  var result = Number(optarr[0]) * 1.0; 
  
  for (var i = 1; i < optarr.length; i++) { 
    if (true == isNaN(optarr[i])) { 
      if (optarr[i] == this.data.id4) { 
        result += Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id8) { 
        result -= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id12) { 
        result *= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id16) { 
        result /= Number(optarr[i + 1]); 
      } else if (optarr[i] == this.data.id26) { 
        result = Math.pow(result, Number(optarr[i + 1])); 
      } else if(optarr[i]==this.data.id30){
        result %= Number(optarr[i+1]);
      }else if(optarr[i] == this.data.id29){
        result = 1/result;
      }else if(optarr[i]== this.data.id31){
        result = Math.log(Number(optarr[i+1]))
      }else if(optarr[i]== this.data.id25){
        result = Math.log10(Number(optarr[i+1]))
      }else if (optarr[i] == this.data.id21) { 
        result = Math.sin(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id22) { 
        result = Math.cos(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id23) { 
        result = Math.tan(Number(optarr[i+1]) * Math.PI / 180); 
      } else if (optarr[i] == this.data.id32) { 
        result = Math.asin(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      } else if (optarr[i] == this.data.id33) { 
        result = Math.acos(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      } else if (optarr[i] == this.data.id34) { 
        result = Math.atan(Number(optarr[i+1]))*(180/Math.PI)+'°'; 
      }else if (optarr[i] == this.data.id24) { 
        result = Math.sqrt(Number(optarr[i+1])); 
      } else if (optarr[i] == this.data.id36) { 
        this.data.memory=sd; 
      } else if (optarr[i] == this.data.id37) { 
        result = this.data.memory;
        this.data.arr = this.data.memory.split("");
      } else if(optarr[i]==this.data.id38){
        this.data.memory="";
      }
    } 
  } 
  
  result = "(" + result + ")"; 
  this.data.arr.length = 0; 
  this.data.arr.push(result); 
  newdata = result; 
  var nowlog = sd + "=" + result; 
  this.data.logs.push(nowlog); 
  wx.setStorageSync('calcu-logs', this.data.logs); 
}
    else{
      if(id==this.data.id4 || id==this.data.id8 || id==this.data.id12 || id==this.data.id16){
        if(true==this.data.lastIsOpt || '0'==sd){
          return ;
        }
        this.data.lastIsOpt=true;
      }
      else{
        this.data.lastIsOpt=false;
      }
      if ('0' == sd) {
        newdata = event.target.id;
      } else {
        newdata = sd + event.target.id;
      }
      this.data.arr.push(event.target.id);
    }
    this.setData({ screenData: newdata});
  },
  history:function() {
    wx.navigateTo({
      url: '../list/list',
    })
  }
})

cal.wxml

This section of code adds keys to the newly added compute function.

<view class="content">
  <view class="screen">
    {{screenData}}
  </view>
  <view class='btn-group'>
    <view class='item orange' hover-class='shadow' bindtap='clickButton' id="{{id36}}">MS</view>
    <view class='item orange' hover-class='shadow' bindtap='clickButton' id="{{id37}}">MR</view>
    <view class='item orange' hover-class='shadow' bindtap='clickButton' id="{{id38}}">MC</view>
  </view>
  <view class='btn-group'>
    <view class='item orange' hover-class='shadow' bindtap='clickButton' id="{{id21}}">sin</view>
    <view class='item orange' hover-class='shadow' bindtap='clickButton' id="{{id22}}">cos</view>
    <view class='item orange' hover-class='shadow' bindtap='clickButton' id="{{id23}}">tan</view>
    <view class='item orange' hover-class='shadow' bindtap='clickButton' id="{{id24}}">√</view>
    <view class='item orange' hover-class='shadow' bindtap='clickButton' id="{{id35}}">π</view>
  </view>
  <view class='btn-group'>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id32}}">asin</view>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id33}}">acos</view>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id34}}">atan</view>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id27}}">(</view>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id28}}">)</view>
  </view>
  <view class='btn-group'>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id25}}">lg</view>

    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id1}}">DEL</view>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id2}}">C</view>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id30}}">%</view>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id4}}">+</view>
  </view>
  <view class='btn-group'>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id31}}">ln</view>
    <view class='item white' hover-class='shadow'bindtap='clickButton' id="{{id7}}">7</view>
    <view class='item white' hover-class='shadow'bindtap='clickButton' id="{{id6}}">8</view>
    <view class='item white' hover-class='shadow'bindtap='clickButton' id="{{id5}}">9</view>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id8}}">-</view>
  </view>
  <view class='btn-group'>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id29}}">1/x</view>
    <view class='item white' hover-class='shadow'bindtap='clickButton' id="{{id11}}">4</view>
    <view class='item white' hover-class='shadow'bindtap='clickButton' id="{{id10}}">5</view>
    <view class='item white' hover-class='shadow'bindtap='clickButton' id="{{id9}}">6</view>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id12}}">x</view>
  </view>
  <view class='btn-group'>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id26}}">^</view>
    <view class='item white' hover-class='shadow' bindtap='clickButton' id="{{id15}}">1</view>
    <view class='item white' hover-class='shadow' bindtap='clickButton' id="{{id14}}">2</view>
    <view class='item white' hover-class='shadow' bindtap='clickButton' id="{{id13}}">3</view>
    <view class='item orange' hover-class='shadow' bindtap='clickButton' id="{{id16}}">÷</view>
  </view>
  <view class='btn-group'>
    <view class='item orange' hover-class='shadow'bindtap='clickButton' id="{{id3}}">±</view>
    <view class='item white' hover-class='shadow' bindtap='clickButton' id="{{id17}}">0</view>
    <view class='item white' hover-class='shadow' bindtap='clickButton' id="{{id18}}">.</view>
    <view class='item blue' hover-class='shadow' bindtap='history' id="{{id19}}">ans</view> 
    <view class='item orange' hover-class='shadow' bindtap='clickButton' id="{{id20}}">=</view>
  </view>
</view>

cal.wxss

This part of the code beautifies the calculator keys and the interface that displays the results, as well as the background.

/* the entire calculator */
.content{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border box;
  /* background-image: url('../assets/image/bg.jpg'); */
  background-color: rgb(0, 0, 0);
  background-repeat: repeat;
  padding-top: 30rpx;
}

/* calculator screen */
.screen{
  background-color: rgb(204, 201, 201);
  border-radius: 10px;
  text-align:end;
  width:720rpx;
  height: 200rpx;
  padding-right: 10rpx;
  margin-bottom: 30rpx;
}

.screen{
  color: #000000;
  font-weight: bold;
  font-size: 40px;
  word-wrap: break-word;
}

/*  */
.btn-group{
  display: flex;
  flex-direction: row;
}


/* each button */
.item{
  width: 130rpx;
  min-height: 100rpx;
  margin: 7rpx;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  border-radius: 30px;
  text-align: center;
  line-height: 130rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

/* color：orange */
.orange{
  color: #000000;
  font-weight: bold;
  font-size: 25px;
  border: solid 1px lightsalmon;
  background-color: lightsalmon;
}

/* color：blue */
.blue{
  color: #000000;
  font-weight: bold;
  font-size: 25px;
  border: solid 1px #227ccf;
  background-color: #227ccf;
}

.white{
  color: #000000;
  font-weight: bold;
  font-size: 25px;
  border: solid 1px #ffffff;
  background-color: #ffffff;
}

.shadow{
  background:rgba(150, 150, 150, 0.753);
}

Pressing the 'ans' button will take you to a new page with a history. Here is the code to jump to the new page.

list.js

Page({
  data: {
    logs:[]
  },
  onLoad: function (options) {
    // const db = wx.cloud.database();
    // db.collection('calculation').orderBy('_id', 'desc').limit(10).get({
    //   success: res => {
    //     console.log(res);
    //     this.setData({
    //       logs: res.data
    //     });
    //   },
    //   fail: err => {
    //     console.error(err);
    //   }
    // });
    var alllogs = wx.getStorageSync('calcu-logs');
    this.setData({logs:alllogs});
  }
})

list.wxml

<view class='content'>
  <view class='item'>history</view>
  <block wx:for="{{logs}}" wx:for-item="log">
    <view class='item'>{{log}}</view>
  </block>
</view>

list.wxss

/* pages/list/list.wxss */
/* pages/list/list.wxss */

/* outer design */
.content{
  height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  background-repeat: repeat;
  background-color: rgb(0, 0, 0);
}

/* each history formular */
.item{
  width: 90%;
  line-height: 90rpx;
  margin-top: 3rpx;
  margin-bottom: 3rpx;
  border-radius: 3px;
  padding-left: 3rpx;
  color: #000000;
  font-weight: bold;
  font-size: 25px;
  border: 1px solid #e6a455;
  background-color: #eca961;
}

Back-End

The back-end realizes the storage of the first order data. The calculated formulas and results are stored in a back-end database.

Partial code
// Cloud function entry file
const cloud = require('wx-server-sdk')

cloud.init()
// Cloud function entry function
  exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  const db = cloud.database()
  const result = await db.collection('calculation').get()

  return result.data
}


wx.cloud.callFunction({
  name: 'getCalculation',
  success: res => {
    console.log(res.result)
    // This is where the obtained calculation log data is processed
  },
  fail: err => {
    console.error(err)
  }
})
exports.main = async (event, context) => { const { formula } = event const result = eval(formula) // 使用eval函数计算表达式结果
try { const db = cloud.database() 
const res = await db.collection(‘calculation’).add({ 
   data: { 
     formula: formula, 
     result: result 
   } 
 }) 
 return res  
} 
catch (err) {  
    console.error(err) 
    return err 
  } 
}

  //     const db = wx.cloud.database();
  //     db.collection('calculation').add({
  //       data: {
  //         formula: sd,
  //         result: result
  //       },
  //       success: function (res) {
  //         console.log(res);
  //       },
  //       fail: function (err) {
  //         console.error(err);
  //       }
  //     });

The back-end realizes the calculation of addition, subtraction, multiplication, division and residual, as well as the query of historical records. The calculation formula and results are stored in a database.

Function Realization

① add, subtract, multiply and divide

② Backspace, clear, and take the remainder

③ Trigonometric functions

④ Inverse trigonometric functions

⑤ ln, lg, reciprocal, pow operation,±,MS,MR,MC..

⑥ View history

Page Optimization Design

The initial page design simply arranges the keys and sets up a calculator screen that displays the process and the results.

On the basis of the original, the various parts of the calculator are beautified. Set the layout and color of the calculator keys, as well as the state of the keys pressed - so that we can better know if and which keys are pressed. The embellished calculator is more visual.

Flow Chart

The user inputs in the front end, and the front end logic accepts the user input and initiates the request. The request is sent to the cloud function for processing, the calculation formula and results are stored in the database, and the cloud function returns the results and returns them to the front-end logic. The front-end logic receives the result and updates the page display.

Problem Solving And Idea

First, carefully read and analyze the project problem to understand the specific implementation of the project requirements and functions. Front-end technologies include JavaScript, and back-end technologies include Node.js,Express.js, and so on. Secondly, by finding information, the cloud development of wechat developer tools provides a set of integrated front and back end integrated development environment and platform. Through cloud development, you can directly develop and manage cloud functions, databases, storage, and cloud hosting.

Summary

After completing projects on visual calculators, I gained a deeper understanding of front-end and back-end development patterns. The independent development of front and back end can be realized by using the development mode of front and back end separation, which improves the efficiency of development. Have a certain grasp of how to create and debug small programs with wechat developer tools. Know how to create pages, design layout styles, simulate user behavior, and more.