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 :

• 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);});

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 :
.

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!