WXML

You might say

Add an activity title and a booking button to this mini program screen.

A markup language for describing a WeChat mini program’s page structure and binding displayed dataOn a booking screen, text and button tags define the visible objects, while a binding such as {{title}} displays page data. WXML places the objects; styles and click handling come from other files.

Know first

Mini Program

WX Markup Language

Does new data change the page structure?

pages/book/index.wxmlTeaching example

index.wxml (excerpt)

<view>
  <text>{{title}}</text>
  <button>Reserve this time</button>
</view>

title: "Weekend pottery"

WeChat

Green Studio

Weekend pottery

Saturday 14:00 · Pottery workshop

14:00 — 15:30

Reserve this time

{{title}} reads the activity name from page data. The button tag declares an object; separate logic handles its click.

What else works with WXML?

Bind data, rather than duplicate the page: {{title}} displays a field from page data. List and condition directives control which objects appear as data changes.

Use the platform’s components: WeChat uses tags such as view, text, and button. WXML resembles HTML but is not a browser document.

Quick checkChoose the best answer

A booking screen needs an activity title and a button beneath it. Which change adds those objects?

Add the text and button tags in WXMLChange the button color and spacing in WXSSChange the booking save handler in JavaScript

Send this to the AI Agent in your project

Add an activity title and booking button to this WeChat page’s WXML. Bind the title to page data and connect the button to existing booking logic. Change the activity name afterward and verify the title updates while booking still works.

Learn next

1Mini Program→2WXSS→3JavaScript→

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website