Einführung in die Entwicklung von Miniprogrammen: WXML verstehen

In diesem Artikel erhalten Sie eine detaillierte Erläuterung von WXML bei der Einführung in die Entwicklung kleiner Programme. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Einführung in den Entwicklungsrahmen

Der Entwicklungsrahmen des Miniprogramms besteht aus vier Teilen : Bestehend aus WXML, WXSS, WXS und Java Script.

1. WXML wird verwendet, um den Inhalt der Seite zu beschreiben.

2. JS wird verwendet, um Benutzerlogik und Daten zu verarbeiten Kommunikation;

WXS ist eine Manifestation der Erweiterung der WXML-Funktionen. Es kann Berechnungen an den angeforderten Daten durchführen, um die Struktur der Seite schnell aufzubauen 🎜>WXML-Syntax

WXML (Weixin-Markup-Sprache)e970ab6e7a711c64a71cae4259e87ca7

WXML-Funktionen

WXML hat eine Insgesamt vier Sprachfunktionen: Datenbindung, Listenrendering, bedingtes Rendern und Vorlagenreferenz:

<!--index.wxml-->
<view>
  <text>{{message}}</text>
</view>
---------------------------------------------------
<!--index.js-->
Page
( 
  {
     data:
          {
            message:"Hello,world!"
          }
  }
)

3 Rendering

<!--index.wxml-->
<view>
  <block wx:for="{{items}}"  wx:for-item="{{item}}"  wx:key="index">
    <view>{{index}}:{{item.name}}</view>
  </block>
</view>
------------------------------------------
<!--index.js-->
Page
(
  {
    data:
        {
          items:[
                {name:"商品A"}
                {name:"商品B"}
                ]
        }
  }
)

4. Vorlagen und Referenzen

<!--index.xwml-->
<view>今天吃什么？<view>
<view wx:if="{{condicition===1}}">当然是吃饺子啦！</view>
<view wx:elif="{{condicition===2}}">可以考虑吃面条！</view>
<view wx:else>米饭把米饭吧</view>
-----------------------------------------------------------
<!--index.js-->
Page
(
 {
   data:
       {
       condicition:Math.floor(Math.random()*3+1)
       }
 }
)

<!--index.wxml 模板-->
<template name="template">
  <view>
    <view>收件人：{{name}}</view>
    <view>联系方式：{{phone}}</view>
    <view>地址：{{address}}</view>
  </view>
</template>
<template is="template" data="{{...item}}" ></template>
--------------------------------------------------------------------
<!--index.js-->
Page
( 
  {
    data:
         {
           item:
                {
                  name="张三",
                  photo="1212123",
                  address="China"
                }
         }
  }
)

Hinweis: Referenzen können nicht verschachtelt werden

<!--index.wxml 引用-->
<import src="a.wxml"></import>
<template is="a"></template>
<!--a.wxml-->
<view>Hello,world</view>
<template name="a">
  Hello World!
</template>

Hinweis: Kopiert alle Inhalte außer dem Master ein

Dieser Artikel ist reproduziert von: https://blog.csdn.net/yue__shen/article/details/90384729

Empfohlen: „
Mini-Tutorial zur Programmentwicklung

》

Das obige ist der detaillierte Inhalt vonEinführung in die Entwicklung von Miniprogrammen: WXML verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!