Maison  >  Article  >  Applet WeChat  >  Mini programme étape par étape : introduction, texte, événements, style

Mini programme étape par étape : introduction, texte, événements, style

高洛峰
高洛峰original
2017-02-28 10:54:041728parcourir

Introduction aux mini-programmes

Quel sera le courant dominant du futur, l'application native ou l'application Web, est débattu depuis de nombreuses années. Le plus grand avantage de l'application native est sa capacité à appeler des interfaces de contrôle du système. et les frameworks ne sont pas aussi bons que ceux de Web APP. Sachez où aller. Bien que JD.com propose à la fois une application mobile et des pages H5 mobiles permettant aux utilisateurs de parcourir et de passer des commandes, ceux qui ont utilisé les deux en même temps peuvent se rendre compte que la page H5 est encore moins fluide.
Avant cela, de nombreux entrepreneurs avaient achevé l'implantation des fonctions de base dans WeChat en intégrant H5 dans la barre de menu des comptes publics, mais il s'agissait généralement de pages relativement simples et l'expérience opérationnelle était moyenne.
Le plus grand point fort du mini-programme lancé par WeChat cette fois est que WeChat fournit une multitude de composants de cadre et d'interfaces API que les développeurs peuvent appeler, notamment : interface, vue, contenu, bouton, navigation, multimédia, emplacement, données, réseau, induction gravitationnelle, etc. Avec l'aide de ces composants et interfaces, les mini-programmes construits sur WeChat peuvent conserver la même expérience que les applications natives en termes de capacités d'exécution et de fluidité.
Inscription aux mini-programmes

Les mini-programmes, les comptes d'abonnement, les comptes de service et les comptes d'entreprise sont désormais des systèmes parallèles, donc si vous devez les utiliser, vous devez vous réinscrire.
Concernant la façon de vous inscrire, veuillez lire la documentation officielle, elle ne sera pas encombrante ici :
Guide d'accès au programme WeChat Mini
Outils de développement

Télécharger depuis le site officiel ici :
Adresse de téléchargement de l'outil de développement de programme WeChat Mini
Ok, le téléchargement de l'outil de développement est terminé et vous pouvez démarrer l'instance directement après l'installation.
Présentation des outils de développement

1. Scannez le code QR pour vous connecter (vous devez d'abord enregistrer l'applet WeChat)

小程序循序渐进: 简 介、文本、事件、样式

2. projet d'applet

小程序循序渐进: 简 介、文本、事件、样式

3. Ajoutez un projet, cliquez simplement sur "Pas d'APPID" ici

小程序循序渐进: 简 介、文本、事件、样式

D'accord, vous peut commencer à coder
Structure du répertoire du projet

小程序循序渐进: 简 介、文本、事件、样式

Ce répertoire est automatiquement généré en cochant simplement le projet de démarrage rapide.

dossier pages - contient tous les fichiers de page.

dossier utils - contient quelques ensembles d'outils js.

app.js - fichier d'entrée de démarrage.

app.wxss - fichier de feuille de style global.

app.json - fichier de configuration globale.

Le suffixe .js est un fichier de script, le suffixe .json est un fichier de configuration, le suffixe .wxss est un fichier de feuille de style similaire à .css et le . Le fichier de structure wxml est similaire à .html
Jetez un oeil à app.json

小程序循序渐进: 简 介、文本、事件、样式

Vous pouvez voir que l'allocation du projet de pages est le chemin et l'entrée de la page. Par défaut, le premier chemin est utilisé comme entrée.
pages/index/index, ce projet omet le suffixe .wxml.
Chaque page générera un répertoire, et chaque répertoire contient quatre fichiers par défaut.
Exemple

Exemple 1 : Texte de sortie

Ouvrir index.wxml

小程序循序渐进: 简 介、文本、事件、样式

la vue est équivalente à un div en HTML.

l'image est une image.

le texte est le texte.

Ajouter un code texte :

小程序循序渐进: 简 介、文本、事件、样式

Effet :

小程序循序渐进: 简 介、文本、事件、样式

Exemple 2 : Modifier le texte Couleur

Ajouter une classe

小程序循序渐进: 简 介、文本、事件、样式

小程序循序渐进: 简 介、文本、事件、样式

小程序循序渐进: 简 介、文本、事件、样式

小程序循序渐进: 简 介、文本、事件、样式


Plus de mini programmes étape par étape : introduction, texte, événements, articles liés au style, veuillez faire attention au site Web PHP chinois !


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn