Développement du mini programme WeChat (6) Développement de la page « Modifier la carte de visite »

Il existe deux manières d'éditer des cartes de visite, qui sont divisées en le processus d'ajout d'une carte de visite et le processus de modification de la carte de visite. Le processus permettant aux utilisateurs d'ajouter manuellement une carte de visite est le suivant :

Premier passage à notre nouvelle page de carte de visite 1. Vous devez transmettre l'ID utilisateur actuel de l'utilisateur, wx.navigateTo saute avec la valeur. Le manuel est vrai pour inciter l'utilisateur à emprunter le nouvel itinéraire.
Vertical L'ajouter signifie un glissement vertical, le supprimer signifie un glissement à gauche et à droite. La structure globale est la suivante :

Ajouter une page de carte de visite 1. La disposition de base est la suivante :

Obtenir l'ID utilisateur.

Il est également très simple d'utiliser la vérification des composants d'entrée fournie avec WeChat, comme l'attribut maxLength , qui peut limiter la longueur de la saisie utilisateur. Par exemple, la longueur de mon nom peut aller jusqu'à 5 chiffres, utilisez donc simplement le chiffre 5.

Vous pouvez également personnaliser certains effets de vérification Plus précisément, vous pouvez effectuer certaines configurations de vérification en fonction de vos besoins, obtenir les valeurs saisies par le. utilisateur et effectuer des opérations.

Le composant d'invite de boîte modale intégré est lié ici.

où modalHidden2 est le commutateur de boîte modale.
De plus, proptText est le contenu qui doit être invité.
Même de nombreuses zones de saisie prennent en charge les changements dynamiques des données, ce qui est très pratique.

L'effet réel est très rapide et permet d'économiser beaucoup de choses qu'avant. En écrivant de petits programmes, j'ai trouvé que le plus gros avantage était peut-être cela. nous n'avons pas à considérer une série de problèmes de compatibilité.

Enfin, il y a un avatar pour télécharger des photos. Après les tests, il y a encore quelques problèmes de téléchargement. le serveur backend. Cela peut être dû à l’imperfection de la version bêta interne.

définit directement l'image d'arrière-plan.

Soumettez le formulaire et sautez.
Le formulaire de soumission utilise le composant d'événement bindsubmit intégré. Ajoutez simplement formType="submit" au composant bouton. Une autre chose à noter est que lors de l'utilisation de la fonction de soumission du formulaire, l'entrée doit ajouter le nom. attribut.Cette méthode de livraison se présente sous la forme de paires clé-valeur.

À ce stade, il passe à la page de modification 2. Cette page identifie l'entreprise correspondante en fonction du numéro de téléphone portable renseigné par l'utilisateur. La page est très simple. C'est juste une boucle de données. Le bouton radio devra peut-être être embelli à l'avenir.

sont également des liaison de données et des effets de vérification.

L'effet de rendu réel peut être vu.

C'est fondamentalement la même logique que la première page d'édition, quelques vérifications et soumissions de base, ici juste parlons des deux premières étapes. Il en va de même pour l'édition de la page 3. Je n'entrerai pas dans les détails ici.
Modifiez les rendus et les exigences du processus de carte de visite. La modification de la carte de visite rend simultanément toutes les informations personnelles précédemment renseignées pour que les utilisateurs puissent les modifier :

Ce module d'image de carte a quelques problèmes pour télécharger des images pour le moment. Ici, il imite un composant de saut. Il est recommandé d'utiliser wx.navigateTo pour contrôler la page. doit être sauté. Un point, wx.navigateTo nous fournit trois itinéraires de saut différents, qui sont tous bien encapsulés, et de nombreuses pages de saut impliquent des valeur et autres, qui peuvent être sautées. La gestion unifiée permet également d'éviter certains bugs invisibles. Bref, elle doit être déterminée en fonction des besoins de l'entreprise :

Nom et téléphone portable module requis :

Module d'informations personnelles, cycler (bloquer) directement :

Onload, nous demandons les données obligatoires et facultatives :

• requiredGroup informations chinoises requises

• notRequiredGroup sujet informations chinoises

• requiredGroupEn Informations en anglais requises

• notRequiredGroupEn Sujet Informations en anglais

//请求名片对应的公司的中文信息的属性组数据，分为必填和选填//选题项变量以 no 开头requester.getOfflineCardInfoGroupFields(userId, cardId,function (res) {//debuggervar userName = res.card.userName;var mobile = res.card.mobile;var requiredGroup = res.requiredGroupCh;var notRequiredGroup = res.notRequiredGroupCh;var requiredGroupEn = res.requiredGroupEn;var notRequiredGroupEn = res.notRequiredGroupEn;var reqLen = requiredGroup.fields.length;var nreqLen = notRequiredGroup.fields.length;var reqLenEn = requiredGroupEn.fields.length;var nreqLenEn = notRequiredGroupEn.fields.length;self.setData({userName: userName,mobile: mobile,requireFields: requiredGroup.fields,notRequireFields: notRequiredGroup.fields,requireFieldsEn: requiredGroupEn.fields,notRequireFieldsEn: notRequiredGroupEn.fields,l1: reqLen,l2: nreqLen + reqLen,l3: reqLenEn + nreqLen + reqLen});self.forceUpdate();}, function (code, msg) {console.info("code=" + code + "&msg=" + msg);});

Informations en chinois et en anglais requises Avec rendu facultatif :

La conversion des données de soumission du formulaire ici est un peu compliquée (vous pouvez le faire en fonction des besoins de l'entreprise, vous n'avez pas à passer du temps en étudiant les méthodes ici), ce qui est obtenu est un tableau, qui est converti et transmis selon le format de données requis par l'arrière-plan.

Aujourd'hui, je vais revenir en arrière et discuter de la façon d'implémenter la fonction de saut à virgule fixe des pages d'accueil A, B et C.

Le premier est la petite disposition d'index sur la droite et la liaison des données. La liaison des données est la même que la lettre sur l'entreprise. liste des cartes. Sous la lettre S'il y a une carte de visite, elle sera rendue. S'il n'y a pas de carte de visite, il n'est pas nécessaire de la rendre. L'identifiant est également la lettre actuelle et le contenu affiché à droite :
.

tri des données et groupe Les données .name sont les mêmes :

Voici parce que # ne prend pas en charge la définition sur id (c'est-à-dire id="#"), donc une conversion a été effectuée.

Événement de clic : obtenez l'ID actuel et liez les données à View à l'ID actuel.

Tout d'abord, la liste des cartes de visite et l'index des lettres sur la carte de visite sont tous dans la vue déroulante. être réglé sur une hauteur fixe, réglé sur 100 % et 100vh ne sont pas valides. Le commutateur de défilement de l'axe y est activé et le défilement dans la vue doit passer à l'identifiant de son élément enfant.

Vous pouvez consulter :

ce groupe. name ==sortmsg est équivalent à A==A, B==B Le même principe s'applique.

S'il y a une barre de menu au top ici, il faut faire attention à la disposition, sinon la hauteur de la barre de menu sera décalée vers le bas. En fait, vous pouvez éviter ce problème tant qu'elle est au même niveau que l'index alphabétique (le menu du haut). ici est séparé du modèle, et le modèle séparé (il convient de noter que certaines données qui doivent être liées au modèle ici seront invalides et les détails ne seront pas étudiés plus en détail).

La fonction de saut est essentiellement implémentée (l'autre est # en bas).

【Recommandations associées】

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

2 Cliquez sur l'icône de changement de barre d'onglets

3. Démo du mini programme WeChat ：Lezhu

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!