Composants communs des applets Wechat

Table des matières

Un.、Composants communs de la classe de conteneur de vue

① view

② scroll-view

③ swiper Et swiper-item

2.、Éléments de contenu de base communs

① text

② rich-text

Trois、Autres composants communs 

① button

② image

③ navigator

Un.、Composants communs de la classe de conteneur de vue

① view

• Zone de vue normale
• Similaire à HTML Dans div,C'est un élément au niveau du bloc
• Souvent utilisé pour obtenir l'effet de mise en page d'une page

first.wxml

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

first.wxss 

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1) {
  background-color: lightgreen;
}

.container1 view:nth-child(2) {
  background-color: lightskyblue;
}

.container1 view:nth-child(3) {
  background-color: lightcoral;
}

.container1 {
  display: flex;
  justify-content: space-around;
}

② scroll-view

• Zone de vue déroulante
• Souvent utilisé pour faire défiler les effets de la liste

second.wxml

<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

second.wxss

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1) {
  background-color: lightgreen;
}

.container1 view:nth-child(2) {
  background-color: lightskyblue;
}

.container1 view:nth-child(3) {
  background-color: lightcoral;
}

.container1 {
  border: 1px solid red;
  height: 120px;
  width: 100px;
}

③ swiper Et swiper-item

• Composants du conteneur de diagramme de roue Et La carte de la rotation item Components 

third.wxml

<swiper class="swiper-container" indicator-dots>
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

third.wxss

.swiper-container {
  height: 150px;
}

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item {
  background-color: lightgreen;
}

swiper-item:nth-child(2) .item {
  background-color: lightblue;
}

swiper-item:nth-child(3) .item {
  background-color: lightpink;
}

2.、Éléments de contenu de base communs

① text

• Composant texte
• Similaire à HTML Dans span Étiquettes,Est un élément en ligne

Adoption text Component selectable Propriétés,Pour obtenir l'effet d'appuyer longtemps sur le contenu du texte sélectionné： 

fouth.wxml 

<view>
   Prise en charge du téléphone longue pression pour sélectionner l'effet 
  <text selectable>13800005006</text>
</view>

② rich-text

• Composant texte riche
• Support pour HTML Chaîne rendue comme WXML Structure 

 Adoption rich-text Component nodes Noeud d'attribut,Prends ça. HTML La chaîne est rendue comme UI Structure：

fifth.wxml

<rich-text nodes="<h1 style='color: red;'>Titre</h1>"></rich-text>

Trois、Autres composants communs 

① button

• Bouton as
• Rapport fonctionnel HTML Dans button Boutons riches
• Adoption open-type Les propriétés peuvent appeler les différentes fonctions fournies par Wechat（Service à la clientèle、Avant、Obtenir l'autorisation de l'utilisateur、Obtenir des informations sur l'utilisateur, etc）

sixth.wxml 

<button> Bouton par défaut </button>
<button type="primary">Bouton de tonalité primaire</button>
<button type="warn">Bouton d'avertissement</button>

<button size="mini"> Bouton par défaut </button>
<button type="primary" size="mini">Bouton de tonalité primaire</button>
<button type="warn" size="mini">Bouton d'avertissement</button>

<button size="mini" plain> Bouton par défaut </button>
<button type="primary" size="mini" plain>Bouton de tonalité primaire</button>
<button type="warn" size="mini" plain>Bouton d'avertissement</button>

② image

• Composant image image
• La largeur par défaut du composant est d'environ 300px、Hauteur approximative 240px

image Component mode Propriété utilisée pour spécifier le mode de coupure et d'échelle de l'image,Fréquent mode Les valeurs des attributs sont les suivantes： 

seventh.wxml

<image></image>
<image src="/images/1.jpg"></image>

 seventh.wxss

image {
  border: 1px solid red;
}

③ navigator

• Composants de navigation de page
• Similaire à HTML Dans a Liens

 1.Définir le titre de la barre de navigation

Étapes de configuration：app.json -> window -> navigationBarTitleText Besoins： Mettez le titre sur la barre de navigation ,Par défaut “WeChat”Modifier comme suit:“Programmeur de cheval noir”,L'effet est montré：

2. Définir la couleur de fond de la barre de navigation

Étapes de configuration：app.json -> window -> navigationBarBackgroundColor Besoins： Couleur de fond du titre de la barre de navigation ,Par défaut #fff Modifier comme suit: #2b4b6b ,L'effet est montré：

 3. Définir la couleur du titre de la barre de navigation

Étapes de configuration：app.json -> window -> navigationBarTextStyle Besoins： Colorez le titre sur la barre de navigation ,Par défaut black Modifier comme suit: white ,L'effet est montré：

Attention!： navigationBarTextStyle Les valeurs optionnelles pour black Et white

Wechat applet Development Document：view | Wechat Open Document (qq.com)

Partager le site de notes d'étude que j'ai créé ：George's Notes (gitee.io)