Design of a calculator mini-program based on WeChat Developer Tools

The Link Your Class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/617332156
The Aim of This Assignment	complete the calculator with a visual interface
MU STU ID and FZU STU ID	21125341_832101123

目录

Ⅰ. Blog Introduction

Ⅱ. PSP Form: Outlining the Work

Ⅲ. Problem-Solving Approach: Critical Thinking and Information Retrieval

Ⅳ. Design and Implementation: Structural Blueprint and Functional Flow

Ⅴ. Code Insights: Key Code Examination and Conceptual Explanation

.js Part

Data Object (data):

Result and State Management:

Number Button Handling (numBtn Function):

Operator Button Handling (opBtn Function):

Trigonometric Button Handling (trigonometricBtn Function):

Decimal Point Button Handling (dotBtn Function):

Delete Button Handling (delBtn Function):

Reset Button Handling (resetBtn Function):

.wxml Part 

Result Display Section:

Buttons Section:

Notes:

.wxss Part 

Page Layout:

Button Styling: 

Result Section Styling:

Button Section Styling:

Button Hover Effect:

Ⅵ. Results Showcase: Visualizing Project Outcomes

Ⅶ. Assignment Summary: Comprehensive Reflection

---

Ⅰ. Blog Introduction

Welcome to my blog where I will be sharing the process and outcome of my recent project that primarily revolves around the WeChat Mini Program framework and the WeChat Developer Tools. This blog post aims to provide you with an insight into my project's journey. Good luck :) 

https://github.com/wILLsHOWyOU/MyWechatMiniPro

Ⅱ. PSP Form: Outlining the Work

Personal Software Process Stages	Estimated Time(minutes)	Actual Time(minutes)
Planning
• Estimate	30	40
Development
• Analysis	100	120
• Design Spec	40	45
• Design Review	30	35
• Coding Standard	20	15
• Design	60	70
• Coding	120	140
• Code Review	40	30
• Test	60	45
Reporting
• Test Repor	30	45
• Size Measurement	30	25
Sum	560	610

Ⅲ. Problem-Solving Approach: Critical Thinking and Information Retrieval

In delving into the intricacies of project requirements, I adopted a critical thinking perspective. It wasn't merely about considering what users expected; it was about a meticulous analysis of their actual needs.

• Project Background: User expectations for the calculator extended beyond basic arithmetic. I explored advanced functionalities, such as the need for trigonometric and exponential functions, ensuring the calculator's comprehensiveness from the user's standpoint.
• Critical Thinking Process: Through critical thinking, I contemplated the project's landscape. One potential hurdle was effectively implementing complex mathematical functions within a mini-program. This demanded not just coding proficiency but also considerations for user-friendly interface design and overall user experience.
• Information Gathering: Digging deep into user habits and expectations, I discovered that users wanted the calculator mini-program not just as a simple tool but as a practical utility capable of handling their intricate calculation needs. Additionally, by researching the advantages of WeChat mini-programs, I assured the soundness of the project choice, given the platform's offering of a swift, lightweight, and convenient user experience.
• Crafting Solutions: Based on these insights, my solution encompassed not only basic operations but also advanced mathematical functions like trigonometry and exponentiation. All of this was seamlessly integrated into a mini-program with a user-friendly interface to ensure users could effortlessly and efficiently utilize the calculator.
• Adapt and Improve: Throughout this process, my critical thinking wasn't confined to problem recognition; it manifested in the flexible adjustment of solutions. As the project progressed, continual adjustments and improvements were made to features, ensuring they truly met users' expectations and needs.

This section delves deep into the cognitive path of problem resolution, highlighting how thoughtful consideration of user requirements, critical thinking, and the implementation of advanced mathematical functionalities resulted in a comprehensive and user-friendly calculator mini-program.

Ⅳ. Design and Implementation: Structural Blueprint and Functional Flow

During the design and implementation phase, meticulous attention was given to the structure and functional flow of the calculator mini-program. Below are explanations for key segments of the provided code:

Structural Blueprint:

data: {
  num: '',        // Stores the current inputted number
  op: '',         // Stores the current operator
  triFunc: '',    // Stores the current trigonometric function (sin/cos/tan)
  expression: ''  // Stores the current expression
},
result: null,     // Stores the calculation result
isClear: false,   // Indicates whether the display needs to be cleared

The data object is utilized to store runtime states that the program needs to track, such as the current inputted number, operator, trigonometric function, and expression. result is used to store the calculation result, and isClear determines whether the display needs clearing. 

Functional Flow:

numBtn: function (e) {
  // Handles the number button click event
  // Updates the display and expression based on the clicked number
},

opBtn: function (e) {
  // Handles the operator button click event
  // Updates the display and expression based on the clicked operator and performs corresponding calculations
},

trigonometricBtn: function (e) {
  // Handles the trigonometric function button click event
  // Updates the display and performs corresponding calculations based on the clicked trigonometric function
},

dotBtn: function (e) {
  // Handles the decimal point button click event
  // Updates the display, ensuring the decimal point appears only once
},

delBtn: function (e) {
  // Handles the delete button click event
  // Deletes the last digit
},

resetBtn: function (e) {
  // Handles the reset button click event
  // Resets all states and clears the display
},

These functions collectively manage user interactions, encompassing numeric input, operator clicks, trigonometric function button clicks, decimal point input, last-digit deletion, and complete calculator reset. Each operation updates the display and expression accordingly, facilitating diverse calculations based on user input.

This code segment provides the foundation for a straightforward yet powerful calculator mini-program, emphasizing both intuitive interface design and maintainable code. Users can easily perform a variety of calculations with this designed interaction.

Ⅴ. Code Insights: Key Code Examination and Conceptual Explanation

In this section, we'll delve into the key aspects of the .js/.wxml/.wxss code that powers the calculator mini-program. Understanding the design decisions, implementation logic, and underlying concepts is crucial for gaining insights into how the calculator functions.

.js Part

• Data Object (data):

The data object serves as the central repository for the program's state during runtime:

data: {
  num: '',
  op: '',
  triFunc: '',
  expression: ''
}

Here:

num: Stores the current inputted number.

op: Keeps track of the current operator.

triFunc: Manages the selected trigonometric function.

expression: Holds the overall expression being constructed.

• Result and State Management:

result: null,
isClear: false,

result: A variable to store the calculated result.

isClear: A flag indicating whether the display should be cleared.

• Number Button Handling (numBtn Function):

numBtn: function (e) {
  var num = e.target.dataset.val;
  if (this.data.num === '0' || this.isClear) {
    this.setData({
      num: num,
      expression: num
    });
    this.isClear = false;
  } else {
    this.setData({
      num: this.data.num + num,
      expression: this.data.expression + num
    });
  }
},

 The numBtn function handles the click event of number buttons. It checks if the current display is '0' or needs clearing, updating the display and expression accordingly.

• Operator Button Handling (opBtn Function):

opBtn: function (e) {
  var op = this.data.op;
  var num = Number(this.data.num);
  var expression = this.data.expression;
  if (this.isClear) {
    expression = expression.substring(0, expression.length - 1);
  }
  this.setData({
    op: e.target.dataset.val,
    expression: expression + (e.target.dataset.val === '=' ? '' : ' ' + e.target.dataset.val + ' ')
  });
  this.isClear = true;
  if (this.result === null) {
    this.result = num;
    return;
  }
  // Perform calculations based on the chosen operator
  // (e.g., addition, subtraction, multiplication, division, etc.)
  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;
  } else if (op === '%') {
    this.result = this.result / 100;
  } else if (op === '^') {
    this.result = Math.pow(this.result, num);
  }
  // If the equal sign is pressed, finalize the result and update the display
  if (e.target.dataset.val === '=') {
    this.result = parseFloat(this.result.toFixed(6));  // Round to 6 decimal places
    this.setData({
      num: this.result + '',
      expression: expression + '=' + this.result
    });
  }
},

The opBtn function manages operator button clicks. It updates the display and expression, performing calculations based on the chosen operator.

• Trigonometric Button Handling (trigonometricBtn Function):

trigonometricBtn: function (e) {
  var trigFunction = e.target.dataset.val;
  var angle = Number(this.data.num);
  var angleInRadians = angle * (Math.PI / 180);
  var result;
  // Perform trigonometric calculations based on the selected function
  if (trigFunction === 'sin') {
    result = Math.sin(angleInRadians);
  } else if (trigFunction === 'cos') {
    result = Math.cos(angleInRadians);
  } else if (trigFunction === 'tan') {
    result = Math.tan(angleInRadians);
  }
  // Update the display with the result, rounding to 6 decimal places
  this.setData({ num: parseFloat(result.toFixed(6)) + '', isClear: true });
},

The trigonometricBtn function deals with trigonometric button clicks. It updates the display and performs calculations based on the selected trigonometric function.  

• Decimal Point Button Handling (dotBtn Function):

dotBtn: function (e) {
  if (this.isClear) {
    this.setData({ num: '0.' })
    this.isClear = false
    return
  }
  // Check if the current number already contains a decimal point
  if (this.data.num.indexOf('.') >= 0) {
    return
  }
  this.setData({ num: this.data.num + '.' })
},

The dotBtn function handles the click event of the decimal point button. It ensures that a decimal point is only added if the current number does not already contain one.

• Delete Button Handling (delBtn Function):

delBtn: function (e) {
  var num = this.data.num.substr(0, this.data.num.length - 1)
  this.setData({ num: num === '' ? '0' : num })
},

The delBtn function manages the delete button click event. It removes the last digit from the current number. 

• Reset Button Handling (resetBtn Function):

resetBtn: function (e) {
  this.result = null
  this.isClear = false
  this.setData({ num: '0', op: '', expression: '' })
},

The resetBtn function handles the reset button click event. It resets the calculator state, clearing the result, setting the display to '0', and resetting the expression. 

.wxml Part 

• Result Display Section:

<view class="result">
  <view class="result-num">{{num}}</view>
  <view class="result-op">{{op}}</view>
</view>

This part of the code defines the result display section, showcasing the current number (num) and operator (op).

• Buttons Section:

<view class="btns">
  <!-- Row 1 -->
  <view>
    <view hover-class="bg" bindtap="trigonometricBtn" data-val="sin">sin</view>
    <view hover-class="bg" bindtap="trigonometricBtn" data-val="cos">cos</view>
    <view hover-class="bg" bindtap="trigonometricBtn" data-val="tan">tan</view>
    <view hover-class="bg" bindtap="opBtn" data-val="^">^</view>
  </view>
  <!-- Row 2 -->
  <view>
    <view hover-class="bg" bindtap="resetBtn">C</view>
    <view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
    <view hover-class="bg" bindtap="opBtn" data-val="×">×</view>
    <view hover-class="bg" bindtap="delBtn">←</view>
  </view>
  <!-- Rows 3-6 -->
  <!-- ... (Numeric and Operator Buttons) ... -->
</view>

This part of the code defines the buttons section, encompassing numeric buttons, operator buttons, and functional buttons. Each row is wrapped in a <view> element, containing a set of buttons.

hover-class="bg": Adds a background color effect when users touch the button.

bindtap: Binds the button click event to the corresponding handling function, such as trigonometricBtn, resetBtn, opBtn, etc.

data-val: Sets a custom data value for the button, used to identify the button in the click event.

• Notes:

Event Handling Functions (bindtap): These functions should be defined in the corresponding .js file to handle button click events.

Data Binding ({{}}): Data binding is used to display logic layer data in the view layer.

.wxss Part 

• Page Layout:

/* page/index/index.wxss */
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Arranged vertically */
}

This sets up the page layout using flexbox, arranging elements in a column direction.

display: flex;: Enables flexbox layout.

flex-direction: column;: Arranges items vertically.

height: 100%;: Ensures the page takes up the full height of its container.

• Button Styling: 

.btns > view:last-child > view:last-child {
  flex: 50%;
}

Styles the last view within the .btns container to take up 50% of the available space.

This could be useful for adjusting the size or layout of specific buttons.

• Result Section Styling:

.result {
  flex: 1;
  background: #cfcfc4;
  position: relative;
}

.result-num {
  position: absolute;
  bottom: 5vh;
  right: 3vw;
  font-size: 27pt;
}

.result-op {
  position: absolute;
  bottom: 1vh;
  right: 3vw;
  font-size: 15pt;
}

Styles the result section, making it flexibly take up available space.

Sets a light background color (#cfcfc4) for the result section.

Styles the position and font size of the numeric result (result-num) and operator result (result-op).

• Button Section Styling:

.btns {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 17pt;
  border-top: 1rpx solid #cfcfc4;
  border-left: 1rpx solid #cfcfc4;
}

.btns > view {
  flex: 1;
  display: flex;
  background-color: #333333;
}

.btns > view > view {
  flex-basis: 25%;
  border-right: 1rpx solid #cfcfc4;
  border-bottom: 1rpx solid #cfcfc4;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cfcfc4;
  /* The next two lines center the content */
}

Styles the button section.

Uses flexbox to create a column layout with buttons.

Defines the appearance of each button in terms of size, borders, and background color.

• Button Hover Effect:

.bg {
  background: #272727;
}

Defines a background color (#272727) for the hover effect on buttons.

This class (bg) is applied to buttons to change their background color when hovered.

Ⅵ. Results Showcase: Visualizing Project Outcomes

For a comprehensive evaluation of the developed calculator WeChat Mini Program, I conducted thorough testing on my mobile device, capturing real-time demonstrations to visually showcase its functionalities. The application seamlessly executes basic arithmetic operations, demonstrating its prowess in addition(+), subtraction(-), multiplication(×), and division(÷). Moreover, the calculator excels in trigonometric computations, accurately computing sine, cosine, and tangent functions. The practical application of the Mini Program extends to handling exponentiation, showcasing its ability to efficiently compute power functions(^). The recorded demonstrations serve as a tangible testament to the precision and versatility embedded in the calculator's design and implementation.

Ⅶ. Assignment Summary: Comprehensive Reflection

In this comprehensive reflection, I delve into the origins, design, implementation, and presentation phases of the WeChat Mini Program Calculator project. Guided by critical thinking, I scrutinized the essence of the problem, laying a robust foundation for solution development. During the design and implementation phases, meticulous organization of code structures and the creation of functional flowcharts ensured logical clarity and maintainability. Through detailed code descriptions, I elucidated the core concepts of the project, providing readers with a profound understanding. Showcasing the outcomes, I vividly demonstrated the calculator Mini Program's outstanding performance in basic arithmetic, trigonometric functions, and exponentiation through screenshots and live demonstrations. Finally, in summarizing the entire task, I reflect on the challenges, gains, and potential improvements, leaving behind valuable insights for personal and academic growth.