Home > WeChat Applet > Mini Program Development > Introduction to Mini Program Development: Understanding WXML

Introduction to Mini Program Development: Understanding WXML

青灯夜游
Release: 2020-04-12 10:06:01
forward
4057 people have browsed it

This article will give you a detailed explanation of WXML in the entry-level development of small programs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Introduction to Mini Program Development: Understanding WXML

Introduction to the development framework

The development framework of the small program is composed of four major parts: Composed of WXML, WXSS, WXS, and Java Script.

1. WXML is used to describe the content of the page;

2. WXSS describes the page style;

3. JS is used to handle user logic and data communication;

4. WXS is a manifestation of the enhancement of WXML capabilities. It can perform calculations on the requested data to help wxml quickly build the structure of the page;

WXML syntax

WXML(weixin markup language)

WXML features

WXML has four language features in total , respectively data binding, list rendering, conditional rendering and template reference

1. Data binding:

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

2. List 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"}
                ]
        }
  }
)
Copy after login

3. Conditional rendering

<!--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)
       }
 }
)
Copy after login

4. Templates and references

<!--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"
                }
         }
  }
)
Copy after login
<!--index.wxml 引用-->
<import src="a.wxml"></import>
<template is="a"></template>
<!--a.wxml-->
<view>Hello,world</view>
<template name="a">
  Hello World!
</template>
Copy after login

Note: References cannot be nested

<!--index.wxml-->
<include src="a.wxml">
<template is="a"></template>
</include>
------------------------------------
<!--a.wxml-->
<template name="a">
  <view>This is a.wxml</view>
</template>
<view>hello world</view>
Copy after login

Note: include copies all content except the master

This article is reproduced from: https://blog.csdn.net/yue__shen/article/details/90384729

Recommended: "小program Development Tutorial

The above is the detailed content of Introduction to Mini Program Development: Understanding WXML. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template