Entwicklung der WeChat-Miniprogrammseite

WXML (WeiXin Markup Language) ist eine Reihe von Tag-Sprachen, die vom Framework entwickelt wurden. In Kombination mit Basiskomponenten und Ereignissystemen kann es die Struktur der Seite erstellen.

Ich denke, WXML wird durch drei Dimensionen eingeführt: vertikale, horizontale und logische Verarbeitung. Sie können bei Bedarf auch die Grundlage für die Entwicklung kleiner Programme bilden. Die Details werden später bekannt gegeben. Die Funktion wird zu gegebener Zeit erweitert.

Vertikal

Vertikal: Das heißt, die Kombination von Komponenten, einschließlich: Systemkomponenten, Komponenten von Drittanbietern, benutzerdefinierte Komponenten.

Zum Beispiel:

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

Systemkomponenten:

• Container anzeigen: Cover-Bild, Cover-Ansicht, beweglicher Bereich, bewegliche Ansicht, Scroll-Ansicht, Swiper, Swiper- Element, Ansicht

• Basisinhalt: Symbol, Fortschritt, Rich-Text, Text

• Formularkomponenten: Schaltfläche, Kontrollkästchen, Kontrollkästchengruppe, Editor, Formular, Eingabe, Beschriftung, Picker, Picker-Ansicht, Picker-View-Spalte, Radio, Radio-Gruppe, Schieberegler, Schalter, Textbereich

• Navigation: Functional-Page-Navigator , Navigator

• Medienkomponenten: Audio, Kamera, Bild, Live-Player, Live-Pusher, Video

• Karte: Karte

• Leinwand: Leinwand

• Offene Funktionen: Anzeige, offizielles Konto, offene Daten, Webansicht

• Native Komponentenbeschreibung: native-component

• Barrierefreiheit: aria-component

• Navigationsleiste: navigation-bar

• Seitenattributkonfigurationsknoten: page-meta

Spezifische Referenz zur Verwendung:
https://developers.weixin.qq.com/miniprogram /dev /component/native-component.html

Komponenten von Drittanbietern: Zum Beispiel WeUI-Komponentenbibliothek usw.

Benutzerdefinierte Komponenten : Benutzerdefiniert Die Komponente verfügt über eine eigene WXML-Vorlage und einen eigenen WXSS-Stil.

Horizontal

Horizontal: Komponenteneigenschaften

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

Logische Verarbeitung

Logisch Verarbeitung: Entsprechend der Bindung. Gute Daten bestimmen, wie die Ansicht angezeigt wird 🎜>Bedingtes Rendern

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

Block, der zum Umschließen der Ansichtskomponente verwendet wird

Wenn wx:for, wx:if den Ansichtscontainer rendern möchten, können Sie dies tun Verwenden Sie das Block-Tag, um es zu umschließen. Das Block-Tag ist keine Komponente, sondern nur ein umschließendes Element, wird nicht gerendert und akzeptiert nur die Steuerattribute wx:..

block and wx:if:

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

block and wx:for:

<!--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'
  }
})

Empfohlenes Tutorial: „

WeChat Mini Program“

Das obige ist der detaillierte Inhalt vonEntwicklung der WeChat-Miniprogrammseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!