Explication détaillée des exemples de barres de tabulation dans le développement d'applets WeChat

高洛峰
Libérer: 2017-03-15 16:03:18
original
2748 Les gens l'ont consulté

Cet article présente principalement des informations pertinentes sur l'explication détaillée des exemples de Tabbar pour le développement du mini-programme WeChat. Les amis dans le besoin peuvent se référer à

Tabbar du mini-programme WeChat

. 1 .Téléchargez le logiciel de développement d'applets WeChat

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714

2. Scannez le code QR pour vous connecter et cliquez sur Confirmer la connexion sur votre téléphone

Explication détaillée des exemples de barres de tabulation dans le développement dapplets WeChat

3. Créez un nouveau projet, sélectionnez Aucun APPID ici, remplissez l'APPID si nécessaire, vous devez vous inscrire dans l'applet WeChat, puis vous pourrez obtenir l'APPID, remplir le nom du projet et sélectionner le répertoire du projet (Remarque : L'applet WeChat ne créera pas le fichier du répertoire principal par lui-même, alors créez d'abord vous-même un dossier de projet. Choisissez ensuite de le stocker dans ce dossier), ajoutez le projet et un projet de projet est généré. Notez qu'il y a un bouton radio bouton . . Si vous annulez ce bouton radio , cela créera un projet vide, je choisis de sélectionner ce bouton

Explication détaillée des exemples de barres de tabulation dans le développement dapplets WeChat

4. un nouveau projet, placez maintenant une barre d'onglets en dessous, créez-en un nouveau premier répertoire d'images, faites un clic droit sur le répertoire -> Nouveau -> 🎜>

Explication détaillée des exemples de barres de tabulation dans le développement dapplets WeChat 5. Cliquez sur le dossier image ->Ouvrez le disque dur et placez l'
image

dans le sous-répertoire Remarque : la taille de l'image est limitée à 40 Ko. , taille 81px * 81px

Explication détaillée des exemples de barres de tabulation dans le développement dapplets WeChat

6. Jetons un coup d'œil à la structure des répertoires

d'abord. Le programme a deux répertoires, un pages et des pages utils contenant un index et des journaux. Ces deux répertoires sont deux pages (la première page est ce que vous voyez lorsque vous exécutez. le programme) Oui, la deuxième page sort en cliquant sur notre avatar), nous utiliserons ces deux pages comme pages à onglets

Explication détaillée des exemples de barres de tabulation dans le développement dapplets WeChatCliquez sur l'application.
json

Écrivez la barre d'onglets

contrôle ;Pour plus de commodité, je mets l'image dans le répertoire racine, sélectionne le répertoire image et fais un clic droit->Ouvrir le disque dur->copie

le répertoire image dans le répertoire racine,

supprimer Le répertoire d'origine va bien, le code est le suivant : Description de la méthode : color : Aucune couleur de police sélectionnée

selectedColor : Sélectionnez la couleur de policeExplication détaillée des exemples de barres de tabulation dans le développement dapplets WeChat

b

ord

erStyle : couleur de la ligne au dessus de la barre de tabulation blanche (seuls le blanc et le noir sont pris en charge)

arrière-plan
Couleur : couleur d'arrière-plan de la barre d'onglets

réseauTime

out : définir le délai d'expiration du réseau

debug : activez le mode débogage

L'effet est le suivant :


Remarque : les pages

list

sont pas autorisé à être enregistré dans les pages de app.json

Explication détaillée des exemples de barres de tabulation dans le développement dapplets WeChat

Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal