Apprenez à créer un petit programme de calcul open source

Il s'agit d'un petit projet de pratique pour novices (adapté sur la base de la démo rapide de WeChat) et réalisé une calculatrice. Il possède une interface utilisateur de base, des sauts de base et une logique js simple, ce qui le rend très approprié pour les débutants.

Lire le code des autres, c'est consolider vos propres compétences en programmation.

Connaissances pertinentes liées au développement d'applets WeChat :

1. Mise en page CSS Flexbox

2. Liaison d'événement, saut de page

3. Paramètres globaux de l'application

4. Comment utiliser les fichiers wxml, wxsss, js, json

5. Comment utiliser les composants de vue, de texte, d'icône et de bouton

6. , wx.setStorageSync, liaison de données et autres API

Configuration

1 Cloner le dépôt

$ git clone github.com/dunizb/wxapp-sCalc.git

2. Importer dans les outils de développement Wechat

.

Importez le projet dans les outils de développement WeChat

Note de l'éditeur : il y a deux points à noter dans le code source -

1 L'auteur n'a pas lié chaque bouton de la calculatrice pour définir un événement. et liez-le à la fonction clinBtn, et utilisez id et e.target.id pour déterminer sur quel bouton l'utilisateur a cliqué. L'auteur a directement utilisé le numéro d'écran du bouton calculé pour créer l'identifiant, qui est simple et direct <🎜. >

2. Il y a un effet de surbrillance rouge lorsque vous cliquez sur le bouton. Cet effet est obtenu grâce au CSS :

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

Une simple ligne de code améliore beaucoup l'expérience UE. Ça vaut la peine d'apprendre ~

De plus, j'aimerais partager un autre mini-jeu programme Bien que WeChat interdise officiellement la mise en rayon des mini-jeux, qui peut empêcher les apprenants de le faire. L'API de dessin et l'API d'animation dans la documentation de l'applet WeChat peuvent également être préparées pour les futurs jeux.

github.com/natee/wxapp-2048

Il s'agit d'un jeu 2048 Si vous aimez les démos de style calculatrice, vous aimerez peut-être aussi celle-ci.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!