WeChat applet implements calculator function
|
This article shares the specific code for the WeChat applet to implement the calculator function for your reference. The specific content is as follows 1. WeChat Mini Program Development Tool Interface
2. Directory StructureWhen you first enter the page, its directory structure is as follows:
3. Issues that need attention(1) All newly added page files need to be configured in app.json, otherwise the page will report an error.
(2) Working Principle Adding the event bindtap="btnClick" id="{{n9}}" in <view></view> is equivalent to a click event. In the js code, you can get data through this.data.n9. The definitions of these data are in js
By filling in the id in <view id="{{btn_a}}"><view>, in the specific function, event.target.id is used to determine the id and make a distinction. You can click on different tags and then perform business logic. If you need to access the data, you can do so through this.data.xx. Calculator wxml page
<view class="content">
<view class="xianshi">{{screenNum}}</view>
<view class="anniu">
<view class="item blue" bindtap="btnClick" id="{{n9}}">9</view>
<view class="item blue" bindtap="btnClick" id="{{n8}}">8</view>
<view class="item blue" bindtap="btnClick" id="{{n7}}">7</view>
<view class="item blue" bindtap="btnClick" id="{{na}}">+</view>
</view>
<view class="anniu">
<view class="item blue" bindtap="btnClick" id="{{n6}}">6</view>
<view class="item blue" bindtap="btnClick" id="{{n5}}">5</view>
<view class="item blue" bindtap="btnClick" id="{{n4}}">4</view>
<view class="item blue" bindtap="btnClick" id="{{nb}}">-</view>
</view>
<view class="anniu">
<view class="item blue" bindtap="btnClick" id="{{n3}}">3</view>
<view class="item blue" bindtap="btnClick" id="{{n2}}">2</view>
<view class="item blue" bindtap="btnClick" id="{{n1}}">1</view>
<view class="item blue" bindtap="btnClick" id="{{nc}}">*</view>
</view>
<view class="anniu">
<view class="item blue" bindtap="btnClick" id="{{n0}}">0</view>
<view class="item blue" bindtap="btnClear">AC</view>
<view class="item blue" bindtap="btnJs">=</view>
<view class="item blue" bindtap="btnClick" id="{{nd}}">/</view>
</view>
</view>
// pages/cal/cal.js
Page({
/**
* Initial data of the page */
data: {
n0: 0,
n1: 1,
n2: 2,
n3: 3,
n4: 4,
n5: 5,
n6: 6,
n7: 7,
n8: 8,
n9: 9,
na: '+',
nb: '-',
nc: '*',
nd: '/',
screenNum: 0,
screenStr: 0,
is_num:1
},
/**
* Life cycle function--listen for page loading*/
onLoad: function (options) {
},
/**
* Life cycle function - listen for the completion of the initial rendering of the page*/
onReady: function () {
},
/**
* Life cycle function--monitor page display*/
onShow: function () {
},
/**
* Life cycle function--listen for page hiding*/
onHide: function () {
},
/**
* Life cycle function--monitor page uninstallation*/
onUnload: function () {
},
/**
* Page related event processing function - listen to user pull-down action */
onPullDownRefresh: function () {
},
/**
* The function that handles the bottoming event on the page*/
onReachBottom: function () {
},
/**
* User clicks on the upper right corner to share*/
onShareAppMessage: function () {
},
btnClick:function(event){
//console.log('The key you pressed is '+event.target.id);
//console.log('last time' + this.data.is_num);
var op='';
var data=0;
var last_is_num = this.data.is_num;
//What is the input this timeif (event.target.id == '9' || event.target.id == '8' || event.target.id == '7' || event.target.id == '6' || event.target.id == '5' || event.target.id == '4' || event.target.id == '3' || event.target.id == '2' || event.target.id == '1' || event.target.id == '0') {
data = event.target.id;
this.setData({ is_num: 1 });
}
if (event.target.id == '+' || event.target.id == '-' || event.target.id == '*' || event.target.id == '/') {
op = event.target.id;
this.setData({ is_num: 0 });
}
if (last_is_num==1){
//If the last time was a number if (op == ''){
//This time it's a number if (this.data.screenNum!=0){
this.setData({ screenNum: this.data.screenNum + data });
this.setData({ screenStr: this.data.screenStr + data });
}else{
this.setData({ screenNum: data});
this.setData({ screenStr: data });
}
}else{
this.setData({ screenNum: this.data.screenNum + op });
this.setData({ screenStr: this.data.screenStr +',' +op+',' });
}
}else{
//Last time it was not a number if (data != 0) {
//This time it's a number this.setData({ screenNum: this.data.screenNum + data });
this.setData({ screenStr: this.data.screenStr + data });
} else {
return;
}
}
//console.log(op+'aaaaa'+data);
//console.log('Now is '+this.data.is_num);
//console.log('screenNum' + this.data.screenNum);
//console.log(this.data.screenStr);
},
btnJs:function(){
console.log(this.data.screenNum);
console.log(this.data.screenStr);
var result=0;
var strs = new Array(); //define an array strs = this.data.screenStr.split(","); //character segmentation for (var i = 0; i < strs.length; i++) {
//console.log(strs[i] + i); //character output after segmentation if (strs[i]=='+'){
result = parseInt(strs[i - 1]) + parseInt(strs[i+1]);
}
if (strs[i] == '-') {
result = strs[i - 1] - strs[i + 1];
}
if (strs[i] == '*') {
result = strs[i - 1] * strs[i + 1];
}
if (strs[i] == '/') {
result = strs[i - 1] / strs[i + 1];
}
}
console.log('result:'+result);
this.setData({ screenNum: result});
this.setData({ screenStr: result });
},
btnClear:function(){
//Restore the marker to its default state this.setData({ screenNum: 0 });
this.setData({ screenStr: 0 });
this.setData({ is_num: 1 });
}
})In summary, the relative unit rpx is introduced in the layout of the mini program, and it is necessary to learn the flexible box flex layout. As for the js part, it is somewhat similar to vue.js, both of which bind data and simplify js's DOM operations. These two points still need to be looked at again. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Analysis of MySQL duplicate index and redundant index examples
>>: How to clean up the disk space occupied by Docker
Recommend
Analysis of MySql index usage strategy
MySql Index Index advantages 1. You can ensure th...
How to allow remote access to open ports in Linux
1. Modify the firewall configuration file # vi /e...
Detailed explanation of the new background properties in CSS3
Previously, we knew several attributes of backgro...
Solve the problem of forgetting password in MySQL 5.7 under Linux
1. Problem Forgot password for mysql5.7 under lin...
Docker implements MariaDB sub-library and sub-table and read-write separation functions
Table of contents 1. Introduction 2. Environmenta...
Idea packaged into war package deployed to tomcat and access path issues (illustration and text)
The most important thing for idea to package a we...
vue-cli introduction and installation
Table of contents 1. Introduction 2. Introduction...
3 ways to add links to HTML select tags
The first one : Copy code The code is as follows: ...
Vue button permission control introduction
Table of contents 1. Steps 1. Define buttom permi...
JavaScript canvas to achieve scratch lottery example
This article shares the specific code of JavaScri...
MYSQL implements the continuous sign-in function and starts from the beginning after one day of sign-in (sql statement)
1. Create a test table CREATE TABLE `testsign` ( ...
JavaScript implements mouse drag to adjust div size
This article shares the specific code of JavaScri...
Detailed explanation of the usage and differences of MySQL views and indexes
MySQL Views Simply put, a MySQL view is a shortcu...
Solution to the problem that the MySQL configuration file cannot be modified (Win10)
Record the problems you solve for others. Problem...
CSS uses BEM naming convention practice
When you see a class, what information do you wan...