目录
5.Description Of Problem-Solving Ideas
6.Design And Implementation Process
1.Introduction
This blog mainly contains a simple visual calculator that I designed using wechat developer tools. It can realize the basic addition, subtraction, multiplication and division of four operations and some basic trigonometric function calculation. In the following introduction there is a visual demonstration of the small program, as well as the design process and detailed code of each part.
2.Basic Information
| The Link Your Class | https:https://bbs.csdn.net/forums/ssynkqtd-04 |
|---|---|
| The Link of Requirement of This Assignment | https:https://bbs.csdn.net/topics/617332156 |
| The Aim of This Assignment | Create a calculator with a visual interface. |
| MU STU ID and FZU STU ID | 21126160(MU)/832101311(FZU) |
Link to the finished project code：https://github.com/luckyLucy999/calculator1/tree/index.wxss
3.General display
The picture above is the development interface of a visual calculator using wechat developer tools.
The above dynamic diagram shows the function of analog calculator to achieve addition, subtraction, multiplication, division, trigonometric functions, and regression.
4.PSP Table
| Personal Software Process Stages | Estimated Time（minutes） | Actual Time（minutes） |
| Planning | 45 | 50 |
| • Estimate | 45 | 50 |
| Development | 355 | 445 |
| • Analysis | 30 | 35 |
| • Design Spec | 30 | 20 |
| • Design Review | 25 | 30 |
| • Coding Standard | 40 | 25 |
| • Design | 40 | 60 |
| • Coding | 100 | 155 |
| • Code Review | 50 | 70 |
| • Test | 40 | 50 |
| Reporting | 200 | 158 |
| • Test Repor | 80 | 88 |
| • Size Measurement | 50 | 30 |
| • Postmortem & Process Improvement Plan | 70 | 40 |
| Sum | 600 | 653 |
5.Description Of Problem-Solving Ideas
①Define project requirements
In this project, first clear the project calculator needs to achieve the function: to achieve addition, subtraction, multiplication and division of four operations, decimal points and trigonometric functions of some basic calculation functions.
②How To Achieve
After reading a lot of materials and learning through Bilibili, Jianshu, CSDN and other related materials, I decided to use the wechat developer tools and use the JavaScript of wechat mini program to write this project. Since it is the first time for me to contact this kind of project, I have learned a lot of materials to complete this project.
6.Design And Implementation Process
The design of the calculator is divided into the following parts:
app.json、wxml、wxss、js
①app.json file writing
This is a configuration file. pages is the page path of the configuration applet; window is the window style that configures the applet. The app.json file can realize the Settings of the page, window and other functions of the small program, and configure the debugging and permissions of the small program.
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "CALCULATOR",
"navigationBarTextStyle":"black"
},
"debug":true
}
②wxml file writing
This is a file that is mainly used to write the structural part of the small program page. This file is used to create the buttons for the calculator interface and to design the buttons' styles, values, and touch event handlers. With these buttons and logic, the function of a simple calculator is realized.
<view class='button'>
<view class='showkindow'>{{screenNum}}</view>
<view capture-bind:touchstart="compute">
<view>
<button data-val='clear' hover-class='shadow' class='bottomw bottom1'>AC</button>
<button data-val='back' hover-class='shadow' class='bottomw bottom1'>DEL</button>
<button data-val='#' hover-class='shadow' class='bottomw bottom1'>#</button>
<button data-val='÷' hover-class='shadow' class='bottomw bottom'>÷</button>
</view>
<view>
<button data-val='sin' hover-class='shadow' class='bottomw bottom1'>sin</button>
<button data-val='cos' hover-class='shadow' class='bottomw bottom1'>cos</button>
<button data-val='tan' hover-class='shadow' class='bottomw bottom1'>tan</button>
<button data-val='±' hover-class='shadow' class='bottomw bottom'>±</button>
</view>
<view>
<button data-val='7' hover-class='shadow' class='bottomw'>7</button>
<button data-val='8' hover-class='shadow' class='bottomw'>8</button>
<button data-val='9' hover-class='shadow' class='bottomw'>9</button>
<button data-val='x' hover-class='shadow' class='bottomw bottom'>x</button>
</view>
<view>
<button data-val='4' hover-class='shadow' class='bottomw'>4</button>
<button data-val='5' hover-class='shadow' class='bottomw'>5</button>
<button data-val='6' hover-class='shadow' class='bottomw'>6</button>
<button data-val='-' hover-class='shadow' class='bottomw bottom'>-</button>
</view>
<view>
<button data-val='1' hover-class='shadow' class='bottomw'>1</button>
<button data-val='2' hover-class='shadow' class='bottomw'>2</button>
<button data-val='3' hover-class='shadow' class='bottomw'>3</button>
<button data-val='+' hover-class='shadow' class='bottomw bottom'>+</button>
</view>
<view>
<button data-val='1' hover-class='shadow' class='bottomw bottom2'>0</button>
<button data-val='.' hover-class='shadow' class='bottomw'>.</button>
<button data-val='=' hover-class='shadow' class='bottomw bottom'>=</button>
</view>
</view>
</view>
③wxss file writing
This file is used to write small program page style file. This file allows you to create beautiful styles for your applet pages. Set the shape and color of the key, the color of the background and the color and font of the numeric text, and the shadow Settings after the button is pressed.
.button{
width:100%;
height: 700px;
background:black;
}
.showkindow{
color: #fff;
width: 100%;
height:125px;
font-size: 50px;
text-align:right;
}
.bottomw{
width: 90px;
height:90px;
display:block;
float:left;
border-radius: 50%;
line-height: 90px;
text-align: center;
margin-left: 3px;
margin-top: 5px;
color:black;
background:white;
font-weight: bold;
font-size: 30px;
}
.bottom{
background:lightsalmon;
}
.bottom1{
background: #969494;
color:#000;
}
.bottom2{
width: 180px;
border-radius: 40px;
}
.shadow{
background:rgba(0, 0, 0, 0.075);
}④js file writing
This file is a scripting language for writing small program logic, and can manipulate page elements, manipulate data, and so on. Through the writing of this file to achieve a simple calculator function, to achieve addition, subtraction, multiplication and division of four operations and trigonometric functions and other basic calculations.
//index.js
const app = getApp()
Page({
/**
* Initial data for the page
*/
data: {
screenNum: 0,//The number displayed on the screen
currentNum: '',//The number of current inputs
storage: 0,//Stored number
operator: '',//operator
off: false,
},
compute: function (e) {
var btn_num = e.target.dataset.val;
var obj = this;
if (!isNaN(btn_num)) {
if (obj.data.off == true) {
obj.data.currentNum = ''
obj.data.off = false;
}
obj.data.currentNum += btn_num
obj.data.currentNum = Number(obj.data.currentNum);
obj.data.currentNum = obj.data.currentNum.toString();
} else {
switch (btn_num) {
case '+':
case '-':
case 'x':
case '÷':
case '=':
// Stores the number on the current screen and the current operator to a variable
if (obj.data.storage == 0) {
obj.data.storage = obj.data.currentNum;
obj.data.operator = btn_num;
} else {
if (obj.data.off != true) {
if (obj.data.operator == '+') {
obj.data.currentNum = Number(obj.data.storage) + Number(obj.data.currentNum)
} else if (obj.data.operator == '-') {
obj.data.currentNum = Number(obj.data.storage) - Number(obj.data.currentNum)
} else if (obj.data.operator == 'x') {
obj.data.currentNum = Number(obj.data.storage) * Number(obj.data.currentNum)
} else if (obj.data.operator == '÷') {
obj.data.currentNum = Number(obj.data.storage) / Number(obj.data.currentNum)
}
}
obj.data.storage = obj.data.currentNum;
obj.data.operator = btn_num;
}
obj.data.off = true;
break;
case 'clear':
obj.data.storage = 0;
obj.data.currentNum = '0';
obj.data.operator = '';
break;
case 'back':
obj.data.currentNum = obj.data.currentNum.slice(0, -1);
if (obj.data.currentNum == '') {
obj.data.currentNum = '0';
}
break;
case '.':
if (obj.data.currentNum.indexOf('.') == -1) { // Check whether.
obj.data.currentNum += btn_num
}
break;
case 'sin':
obj.data.currentNum = Math.sin(parseFloat(obj.data.currentNum)).toString();
break;
case 'cos':
obj.data.currentNum = Math.cos(parseFloat(obj.data.currentNum)).toString();
break;
case 'tan':
obj.data.currentNum = Math.tan(parseFloat(obj.data.currentNum)).toString();
break;
}
}
obj.setData({
screenNum: obj.data.currentNum
})
},
})
The following diagram is a flowchart for designing a calculator.
7.summary
This project aims to use wechat developer tools and JavaScript to create a visual calculator and implement basic addition, subtraction, multiplication, division and other advanced functions such as trigonometric functions. Through this project, I learned a lot about project implementation and how to design and program on wechat developer tools. The process of making the calculator let me understand the development process of wechat small program, including creating projects, configuring pages, writing logic code and so on. I learned how to use wechat developer tools for project debugging and release. And master the small program page componentized development and the use of common components. I learned to write the page structure through WXML, set the page style through WXSS, and write the page logic through JS. In the course of this project, I encountered various problems, such as abnormal page display, logic errors, etc. By reviewing documentation, searching for solutions, and debugging code, I learned how to quickly locate and resolve problems. This has improved my problem-solving skills.
In general, by making calculator projects through wechat developer tools, I not only gained practical experience in wechat mini program development, but also improved my programming ability and problem solving ability. These gains will be helpful to my future technology development and project implementation.
1370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
