Teach you how to make an open source small program calculator

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

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;
}

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!