WeChat Mini Program - Simple Calculator

832101128傅达明

已于 2023-10-08 21:39:21 修改

阅读量91

点赞数 1

文章标签：微信

于 2023-10-08 21:35:52 首次发布

本文链接：https://blog.csdn.net/youran_shi/article/details/133660681

版权

Ⅰ.Introduction

This blog is suitable for EE308FZ. To demonstrate the implementation of the WeChat mini program - Simple Oscilloscope, its functions include addition, subtraction, multiplication and division, clearing, exponential operation, and trigonometric function.

The Link Yor Class	https://bbs.csdn.net/forums/ssynkqtd-04?typeId=5171414
The Link of Resquirement of This Assignment	https://bbs.csdn.net/topics/617332156
The Aim of This Assignment	Simple Calculator
MU STU ID and FZU STU ID	21125121(MU) / 832101128(FZU)

Link to the finished project code：https://github.com/Leisurelion/caculator.git

Ⅱ. Project Work

1. PSP Form

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	30	40
• Estimate	30	40
Development	340	425
• Analysis	25	35
• Design Spec	25	20
• Design Review	10	15
• Coding Standard	10	10
• Design	70	80
• Coding	100	130
• Code Review	60	80
• Test	40	55
Reporting	110	120
• Test Report	60	70
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	40	40
Sum	480	585

2. Problem analysis

With the development of technology, the tool of WeChat applets has become more popular around people, enabling a wide variety of functions.
In order to meet the convenience of people's calculations, it is possible to write a simple calculator based on WeChat applets, and due to its simplicity, it can also be better for users to use.

3. Description of problem-solving ideas

（1）Reflection on problems

This project is to write a simple calculator, and the basic requirements of this calculator include inputting numbers, adding, subtracting, multiplying, dividing, and clearing functions. Based on this, advanced computing functions including trigonometric functions and exponential functions are implemented.
The writing of WeChat mini programs is relatively simple and concise when creating visualization tasks, so it can be used to complete this task.

（2）Information gathering

Reading and learning materials related to Bilibili, Github, and WeChat mini programs, combined with the WeChat mini program's guide manual, using wXML as the main language and other languages to achieve interface visualization is a good choice.

4. Design and Implementation process

The design and implementation process is divided into the following parts to realise:

Functional design
Visual Interface Design
Button Logic Design
Computational Logic Design

1. Functional design：

The applet features of this simple calculator include:

When the corresponding number button is pressed, the corresponding number appears in the window.
Pressing the corresponding calculation symbol enables the corresponding calculation and accepts the next data.
Pressing the Clear key clears all all data and initialises the program.
Press the Delete key to clear the previous number.
When pressing the corresponding special calculations, e.g. trigonometric and exponential operations, the results can be obtained.
The result of this equation can be calculated when the = button is pressed.

2. Visual Interface Design：

Set the overall background title etc. of the application in app.json.

//Define the overall interface context
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "计算器",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },

This sets the title, background, and font of the visualisation interface.

3. Button Logic Design

Based on the settings that come with the WeChat applet, we can simply go ahead and realise the buttons in the window as well as the display of the calculation process and results, and be able to design its functional layout.On this basis, it is possible to design specific effects for each key function, making the overall layout more beautiful and convenient.

Overall layout design:

//Display of calculation process
<view class="op">
{{sign}}{{num1}}{{op}}{{num2}}{{equals}}
</view>
//Display of obtained information
<view class="infor">
<text>{{numStr}}</text>
</view>
//Layout settings for each button
<view class="btns">
  <view>
    <view class="long" bindtap="clear">C</view>
    <view bindtap="del">Del</view>
    <view bindtap="op" data-op="÷">÷</view>
</view>
<view>
    <view bindtap="tri" data-tri="sin">sin</view>
    <view bindtap="tri" data-tri="cos">cos</view>
    <view bindtap="tri" data-tri="tan">tan</view>
    <view bindtap="tri" data-tri="ln">ln</view>
</view>
<view>
    <view bindtap="numBtn" data-num="{{item}}" wx:key="this" wx:for="789">{{item}}</view>
    <view bindtap="op" data-op="×">×</view>
</view>
<view>
  <view bindtap="numBtn"  data-num="{{item}}"  wx:key="this"  wx:for="456">{{item}}</view>
    <view bindtap="op"  data-op="-">-</view>
</view>
<view>
  <view bindtap="numBtn"   data-num="{{item}}"  wx:key="this"  wx:for="123">{{item}}</view>
    <view bindtap="op"  data-op="+">+</view>
</view>
<view>
    <view class="long"  bindtap="zero"  data-num="0">0</view>
    <view bindtap="point">.</view>
    <view bindtap="cal" >=</view>
</view>
</view>

Interface settings for each section：

/* pages/index/index.wxss */
.op{
  min-height: 200rpx;
  display: flex;
  flex-direction: column;
  text-align:right ;
  justify-content: flex-end;
  background-color:#eee;
  font-size: 48rpx;
}
.infor{
  text-align:right ;
  background-color:#eee;
  font-size: 100rpx;
}
.btns{
  border-right: solid 1px #ccc;
  border-left: solid 1px #ccc;
}
.btns > view{
  display: flex;
}
.btns > view > view{
  flex: 1;
  text-align: center;
  height: 175rpx;
  line-height: 175rpx;
  outline:solid 1px #ccc;
  margin: -1px 0 0 -1px;
}
.btns > view > view.long{
  flex: 2;
  margin-right: 2px;
  border-right: none;
}

Interface design results:

4.Computational Logic Design

After the design of the interface and keys, the functions of the calculator will be implemented.Programming and tuning the computational logic based on the database of the microsoft applet.
For the functioning of the calculator, the following points will be noted:

Displays the input information as a string and inserts the number after it when entering a number. Converts strings to floating point numbers for subsequent calculations.
Click on the corresponding symbols to perform the corresponding calculations, and continuous calculations are possible.
Calls to the sin, cos, tan, and log functions in the Math library are implemented to compute trigonometric and exponential results on the data.
Feedback on numerical errors in calculations such as division, tan, ln, etc. allows the user to correct the calculation process.

Calculation logic code display:

Data input and deletion:

//Digital input
  numBtn(e){
   var v = e.currentTarget.dataset.num;
   if(this.data.state=="1"){
     this.setData({
      num1:"",
      num2:"",
      op:"",
      numStr:"0",
      equals:"",
      state:"0"
     })
   };
   this.setData({
      numStr:this.data.numStr == "0" ?
     v : this.data.numStr + v,
   });
  },
 zero(e){
    var v = e.currentTarget.dataset.num;
    if(this.data.state=="1"){
      this.setData({
       num1:"",
       num2:"",
       op:"",
       numStr:0
      })
    };
      this.setData({
        numStr:this.data.numStr == "0" ?
        v : this.data.numStr + v
      });
  },
//Delete digit
  del(){
    this.setData({
      numStr:this.data.numStr.length == 1 ?
      "0" : this.data.numStr.substring(0,this.data.numStr.length-1)
    });
  },
//Decimal point input
  point(){
    this.setData({
      numStr:this.data.points == "1" ?
      this.data.numStr : this.data.numStr + ".",
      points:"1"
   });
  },

Calculation data result:

 op(e){
    var v = e.currentTarget.dataset.op;
    if((this.data.time=="1")&&(this.data.numStr != "0")){
      var rs=0;
      var v1 = parseFloat(this.data.num1);
      var v2 = parseFloat(this.data.numStr);
      switch (this.data.op) {
        case "+":
          rs=v1+v2;
          break
       case"-":
       rs=v1-v2;
       break
       case"×":
       rs=v1*v2;
       break
       case"÷":
       if(v2==0){
         wx.showToast({
           title: '数学错误',
           icon:'error'
         });
       }
       rs=v1/v2;
       break
        default:
          break;
      }
      this.setData({
        num1:rs,
        op:v,
        num2:"",
        numStr:"0"
      })
      return;
    }
    this.setData({
      op:v,
      num1:this.data.numStr,
      numStr:"0",
      points:"0",
      time:"1"
    })
  },
 tri(e){
    if(this.data.state=="1"){
      return
    };
    var v = e.currentTarget.dataset.tri;
    var v1 = parseFloat(this.data.numStr);
    var rs =0;
    switch (v) {
      case "sin":
    rs=Math.sin(v1*(Math.PI/180));
        break
     case"cos":
     rs=Math.cos(v1*(Math.PI/180));
     break
     case"tan": 
     if(v1%180 != 0&&v1%90==0){
      wx.showToast({
        title: '数学错误',
        icon:'error',
      });
      return
    }
     rs=Math.tan(v1*(Math.PI/180));
     break
     case"ln":
     if(v1 <= 0){
       wx.showToast({
         title: '数学错误',
         icon:'error',
       });
       return
     }
     rs=Math.log(v1);
     break
      default:
        break;
    }
    this.setData({
      sign:v,
      num1:v1,
      numStr:rs.toFixed(3),
      equals:"=",
      state:"1"
    })
  }
  cal(){
    if(!this.data.num1 || !this.data.numStr ||!this.data.op ){
      wx.showToast({
        title: '计算条件不完整',icon:'error'
      });
      return;
    };
    if(this.data.state=="1"){
      return;
    };
  var rs=0;
   var v1 = parseFloat(this.data.num1);
   var v2 = parseFloat(this.data.numStr);
   switch (this.data.op) {
     case "+":
       rs=v1+v2;
       break
    case"-":
    rs=v1-v2;
    break
    case"×":
    rs=v1*v2;
    break
    case"÷":
    if(v2==0){
      wx.showToast({
        title: '数学错误',
        icon:'error'
      });
    }
    rs=v1/v2;
    break
     default:
       break;
   }
   this.setData({
     state:"1",
    num2 : this.data.numStr,
    numStr:rs,
    points:"0",
    equals:"=",
    time:"0"
   })
  },

Clear and initialize:

 data: {
    points:"0",
    state:"0",
    time:"0",
    num1:"",
    num2:"",
    numStr:"0",
    sign:"",
    op:"",
    equals:"",
    pai:3.14,
    tri:""
  },
  clear(){
    this.setData({
      points:"0",
      state:"0",
      time:"0",
      num1:"",
      num2:"",
      numStr:"0",
      sign:"",
      op:"",
      equals:"",
      tri:""
    });
  },

Results Display:

From the results, it can be clearly seen that the input data, addition, subtraction, multiplication, division, clearing, as well as the implementation of functions such as trigonometric and exponential functions.

Ⅳ. Summary

From the simple calculator project, I learned a lot about software project design and implementation, including pre project requirements analysis, functional planning, software development, testing, optimization, and modification. I improved my ability to collect information and learn independently, learned the basic knowledge of software design, and learned about interface visualization, front-end and back-end integration, etc. This also gave me a better understanding of the use of tools such as Github and CSDN, and enabled me to better summarize and design software. I will also delve deeper into the knowledge of software design.