Heim > WeChat-Applet > Mini-Programmentwicklung > Einführung in die Entwicklung von Miniprogrammen: WXML verstehen

Einführung in die Entwicklung von Miniprogrammen: WXML verstehen

青灯夜游
Freigeben: 2020-04-12 10:06:01
nach vorne
4101 Leute haben es durchsucht

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 die Entwicklung von Miniprogrammen: WXML verstehen

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)

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!"
          }
  }
)
Nach dem Login kopieren
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"}
                ]
        }
  }
)
Nach dem Login kopieren
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)
       }
 }
)
Nach dem Login kopieren
<!--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"
                }
         }
  }
)
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage