Développement de pages de mini-programmes WeChat

WXML (WeiXin Markup Language) est un ensemble de langages de balises conçus par le framework Combiné avec des composants de base et des systèmes d'événements, il peut construire la structure de la page.

Je pense que WXML est introduit à travers trois dimensions : traitement vertical, horizontal et logique. Voici une brève introduction. Ils constituent également la base du développement de petits programmes. Ils peuvent être utilisés en fonction du document en cas de besoin. Les détails seront introduits plus tard. La fonction sera étendue le moment venu.

Vertical

Vertical : c'est-à-dire la combinaison de composants, notamment : les composants du système, les composants tiers, les composants personnalisés.

Par exemple :

<view class="container">
  <view class="userinfo">
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname"> 用户名 </text>
  </view>
</view>

Composants du système :

• Conteneur de visualisation : image de couverture, vue de couverture, zone mobile, vue mobile, vue de défilement, swiper, swiper- élément, vue

• Contenu de base : icône, progression, texte enrichi, texte

• Composants du formulaire : bouton, case à cocher, groupe de cases à cocher, éditeur, formulaire, entrée, étiquette, sélecteur, vue du sélecteur, colonne de vue du sélecteur, radio, groupe radio, curseur, commutateur, zone de texte

• Navigation : navigateur de page fonctionnelle , navigateur

• Composants multimédia : audio, caméra, image, lecteur en direct, poussoir en direct, vidéo

• Carte : carte

• Canvas : canevas

• Capacités ouvertes : publicité, compte officiel, données ouvertes, affichage Web

• Description du composant natif : composant natif

• Accessibilité : composant aria

• Barre de navigation : barre de navigation

• Nœud de configuration des attributs de page : page-meta

Référence spécifique à utiliser :
https://developers.weixin.qq.com/miniprogram /dev /component/native-component.html

Composants tiers : Par exemple, bibliothèque de composants WeUI, etc.

Composants personnalisés  : Personnalisé Le composant a son propre modèle wxml et son propre style wxss

Horizontal

Horizontal : Propriétés du composant

属性名	描述
id	唯一标识
class	样式表
style	内联样式
hidden	隐藏
data-*	事件传递数据
bind* /catch*	组件事件

Traitement logique

Logique traitement : Selon la liaison, les bonnes données déterminent comment afficher la vue

Liaison de données

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

Rendu de liste

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

Rendu conditionnel

<!--wxml-->
<view wx:if="{{view == &#39;WEBVIEW&#39;}}"> WEBVIEW </view>
<view wx:elif="{{view == &#39;APP&#39;}}"> APP </view>
<view wx:else="{{view == &#39;MINA&#39;}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

bloc utilisé pour envelopper le composant de vue

Si wx:for, wx:if veut rendre le conteneur de vue, vous pouvez utilisez la balise block pour l'envelopper, la balise block n'est pas un composant, qui est juste un élément d'habillage, n'est pas rendu et n'accepte que les attributs de contrôle wx:..

block et wx:if:

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

block et wx:for:

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

Tutoriel recommandé : "WeChat Mini Program"

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!