search
HomeWeChat AppletMini Program DevelopmentWeChat applet WXML template syntax summary

This article brings you relevant knowledge about WeChat Mini Program, which mainly introduces the relevant content about WXML template syntax, including data binding, event binding, conditional rendering, List rendering and other issues, let’s take a look at them below, I hope it will be helpful to everyone.

WeChat applet WXML template syntax summary

【Related learning recommendations: 小program learning tutorial

WXML Template syntax- Data binding

1. Basic principles of data binding

Define data in data #②

Using data in

WXML

2.

In# Define the data of the page in ##data In the

.js file corresponding to the page, define the data Just go to the data object:

3. Mustache

Grammar format##             

Bind the data in

data To render in the page, use Mustache syntax (double braces) to wrap the variables . Similar to the interpolation expression in vue, the syntax format is:

4. Mustache

Application scenarios of grammar Binding content

Binding attributes
  1. Operations (ternary operations, arithmetic operations etc.)
  2. 5.

Dynamic binding content

# page of the data as follows:

The structure of the page is as follows:

                                                                                                                                               

The data on the

page is as follows:

Q

7.

Ternary operation

The data on the page is as follows:

The structure of the page is as follows:

#8.

Arithmetic operations

##       

WXML Template Syntax

- Event binding:1. What is an event

         Events are the communication method from the rendering layer to the logic layer. Through events, the user's behavior in the rendering layer can be fed back to the logic layer for business processing.

2.

Commonly used events in mini programs

##Type

bindtap #event

3. Attribute list of event object

## When the event callback is triggered, an event object event will be received. Its detailed attributes are as shown in the following table:

Tied Defined method

Event description

tap

or

bind:

tap

The finger touches and leaves immediately, similar to click ## in HTML

input

##bindinput or bind:input

Input event of text box

change

bindchange or bind:change

Triggered when status changes

##TypeDescription##typetimeStamptargetcurrentTarget

4. The difference between target and currentTarget

## ​ target is the source component that triggered the event, and currentTarget is The component to which the current event is bound. For example:

##When you click the internal button, the click event will

bubble External diffusion will also trigger the tap event processing function of the outer view .

At this time, for the outer

view :

1

.target points to the source component that triggered the event, therefore, e.target is the internal button component

2

.currentTarget points to the component that is currently triggering the event, therefore, e.currentTarget is the current view Component

##5.

The syntax format of bindtap does not exist in the mini program

HTML ## The onclick mouse click event in # responds to the user's touch behavior through the tap event . Through

bindtap , you can bind the component tap Touch event, the syntax is as follows:

## ②

In the ## of the page

#.js

The corresponding event processing function is defined in the file, and the event parameters are passed through the formal parameters

event (usually is abbreviated as e) To receive:                                                         

6. in the event handler function is data Data assignment in

        By calling the this.setData(dataObject) method, you can give the page ## The data in #data is reassigned, the example is as follows:

                                                                                    7.

Event parameter passing

                                                                                                                                                                                                                    When binding the event, pass parameters to the event processing function. For example, the following code will not work properly:

        

Because the applet will bindtap # The attribute value of

## is uniformly treated as the event name, which is equivalent to calling an event processing function named

btnHandler(123) .

You can provide data-* to the component, where * represents the name of the parameter

. The sample code is as follows: Finally: 1 info

will be parsed as

The name of the parameter

2 value 2 will be parsed into the value of the parameter

In the event processing function, pass event.target.dataset. Parameter nameYou can get the value of the specific parameter

. The sample code is as follows: 8. The syntax format of

bindinput

##         In the mini program, respond to the input event of the text box through input event, the syntax format is as follows:Through

bindinput , you can bind input events to the text box:     ②

Define the event processing function in the

.js file of the page:

9. Implement text box and data Data synchronization between

Implementation steps:

Define data

Rendering structure

Beautification style

Binding input Event handling function

Definition data:

##                                                                                         ##Rendering structure:

                                                                                                                     

Binding

input Event handling function:

#WXML

Template Syntax-

Conditional rendering

 

1. wx:if#                           ##1. #In the mini program, use wx:if="{{condition}}"

To determine whether the code block needs to be rendered:

You can also use wx:elif and wx:else To addelse Judgment:

##2.

combination## Use wx:if

        If you want to

Control multiple components at one time To display and hide, you can use a tag to wrap multiple components and place them in Use wx:if to control attributes. The example is as follows:

     

##Note: is not A component , it is just a wrapping container, will not do any rendering in the page.

3.hidden ="{{ condition

}}" can also control the display and hiding of elements:

4. wx:if

and

hidden Comparison Different operating methods1 wx:if

Control the display and hiding of elements by

dynamically creating and removing elements

2 hidden Control the display and hiding of elements by switching styles

(

display: none/block; )Usage suggestions1

Frequent switching

It is recommended to use hidden##2 control condition When

is complex, it is recommended to use wx:if Match wx:elifwx:else Switch between showing and hidingWXML Template syntax- List rendering

1. wx:for

#Through

wx:for , you can loop and render repeated component structures based on the specified array. The syntax example is as follows:

       

      By default, the index of the current loop item is represented by index ; is currently The loop item is represented by item .

2. Manually specify the index and variable name of the current item *

1 Use wx:for-index to specify the index of the current loop item## The variable name of

#2 uses wx:for-item to specify the current item The variable name

The sample code is as follows:

                                                                                   3. How to use wx:key

#:key in list rendering. When the applet implements list rendering, it is also recommended to specify a unique # for the rendered list items. ##key

value, thereby

Improve rendering efficiency, the sample code is as follows:       [Related learning recommendations: 小program learning tutorial]

##Attributes

String

Event Type

Integer

page opens The number of milliseconds that elapsed until the event was triggered

Object

A collection of some property values ​​of the component that triggers the event

Object

##A collection of some attribute values ​​of the current component

##detail

##Object

Additional information

touches

Array

Touch event, array of touch point information currently staying on the screen

changedTouches

##Array

Touch event, array of currently changed touch point information

The above is the detailed content of WeChat applet WXML template syntax summary. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:CSDN. If there is any infringement, please contact admin@php.cn delete
微信小程序架构原理基础详解微信小程序架构原理基础详解Oct 11, 2022 pm 02:13 PM

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于基础架构原理的相关内容,其中包括了宿主环境、执行环境、小程序整体架构、运行机制、更新机制、数据通信机制等等内容,下面一起来看一下,希望对大家有帮助。

微信小程序常用API(总结分享)微信小程序常用API(总结分享)Dec 01, 2022 pm 04:08 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要总结了一些常用的API,下面一起来看一下,希望对大家有帮助。

微信小程序云服务配置详解微信小程序云服务配置详解May 27, 2022 am 11:53 AM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于云服务的配置详解,包括了创建使用云开发项目、搭建云环境、测试云服务等等内容,下面一起来看一下,希望对大家有帮助。

浅析微信小程序中自定义组件的方法浅析微信小程序中自定义组件的方法Mar 25, 2022 am 11:33 AM

微信小程序中怎么自定义组件?下面本篇文章给大家介绍一下微信小程序中自定义组件的方法,希望对大家有所帮助!

微信小程序实战项目之富文本编辑器实现微信小程序实战项目之富文本编辑器实现Oct 08, 2022 pm 05:51 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于富文本编辑器的实战示例,包括了创建发布页面、实现基本布局、实现编辑区操作栏的功能等内容,下面一起来看一下,希望对大家有帮助。

西安坐地铁用什么小程序西安坐地铁用什么小程序Nov 17, 2022 am 11:37 AM

西安坐地铁用的小程序为“乘车码”。使用方法:1、打开手机微信客户端,点击“发现”中的“小程序”;2、在搜索栏中输入“乘车码”进行搜索;3、直接定位城市西安,或者搜索西安,点击“西安地铁乘车码”选项的“去乘车”按钮;4、根据腾讯官方提示进行授权,开通“乘车码”业务即可利用该小程序提供的二维码来支付乘车了。

简单介绍:实现小程序授权登录功能简单介绍:实现小程序授权登录功能Nov 07, 2022 pm 05:32 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助。

微信小程序开发工具介绍微信小程序开发工具介绍Oct 08, 2022 pm 04:47 PM

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于开发工具介绍的相关内容,包括了下载开发工具以及编辑器总结等内容,下面一起来看一下,希望对大家有帮助。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools