Pièges de l'enregistrement des mini-programmes WeChat (développement)

coldplay.xixi
Libérer: 2020-10-19 16:57:21
avant
4000 Les gens l'ont consulté

La colonne Tutoriel de développement de programme WeChat Mini d'aujourd'hui enregistrera les pièges du mini programme WeChat pour tout le monde.

Pièges de l'enregistrement des mini-programmes WeChat (développement)

Récemment participé au développement du premier mini-programme de l'entreprise. L'expérience de développement est fondamentalement similaire au développement hybride basé sur la vue Web. La puissante API officielle peut être appelée. , mais il y a aussi des pièges ou des endroits auxquels vous n'êtes pas habitué. Cet article enregistre quelques problèmes au cours du processus de développement du point de vue pratique :

1. Priorité de style déroutante

Lors de l'utilisation du composant bouton, j'ai trouvé que définir la largeur dans la classe ne prenait pas en compte. effet. Collez le code ci-dessous :

.my-button{  width: 140rpx;  height: 60rpx;  line-height: 60rpx;  padding: 0;
}复制代码
Copier après la connexion

Après avoir vérifié avec l'outil de débogage WeChat, nous avons constaté que la priorité de style de l'agent utilisateur est en fait supérieure à la classe de style dans laquelle nous avons écrit nous-mêmes. le navigateur

Pièges de l'enregistrement des mini-programmes WeChat (développement)

La solution est en fait relativement simple. Ajoutez simplement le suffixe de !important ou style="width:140rpx" à width. 🎜>

Pièges de l'enregistrement des mini-programmes WeChat (développement)

Pièges de l'enregistrement des mini-programmes WeChat (développement)

Après l'ajout de

, l'effet réel de la largeur est déjà conforme à nos attentes, mais l'outil de débogage WeChat affiche toujours que le style de l'agent utilisateur est prioritaire, ce qui doit être considéré comme un débogage. C'est un bug dans l'outil. !important

2. Encapsulation des composants d'interface utilisateur ordinaires, la définition des paramètres est lourde

Les composants de base dans les brouillons généraux de l'interface utilisateur, tels que les boutons, ont des styles spécifiques : par exemple, la couleur/police d'arrière-plan. Utilisez la fonction

du mini programme pour l'encapsuler dans des composants, écrire des styles par défaut et recevoir des classes entrantes externes, ce qui peut faciliter le développement ultérieur. Component

React a une méthode d'écriture de

, c'est-à-dire que le composant reçoit les accessoires sans les traiter et les transmet uniquement de manière transparente au composant suivant. Cependant, le mini programme ne prend pas en charge cette méthode d'écriture (recherche. en vain, et la documentation officielle ne l'explique pas). <tag></tag>

Cela signifie que nous devons lister tous les paramètres pris en charge par le composant

dans les propriétés : button

properties: {
    classes: {
      type: String,
      value: '',
    },
    type: {
      type: String,
      value: 'default',
    },
    plain: {
      type: Boolean,
      value: false,
    },
    size: {
      type: String,
      value: 'default',
    },
    ......
  },复制代码
Copier après la connexion
3 Le sélecteur de style global

est désactivé *
*{
  box-sizing: border-box;
}复制代码
Copier après la connexion
Le code ci-dessus signalera une erreur lors de la compilation car l'applet désactive ce type de sélecteur. Une hypothèse audacieuse sur la raison spécifique : ce type de sélecteur avec une portée relativement large entre-t-il en conflit avec l'isolation de style des composants personnalisés ? ?

Alors comment ajouter un style universel global au mini programme ? Il semble que je ne puisse écrire toutes les balises utilisées que manuellement. Heureusement, il existe des codes prêts à l'emploi sur Internet qui peuvent être publiés :

view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad{  box-sizing: border-box;
}复制代码
Copier après la connexion

4. Composant personnalisé, bind:tap est appelé deux fois

.

Lors de l'encapsulation de composants de base, tels que des boutons, l'écriture suivante doit être évitée :

onTap(e) {  if (!this.data.disabled && !this.data.loading) {    this.triggerEvent('tap', e.detail)
  }
},复制代码
Copier après la connexion
<button></button>复制代码
Copier après la connexion
Copier après la connexion

Les composants encapsulés de cette manière déclencheront deux événements tap, un déclenché par l'applet elle-même et un déclenché par triggerEvent.

Vous pouvez passer à un type d'événement qui n'est pas intégré au mini-programme, tel que cliquer :

onTap(e) {  if (!this.data.disabled && !this.data.loading) {    this.triggerEvent('click', e.detail)
  }
},复制代码
Copier après la connexion

Empêcher les événements de tapotement de bouillonner peut également être résolu :

<button></button>复制代码
Copier après la connexion
Copier après la connexion

5. Utilisez Boolean dans wxml () Effectuez une conversion de type

Par exemple, dans un composant, écoutez un paramètre de type String S'il n'est pas vide, l'étiquette de texte sera affichée, sinon elle ne sera pas affichée. :

// player.wxml<text>{{ leftText }}</text>复制代码
Copier après la connexion
Copier après la connexion
// index.wxml<player></player>复制代码
Copier après la connexion

Cette façon d'écrire,

Le champ a évidemment été passé, mais la balise de texte ne s'affiche toujours pas. Après avoir changé la méthode d'écriture :

// player.wxml<text>{{ leftText }}</text>复制代码
Copier après la connexion
Copier après la connexion
leftTextC'est correct et conforme. nos attentes.

Incroyable, non ?

6. Après qu'InnerAudioContext ait appelé la méthode de recherche, le rappel onTimeUpdate devient invalide

est utilisé pour lire l'audio.

InnerAudioContextMais lorsque la méthode onTimeUpdate est appelée pour passer à la position spécifiée pour la lecture,

n'est plus appelée.

seekEn fait, de nombreuses personnes dans la communauté des mini-programmes ont mentionné ce problème. Cela a pris environ un an et demi, mais l'équipe WeChat ne l'a pas encore résolu. Elle ne peut utiliser que temporairement une méthode de compromis pour le résoudre. La solution est en fait très simple. : onTimeUpdate

progressOnChange(e) {  if (this.properties.src && this.data.innerAudioContext) {    const innerAudioContext = this.data.innerAudioContext;
    innerAudioContext.pause();
    innerAudioContext.seek(innerAudioContext.duration * e.detail.value / 100);    setTimeout(() => {
      innerAudioContext.play();
    }, 500);
  }
},复制代码
Copier après la connexion
Mettez d'abord la lecture en pause, puis exécutez la méthode

, puis définissez un délai d'environ 500 ms pour appeler la méthode

.

seek7. Le problème de synchronisation d'InnerAudioContext pour obtenir la durée play

Je voulais obtenir la durée avant la lecture de l'audio, mais cela ne devrait pas être possible. Il n'y a pas beaucoup d'opinions sur l'appel

. et

en ligne, une des solutions est la suivante :

innerAudioContext.onCanplay(() => {  setTimeout(() => {    this.setData({      durationStr: secondToTimeStr(innerAudioContext.duration) || '--:--',
    });
  }, 500);
});复制代码
Copier après la connexion
onPlaySans parler du nombre de millisecondes onCanplay qui doit être défini, il n'est pas valide sur une vraie machine.

Alors utilisez simplement setTimeout:

innerAudioContext.onTimeUpdate(() => {  this.setData({    durationStr: secondToTimeStr(innerAudioContext.duration) || '--:--'
  })
});复制代码
Copier après la connexion

Si vous pensez qu'il est très gourmand en performances de calculer onTimeUpdate à chaque fois, vous pouvez l'implémenter vous-même et ne le calculer qu'une seule fois.

8. 设置页面背景色

当前页面的json文件中有个backgroundColor字段,但是设置后无效,后面发现这个字段表示的不是可见区域的背景色,而是页面下拉时窗口的背景色。

Pièges de lenregistrement des mini-programmes WeChat (développement)

如果需要设置页面背景色,可以通过page标签的样式设置:

page{  background: #f9fafb;
}复制代码
Copier après la connexion

待更新...

相关免费学习推荐:微信小程序开发教程

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:juejin.im
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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!