Home WeChat Applet Mini Program Development Teach you how to make an open source small program calculator

Teach you how to make an open source small program calculator

Apr 26, 2017 pm 03:32 PM

This is a small program novice practice project (adapted based on WeChat quick demo) and made a calculator. It has a basic UI, basic jumps and simple js logic, making it very suitable for beginners to read.

Reading other people’s code is to consolidate your own programming skills.

Related knowledge related to WeChat applet development:

1, CSS Flexbox layout

2, event binding, page jump

3, Page, window, App global settings

4. How to use wxml, wxsss, js, json files

5. How to use view, text, icon, button components

6.navigate , wx.setStorageSync, data binding and other API

Setup

1、Clone the repo

$ git clone github.com/dunizb/wxapp-sCalc.git
Copy after login

2、Import to Wechat DEV Tools

Import the project into the WeChat developer tools

Editor's note: There are two points worth noting in the source code -

1, the author did not bind one to each calculator button The event function is uniformly bound to the blinkBtn function, and the id and e.target.id are used to determine which button the user clicked, and the author directly used the screen display number of the calculated button to make the id, which is simple and direct

2. When you click the button, there is a red highlight effect. This effect is achieved through css:

.item:active {
background-color: #ff0000;
}
Copy after login

A simple line of code improves the UE experience a lot. Worth learning~

In addition, I would like to share another mini program game. Although WeChat officially prohibits mini games from being put on the shelves, who can stop learners. The drawing API and animation API in the WeChat applet documentation may also be prepared for future games.

github.com/natee/wxapp-2048

This is a 2048 game. If you like calculator-style demos, you may also like this one.

The above is the detailed content of Teach you how to make an open source small program calculator. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What key is ac on the calculator? What key is ac on the calculator? Feb 24, 2023 am 10:19 AM

The ac key on the calculator is the "all clear" key. The full English name of ac is "All Clear", which means "all clear key"; pressing the ac key means clearing the values ​​in all registers; during number input, the first press Pressing the ac key will clear all values ​​except the memory contents.

What is e in the calculator What is e in the calculator Oct 19, 2022 am 11:23 AM

The e in the calculator represents the power of 10, which means the exponent with base 10. For example, 1.99714E13 is equal to 19971400000000; expressing a number in the form of a multiplied by the nth power of 10 is called scientific notation. Notation: When we want to mark or operate something larger or smaller with a large number of digits, we can use scientific notation to avoid wasting a lot of space and time.

Teach you how to open the win10 calculator Teach you how to open the win10 calculator Jul 12, 2023 pm 11:21 PM

The win10 system has many powerful functions, which attract many netizens to download, install and use it. There are also many practical gadgets, such as the win10 calculator tool. Some netizens still don’t know how to open the Win10 calculator. Let me teach you how to open the Win10 calculator. Method 1: Search in the Start menu 1. On the Windows 10 system desktop, click the "Start/Calculator" menu item. 2. You can open the calculator window of Windows 10. Method 2: Open Cortana Search 1. On the Windows 10 desktop, click the "Cortana Search" icon in the lower left corner of the taskbar. 2. Enter the keyword "calculator" in the pop-up menu to search, and click the calculator menu item in the search results.

What is a calculator without storage function? What is a calculator without storage function? Dec 29, 2020 am 10:59 AM

Calculator without storage function refers to scientific calculator; scientific calculator is a type of electronic calculator that can perform operations such as exponentiation, square root, exponent, logarithm, trigonometric function, statistics, etc., also known as Function calculator; a calculator generally consists of a calculator, a controller, a memory, a keyboard, a display, a power supply, and some optional peripherals and electronic accessories.

An efficient Fibonacci sequence calculator written in PHP An efficient Fibonacci sequence calculator written in PHP Mar 21, 2024 am 10:06 AM

Efficient Fibonacci sequence calculator: PHP implementation of Fibonacci sequence is a very classic mathematical problem. The rule is that each number is equal to the sum of the previous two numbers, that is, F(n)=F(n -1)+F(n-2), where F(0)=0 and F(1)=1. When calculating the Fibonacci sequence, it can be implemented recursively, but performance problems will occur as the value increases. Therefore, this article will introduce how to write an efficient Fibonacci using PHP

How to implement a simple calculator function using JavaScript? How to implement a simple calculator function using JavaScript? Oct 27, 2023 pm 02:51 PM

How to implement a simple calculator function using JavaScript? Calculator is one of the commonly used tools in our daily life. It can be used to perform simple mathematical operations. Today, we will use JavaScript to implement a simple calculator function. In this article, I'll show you how to write code in JavaScript to implement basic math operations and calculator interfaces. First, we need to create an HTML file that contains a text for displaying the results of the operation.

How to convert currency on Mac system calculator - How to convert currency on Mac system calculator How to convert currency on Mac system calculator - How to convert currency on Mac system calculator Mar 18, 2024 pm 03:58 PM

Friends, do you know how to convert currency on Mac system calculator? Today I will explain how to convert currency on Mac system calculator. If you are interested, please come and take a look with me. I hope it can help you. Step 1: Open the Mac system calculator, click Convert on the menu bar. Step 2: In the Conversion menu, click Currency. Step 3: After selecting the currency to convert, click the Convert button.

What key is ac on the calculator? What key is ac on the calculator? Aug 18, 2023 am 09:48 AM

The "AC" key on the calculator means "All Clear". Pressing the AC key will clear all inputs and operations in the calculator and reset the calculator to its initial state, which is equivalent to restarting a calculation.

See all articles