Introduction détaillée aux composants personnalisés dans les mini-programmes WeChat

Cet article présente principalement en détail les informations pertinentes sur les composants personnalisés de l'applet WeChat, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Avant-propos

<.>Je suis récemment tombé sur des mini-programmes WeChat. Une fois de plus, le framework front-end utilisé par l'entreprise était vue. Après comparaison, j'ai trouvé que le développement de mini-programmes présentait diverses restrictions et était très peu convivial pour les développeurs. Il y a trop de points différents à redire, je n’entrerai donc pas dans les détails ici, je prévois d’écrire un article spécial la prochaine fois pour m’en plaindre. Cette fois, je partage principalement quelques idées sur les composants personnalisés des mini-programmes. Le cadre officiel fourni par les mini-programmes est relativement simple, primitif, peu réutilisable et n'implémente pas les fonctions des composants personnalisés. Cela fait réagir de nombreuses personnes qui utilisent Vue. -fin de développement très inconfortable. Il existe diverses plaintes sur Internet, et les méthodes d'implémentation de composants personnalisés sont également partagées, mais elles sont soit trop compliquées, soit incompatibles après la mise à niveau de l'applet WeChat. Quoi qu'il en soit, ce sont toutes sortes de pièges dont vous ne pouvez pas discuter. Ici, je voudrais partager comment je l'ai mis en œuvre dans le projet. Les corrections et les critiques sont les bienvenues et nous pouvons apprendre les uns des autres.

Implémentation du composant personnalisé Toast

• Voici le composant toast le plus simple à titre d'exemple

• Le framework officiel ne fournit que des fonctions de modèle de page : WXML fournit des modèles (modèles), et des extraits de code peuvent être définis dans les modèles puis appelés à différents endroits.

• Cependant, cette fonction ne prend pas en charge js, l'encapsulation de style et doit être traitée sur la page correspondante, et le modèle a également sa propre portée, qui doit être transmise en utilisant données.

• Encapsuler la fonction dans un composant indépendant, qui doit être indépendant de la page. Lors de l'utilisation, le composant est monté sur la page correspondante, le composant doit donc passer dans la page. cet objet (Page) à implémenter Le code est le suivant

  
  

Structure du répertoire

|------composants

| ------toast
|------toast.js
                                                                                                                                 🎜>
toast.wxml

toast.js

Comment utiliser

<template name=&#39;toast&#39;>
  <view class="s-toast" wx:if="{{msg}}">
    <view class="s-toast-content">{{msg}}</view>
  </view>
</template>

1. modèle de page de référence wxml

/**
 * toastMsg 必传 提示内容
 * showTime 非必传 显示时间秒
*/
function toast(page, toastMsg, showTime) {
  let timer
  page.setData({ toastMsg })
  showTime = showTime || toastMsg.length / 4
  console.log(showTime)
  clearTimeout(timer)
  timer = setTimeout(() => {
    page.setData({ toastMsg: '' })
    clearTimeout(timer)
  }, showTime * 1000)
}

module.exports = {
  toast: toast,
}
toast.wxss
.s-toast-content {
  position: fixed;
  left: 50%;
  color: #fff;
  width: 500rpx;
  bottom: 120rpx;
  background: hsla(0,0%,7%,.7);
  padding: 15rpx;
  text-align: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 4rpx;
  z-index: 6999;
}

2. Références de fichiers js toast.js

3. 🎜>

Améliorations et plus d'extensions

import { toast } from '../../../project/component/toast/toast.js'

Dans les projets réels, il y aura un toast confirmant le chargement... et de nombreux autres composants communs, ainsi qu'un un grand nombre de composants métier. Nous pouvons introduire js dans un fichier js, puis lorsque la page est chargée (méthode onLoad) Enregistrez cette (page), de sorte que vous n'ayez besoin de vous inscrire qu'une seule fois pour utiliser tous les composants, tels que

.

toast(this, '填写详细信息')

devient
Avec la même idée, nous pouvons implémenter quelque chose de similaire dans vue La fonction de mixin améliore considérablement la réutilisabilité et la maintenabilité du code dans les projets commerciaux complexes.

Je suis le seul à développer les mini-programmes de l'entreprise. Il n'y a pas de situation où plusieurs personnes collaborent pour développer des mini-programmes, donc je ne mets pas beaucoup d'efforts sur cet aspect.

toast(this,'填写详细信息'')

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!