Maison > Applet WeChat > Développement de mini-programmes > Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite

零下一度
Libérer: 2017-05-22 13:37:07
original
3563 Les gens l'ont consulté

Nouveautés ajoutées aujourd'hui ! En plus du journal de développement lui-même, j'ai également répondu à quelques questions d'amis. Sans plus attendre, jetons un œil aux rendus de la page de détail « Business Card Box » :

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite


Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite

Notez les exigences générales : derrière le haut se trouve une image de carrousel, le bouton du code QR fait apparaître les informations de la boîte modale, cliquez sur la barre WeChat, cliquez pour enregistrer sur le téléphone, la barre d'adresse doit afficher une carte, et il en va de même pour le partage de cartes de visite. Guide de la boîte modale.
Le premier est l'image du carrousel, lecture automatique lecture automatique, durée du carrousel à intervalles, vitesse de changement de durée, vous pouvez l'ajouter en fonction de vos propres besoins.
Supprimer : il s'agit d'un bouton de suppression. Il est masqué après le chargement. L'utilisateur doit cliquer sur l'image du carrousel pour y accéder, puis l'image du carrousel s'affichera en plein écran.
noClickImg et ClickImg : basculez entre les images de carrousel plein écran et non plein écran. L'événement de clic changeClick est obligé de changer, il suffit de changer de style.
Bloc : Liste d'images.
Number_img : index actuel du carrousel (currentNumber) et longueur d'image définie (cardnum).
Où currentNumber :

//Modifiez le numéro lorsque le carrousel change

//Initialisez les données

Data :{

currentNumber :1.

}

slidechange:function(e){

var number = e.detail.current;

this.setData({

currentNumber:number+1

})

},

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite

Ici, vous pouvez voir le plein écran statut Lorsque le bouton de fermeture est cliqué, getBackStyle bascule changeClick sur imgFullSrenn en veille.

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite

Cliquez à nouveau pour revenir au style original,

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite

après le changement L'événement revient à getBackStyle, utilisez-le de manière flexible.

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite

Actualisez les outils de développement et vous pouvez voir l'effet spécifique comme suit :

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite


Vous pouvez voir sur la page de détails que les informations sont fondamentalement du même style et vous pouvez utiliser le bloc de boucle fourni par WeChat. Voici les données d'informations personnelles dans la page de détails. S'il y a des informations, elles seront affichées. S'il n'y a pas de données, elles ne seront pas affichées ici. 🎜>

//Les informations chinoises

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite
var personMessage= []

sont spécifiquement traitées au format de données json. Tout ce que nous avons à faire est de lier. la valeur d'affichage, puis nous pouvons l'appeler.
           var chinaMessage = res.card.groups[0].fields;
Copier après la connexion

           for(var i = 0;i

            personMessage.push(chinaMessage[i])

           }

           //为空或者null是不显示判断

          for(var k in personMessage){

            if(personMessage[k].value==null || personMessage[k].value==""){

            personMessage[k]["display"] = "none";

            }else{

            personMessage[k]["display"] = "block";

            }

           }
Copier après la connexion


Cette version de setData de WeChat ne prend pas en charge la

mise à jourDéveloppement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visiteasynchrone des données, donc lorsqu'une véritable demande de données réseau se produit, nous devons Ajoutez forceUpdata() à la fin pour forcer le déclenchement du rendu
view

, sinon de nombreux bugs inexplicables apparaîtront.


Voici l'explication : Ce sont les données réelles du serveur.

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite


Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite
Vous pouvez voir qu'une erreur sera signalée. Il se peut que ce soit l'ordre d'exécution de js. vers le bas un par un. À l'heure actuelle, les données réseau sont toujours demandées.



Définissez simplement une variable.

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite


Bien sûr, les données ici sont poussées. Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite



Ce qui suit est le message contextuel du code QR.

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite


Ceci sont les informations du code QR de la boîte modale contextuelle. L'initialisation de la mise en page est à l'état Aucun. Là, vous devez lier directement les données :

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite
La méthode consiste à les laisser s'afficher.

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite

Vous pouvez simplement appeler la méthode depuis son emplacement. (Prend en charge les appels répétés)
La carte de localisation de l'entreprise sur la page de détails appelle directement l'interface fournie par WeChat (la démo dans le groupe a une méthode d'implémentation).
Vous pouvez voir l'effet obtenu :

Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite


Développement de programme WeChat Mini (3) Exemple de didacticiel sur la page de détails du titulaire de la carte de visite

【Recommandations associées】

1. Téléchargez le code source complet du mini programme WeChat

2 Démo du mini programme WeChat : Kaka Auto.

3. Opération simple de balayage vers la gauche et disposition du débit en cascade

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!

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