Comment développer une applet de calculatrice

Cet article explique comment utiliser l'applet WeChat pour développer une applet de calculatrice. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile aux amis qui apprennent le développement d'applets WeChat !

Résumé : Le développement d'applets WeChat n'est en fait pas difficile. Avant de le maîtriser, je ne savais pas à quel point il était puissant, et il semblait supérieur. En fait, c'est plus simple que notre méthode d'écriture traditionnelle et hautement encapsulée. Selon leurs règles et spécifications, l'expérience d'écriture est toujours très bonne.

Présentons ce calculateur simple et quelques pièges rencontrés au cours du processus de développement. Tout d'abord, il existe de nombreux outils de développement Web, documents, etc. sur Internet, je ne les répéterai donc pas. WeChat a officiellement modifié le mécanisme de vérification et vous pouvez jouer sans. APPID. Mais certaines fonctions sont limitées. Développer des mini-programmes WeChat n’est en réalité pas difficile, même si cela semble très avancé. En fait, c'est plus simple que notre méthode d'écriture traditionnelle et hautement encapsulée. Selon leurs règles et spécifications, l'expérience d'écriture est toujours très bonne.

Mais comme il n'y a pas d'autorisation, les mini-programmes WeChat actuels sont tous exécutés dans l'émulateur des outils de développement. Je ne sais pas quelle est la situation réelle sur WeChat.

Fichiers xxx.wxml et fichiers xxx.wxss

wxml est un ensemble de langages de balisage développés par WeChat lui-même. Vous pouvez le visualiser directement sous forme de fichier HTML, car notre construction d'interface est. tout C'est écrit dans ce fichier, mais il n'y a pas de balises HTML, seulement des balises wxml, et le nombre de balises wxml est également très petit.

wxss est un ensemble de formats de fichiers de style développés par WeChat lui-même. Il est équivalent à notre fichier CSS. La méthode d'écriture est la même, mais le suffixe du fichier est . changé.Comment l'avons-nous écrit avant ?Comment écrivons-nous encore du CSS dans l'applet WeChat ?

wxml plus wxss nous pouvons créer l'interface utilisateur que nous voulons.

Fichiers xxx.js et xxx.json

Le fichier xxx.js est l'endroit où JS est écrit Chaque xxx.js correspond à un fichier xxx.wxml du même nom. js doit avoir un objet Page, même si la page n'a aucune logique métier. Entrez la page WeChat Web Developer Tool générera automatiquement une série de méthodes vides que vous pourrez implémenter. Bien sûr, vous n'êtes pas obligé de les implémenter. Il configure simplement le squelette pour vous.

Le fichier xxx.josn est le fichier de configuration, qui est généralement utilisé pour la configuration globale. Par exemple, app.josn dans le répertoire racine définit les pages dont se compose le mini-programme. , et la navigation dans le mini-programme, le style de barre, etc. Vous pouvez savoir ce que signifient les attributs en regardant leurs noms.

L'attribut pages configure la page. Le premier est la page de démarrage. Toutes les pages doivent être configurées ici. Si vous créez une page et oubliez de l'ajouter ici, alors. Vous serez très déprimé, car la méthode onLoad ne sera pas exécutée lorsque la page sautera. J'ai perdu beaucoup de temps à me gratter la tête et à être curieux à ce sujet.

Structure globale

Regardez le schéma de structure du projet ci-dessous. Une page est un dossier, et une page contient généralement des fichiers js, wxml et wxsml et js qui sont nécessaires et peuvent y être. il n'y a pas de style.

calc (page de la calculatrice), historique (enregistrement de l'historique), index (page d'accueil du mini programme, page de démarrage), journaux (informations du journal), utils (classe d'outils js) , les journaux et les utilitaires sont intégrés et peuvent être utilisés ou non.

Analyse du code source

La disposition de l'interface de cette calculatrice simple continue la disposition originale, en utilisant la disposition CSS Flexbox, qui semble être recommandée par les responsables de WeChat (Flexbox est utilisé dans la documentation officielle) .

Les boutons de la calculatrice sont tous réalisés avec des étiquettes. Ajoutez simplement le style wxss. Bien sûr, vous pouvez également utiliser directement les composants des boutons.

Ici, bindtap, comme vous pouvez le voir d'après son nom, est utilisé pour lier des événements, tout comme nous utilisons onclick en HTML. id={{id9}} La valeur entre doubles accolades vient de l'attribut du même nom défini par l'attribut data dans le fichier js

Il n'y a rien à dire à propos du CSS. La seule chose à noter est que WeChat fournit une unité de taille rpx, pixel réactif, qui peut être adaptée en fonction de la largeur de l'écran. Il est également utilisé sur la page historique de la calculatrice :

implique principalement les composants

vue et texte, et la plupart des pages sont composées de ces deux copains .

Bouton, le bouton "Calculatrice simple" sur la page d'index

Icône (icône), l'enregistrement de l'historique de l'ordinateur utilise discrètement l'une des icônes fournies avec l'icône.

Page d'ajustement des balises (navigateur)

Implique principalement l'API

wx.navigateTo, Navigate , sautez, ouvrez une nouvelle page dans la page actuelle

Stockage, stockage local, enregistre l'historique des calculs, il a setStorage, getStorage et a également la méthode asynchrone de fin de synchronisation

Rendu :

Notes

Chaque Lors de la création d'une nouvelle page, vous devez penser à l'ajouter à l'attribut pages de app.josn. Sinon, la méthode onLoad de la nouvelle page ne sera pas exécutée après avoir utilisénavigaTo pour accéder à la nouvelle page.

Il n'y a pas d'objets JavaScript tels que window dans l'applet WeChat, alors pensez à des alternatives avant d'écrire JS. Par exemple, cette calculatrice a été grandement trompée. À l'origine, la fonction eval pouvait être utilisée pour calculer des expressions de manière pratique, mais ça a échoué. C'est un grand détour.

Le JS dans l'applet WeChat n'est pas du vrai JS, et wxss n'est pas du vrai CSS, vous devez donc toujours faire attention lors de l'écriture.

D'une manière générale, le mini programme WeChat n'est pas difficile, et la documentation officielle est également très bien rédigée. Il suffit de lire attentivement la documentation officielle.

Cet article est reproduit à partir de : http://zixun.jisuapp.cn/xcxkfjc/4488.html

Recommandé : "Tutoriel de développement de mini-programmes"

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!