Aperçu complet du développement du mini-programme WeChat

Le langage de développement et les fichiers utilisés par WeChat sont très "spéciaux".

Les types de fichiers de programme utilisés par les petits programmes sont grossièrement répartis dans les catégories suivantes :

①WXML (WeiXin Mark Language, langage de balisage WeChat)

②WXSS (WeiXin Mark Language, WeChat style sheet)

③JS (Java, petit Le corps principal du programme)

En termes de langage, les mini-programmes semblent redéfinir un ensemble de normes. Mais en fait, ils ne sont pas très différents de « l'ensemble frontal en trois parties » - HTML, CSS et Java.

Recommandations d'apprentissage connexes : Tutoriel de développement de petits programmes

Maintenant, comparons Prenons un aperçu des similitudes et des différences entre les langages de développement de petits programmes et « l'ensemble frontal en trois parties » :

HTML et WXML : il y a une grande différence entre les deux Si vous n'avez jamais été exposé au développement Android auparavant, vous pourriez ressentir un certain mal de tête. En fait, WXML s'apparente davantage à un fichier de description XML d'interface dans le développement Android, adapté à la construction d'interfaces de programmes tandis que HTML est enclin à l'affichage d'articles (cela est lié à l'histoire du HTML) et à la construction de pages Internet.

WXSS et CSS : Il n'y a presque aucune différence de langage entre les deux et ils peuvent être utilisés directement.

Fichier JS : Le fichier JS du mini programme est presque le même que le JS utilisé dans le développement front-end, sauf que le JS du mini programme ajoute quelques interfaces API de WeChat et supprime certaines fonctions inutiles (telles que DOM).

En termes de langage, les mini-programmes sont complètement alignés sur le développement front-end avec les coûts d'apprentissage les plus bas, mais cela ne signifie pas que tous les développeurs front-end peuvent migrer de manière transparente.

Si vous passez du développement front-end aux petits programmes, vous devez faire attention à ces deux points :

Les idées de construction des fichiers HTML et WXML sont C'est assez différent. Si je n'ai été exposé qu'au développement front-end auparavant, il me faudra donc un certain temps pour m'adapter à la méthode d'écriture WXML.

Bien que l' applet utilise un langage front-end, cela ne signifie pas que vous pouvez continuer à utiliser des idées de développement front-end pour le développement. Les exigences liées au développement front-end de petits programmes sont passées de la « création d'interfaces » au « développement d'applications complètes ». Le développement front-end nécessite un changement de conscience.

Construction de l'interface

1. Logique de base

Les fichiers WXML et WXSS sont de petites interfaces de programme. fichier de déclaration d’élément et de description de style.

La plus grande caractéristique de WXML est qu'il connecte les éléments d'interface sous forme de vues et transmet les mises à jour des informations à la couche de vue en temps réel via la logique du programme (AppService).

view est similaire à l'élément p en HTML. Lors de la construction, les vues peuvent être imbriquées à plusieurs niveaux et tous les éléments visuels peuvent être placés à l'intérieur de la vue.

Il est à noter qu'une fois que l'élément dépasse l'écran, l'utilisateur ne peut plus le voir, ce qui est assez différent du HTML.

Par exemple, nous imaginons l'écran du téléphone portable comme une scène, et les acteurs en dehors de la scène ne peuvent pas être vus par le public.

L'applet dispose d'une vue dédiée au défilement.

Si vous souhaitez que l'interface soit une interface à défilement libre (comme une liste, etc.), vous pouvez utiliser la vue défilante, ajuster sa taille à tout l'écran dans WXSS, et set scroll-y (faire défiler vers le haut et vers le bas) ou scroll-x (faire défiler vers la gauche et la droite) est vrai.

Vous ne pouvez pas utiliser directement le DOM pour contrôler les éléments WXML dans l'applet . Si vous devez mettre à jour les données, vous devez utiliser les méthodes de liaison de données et de rendu d'éléments fournies par WXML.

Une autre chose à noter est que le système de composition de grille du mini programme utilise la mise en page Flex, qui est une norme de composition proposée par le W3C en 2009.

2. Liaison de données

Pour un seul champ, les développeurs peuvent utiliser la méthode de liaison de données pour mettre à jour les informations.

En plus d'être mises à jour lors du chargement, les données liées peuvent également être mises à jour sous forme de fonctions dans le programme principal JS. Les mises à jour peuvent également être reflétées dans les données liées sur le. interface.

3. Rendu conditionnel et rendu de liste (en boucle)

Le rendu conditionnel convient aux pages avec des invites de situation inattendues (telles que la liste ne peut pas être chargé ou des détails, faire des invites, etc.).

Son rendu a des conditions de déclenchement, c'est-à-dire que la page sera rendue lorsque les conditions seront remplies, sinon elle sera ignorée ou un autre morceau de code sera rendu.

Les variables de la condition de jugement contenues dans les deux accolades sont les données du programme principal JS instruction de code.

Si vous avez besoin de créer une liste dans l'interface, vous pouvez utiliser le rendu en boucle en WXML pour assembler les codes de rendu pour le même élément. Les données en boucle peuvent être écrites sous la forme d'un tableau pour un accès WXML.

Une fois le rendu terminé, les modifications des conditions de jugement du rendu peuvent affecter les modifications de l'interface.

4. Modèles et références

WXML prend en charge l'utilisation de modèles et de références pour réduire la taille du code.

Les modèles sont un moyen de réutiliser le même code dans du code WXML.

Vous pouvez écrire plusieurs modèles dans le même fichier et utiliser l'importation pour les référencer dans d'autres fichiers.

Si vous devez référencer la page entière, vous devez utiliser include.

5. Style

via la feuille de style WXSS, Les développeurs peuvent définir des styles pour les éléments en WXML.

WXSS Tout comme le code CSS, vous pouvez sélectionner des éléments directement à l'aide de sélecteurs. En WXML, vous pouvez également définir directement l'identifiant et la classe des éléments pour faciliter la définition du style dans les fichiers WXSS.

6. Opérations utilisateur et réponse aux événements

Étant donné que WeChat n'utilise pas HTML, il ne peut pas surveiller les clics des utilisateurs en ajoutant un événement de liens hypertexte (un élément).

Pour les éléments qui doivent écouter les événements de clic, ils doivent être liés à l'aide de l'attribut bindtap ou de l'attribut catchtap en WXML.

En plus d'un seul clic, WeChat fournit également des réponses à des événements telles qu'appuyer longuement, commencer à toucher, et relâchez.

Après avoir lié un événement en WXML, il peut être utilisé dans le programme principal JS.

Il existe également d'autres événements correspondants dans d'autres API, ces événements peuvent être trouvés dans la documentation officielle de le mini programme WeChat Découvrez-le.

Lorsque vous devez passer d'une page à l'autre du mini-programme, vous devez utiliser la méthode wx.navigateTo().

Il convient de noter qu'en ce qui concerne les sauts de niveau de page, WeChat limite les sauts de niveau à cinq couches. Lors du développement, vous devez veiller à ce que les limites correspondantes soient dépassées.

Accès au réseau

L'applet prend en charge trois méthodes de requête.

L'une est une demande de connexion HTTP directe. Le résultat est renvoyé directement après la demande et la connexion est terminée. L'autre est la connexion persistante Socket. Lorsqu'une partie ferme activement la connexion, la connexion se termine.

En plus des deux méthodes de connexion ci-dessus pour l'envoi et la réception de texte brut, WeChat fournit également une interface d'envoi et de réception de fichiers. Les voix enregistrées dans le mini programme et les photos sélectionnées doivent être téléchargées de cette manière.

L'accès au réseau via le mini-programme nécessite que le serveur prenne en charge les connexions sécurisées HTTPS et que le numéro de port soit 443.

Dans le même temps, le mini programme ne peut accéder qu'à l'adresse du serveur définie par le développeur lors de l'enregistrement du mini programme.

Multimédia et stockage

Si vous devez lire du multimédia (y compris l'audio et la vidéo) ou stocker des données dans le mini programme, vous ne pouvez pas utiliser HTML 5 Les normes fournies doivent utiliser l'interface de contrôle de lecture multimédia du mini-programme et l'interface de stockage fournies par WeChat.

Concernant l'interface sonore, il en existe deux types : la lecture audio et la lecture musicale.

La lecture audio fournit trois interfaces : lecture, pause et arrêt de la lecture. Elle ne fournit pas la fonction de passer à un certain point temporel de lecture, et vous ne pouvez pas non plus obtenir la progression actuelle de la lecture.

L'interface de lecture de musique fournit des fonctions telles que la vérification et la surveillance de l'état de la musique en plus du contrôle de lecture de base ci-dessus.

L'applet fournit une interface d'échange de données photo et vidéo. Grâce à cette interface, l'applet peut accéder aux photos et vidéos sélectionnées ou prises par l'utilisateur.

Les informations multimédia obtenues via l'interface d'enregistrement audio et de photo vidéo sont temporaires et les fichiers doivent être enregistrés de manière permanente via l'interface de fichiers de stockage du mini programme.

Pour les données texte, le mini programme fournit également une interface pour stocker ce type de données. Les développeurs qui quittent Android ou d'autres plates-formes d'applications doivent noter que les mini-programmes ne fournissent pas de formulaire de stockage de données local de type base de données, mais les enregistrent sous une forme individuelle de « valeur de champ ».

Lié au matériel

Le mini programme s'appuie sur WeChat et fournit de nombreuses API liées au matériel.

L'applet peut obtenir les données suivantes via l'API :

Informations relatives au système (y compris l'état du réseau, le modèle de l'appareil, la taille de la fenêtre, etc. )

Données de détection de gravité

Données de la boussole

Grâce à l'API ci-dessus, cela devrait être facile à écrire " "Secouer" et d'autres pages interactives.

Mais attention : ces données ne peuvent être obtenues qu'activement et ne peuvent pas être obtenues en temps réel via des rappels de ces changements numériques.

Service Push

Le mini programme fournit un service push et peut envoyer les notifications nécessaires aux utilisateurs à tout moment. Veuillez toutefois noter que le service push ne peut être utilisé que pour des rappels de notifications et ne peut pas être utilisé pour des envois massifs.

Dans le mini programme, le service push est appelé « modèle de message » (les développeurs qui ont déjà développé des comptes de service devraient le connaître). Les développeurs doivent enregistrer de nouveaux modèles de messages push (tels que les notifications de réussite d'achat, etc.) en arrière-plan du mini-programme WeChat et les approuver avant de pouvoir utiliser le service de message push modèle dans le mini-programme. Il est recommandé de se référer aux documents correspondants pour les normes d'examen spécifiques.

Une fois le modèle de message approuvé, le développeur doit d'abord obtenir le jeton d'accès du serveur WeChat, puis ajouter la valeur, le numéro de modèle et les variables dynamiques dans le modèle (telles que numéro de commande, prix, etc.) est soumis à WeChat, qui enverra des notifications aux utilisateurs.

Informations utilisateur et paiement WeChat

Le mini programme peut obtenir les informations de l'utilisateur avec le consentement de l'utilisateur.

Tout d'abord, le mini programme doit permettre aux utilisateurs d'autoriser la connexion via l'interface de connexion WeChat. Après cela, l'applet peut afficher et utiliser les informations utilisateur.

Lors de la connexion à l'aide de WeChat, veuillez noter que le message doit être signé pour confirmer son intégrité afin de garantir que les données n'ont pas été falsifiées.

Le paiement WeChat peut également être utilisé dans le mini programme. Il est à noter que lors de l'envoi d'une demande de paiement, une signature doit être ajoutée au message envoyé pour confirmer l'intégrité du message.

Recommandations d'apprentissage associées : Tutoriel du mini programme WeChat

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!