Android

In the dynamic world of app development, WeChat Mini Programs have carved a unique space — especially in China, where over a billion users rely on WeChat daily. These “sub-apps” run directly within WeChat, allowing users to access everything from ride-hailing to food delivery to banking without ever installing a separate app. But what powers these Mini Programs behind the scenes?

Two key technologies form the foundation of every WeChat Mini Program: WXML (WeiXin Markup Language) and WXSS (WeiXin Style Sheets). In this blog, we’ll break down what these technologies are, how they work together, and why they matter for developers.

What Is WXML?

WXML, short for WeiXin Markup Language, is the structural layer of a Mini Program. If you’ve worked with HTML before, WXML will feel familiar — it serves the same purpose: defining the layout and UI components of your application.

Key Characteristics of WXML:

• Declarative Syntax: WXML uses a clean, readable syntax to describe elements and their hierarchy.
• Component-Based: Instead of generic <div> and <span>, WXML uses specific components like <view>, <text>, <image>, and more.
• Data Binding: It supports two-way data binding, allowing dynamic updates between the logic and UI.
• Control Structures: Includes logic like wx:if, wx:for, and wx:else for conditionals and loops.

Sample WXML Code:

<view class="container">
  <text>Hello, WeChat Mini Program..!</text>
  <image src="{{avatarUrl}}" mode="aspectFill"/>
</view>

Here, the avatarUrl is a variable dynamically provided by the Mini Program’s logic, demonstrating WXML’s support for dynamic rendering.

What Is WXSS?

Just like HTML needs CSS for styling, WXML relies on WXSS — short for WeiXin Style Sheets — to handle the visual design of the Mini Program. WXSS is inspired by CSS but includes WeChat-specific enhancements.

Why WXSS Matters:

• Familiar Yet Enhanced: While it inherits most of CSS syntax, WXSS introduces rpx units for responsive design, making it ideal for varying screen sizes in the WeChat ecosystem.
• Scoped Styling: Styles are typically scoped to a single page or component, promoting modularity.
• Lightweight and Fast: WXSS is optimized for fast rendering within the WeChat runtime environment.

Sample WXSS Code:

.container {
  padding: 20rpx;
  background-color: #f8f8f8;
}

text {
  font-size: 32rpx;
  color: #333;
}

The rpx (responsive pixel) unit is especially handy—it automatically adjusts to the device screen width, ensuring consistent UI across all devices.

How WXML and WXSS Work Together

Think of WXML as the skeleton and WXSS as the clothing. WXML structures the page; WXSS makes it look good. They’re tightly integrated but separated to maintain a clean and maintainable codebase — much like HTML and CSS.

When a Mini Program loads a page:

1. WXML renders the structure.
2. WXSS applies styles.
3. JavaScript handles logic and interactions.

Developer Tip: Understanding rpx vs px

In WXSS, the rpx unit is one of the most powerful features. It adapts automatically based on screen size. For example:

• On a 750px wide screen: 1rpx = 1px
• On a 375px wide screen: 1rpx = 0.5px

This removes the need for complicated media queries and ensures your layout scales naturally on all devices using WeChat.

Real-World Example

Let’s say you’re building a profile card:

profile.wxml

<view class="profile-card">
  <image src="{{user.avatar}}" class="avatar"/>
  <text class="username">{{user.name}}</text>
</view>

profile.wxss

.profile-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.username {
  font-size: 32rpx;
  color: #222;
}

This simple layout renders a user profile with a responsive image and styled name — all done using WXML and WXSS.

Why WXML and WXSS Matter in 2025

As WeChat Mini Programs continue to grow — powering e-commerce, services, education, and government apps — understanding WXML and WXSS is more relevant than ever. They’re not just front-end tools; they’re core to building scalable, high-performing micro-experiences in one of the world’s most influential platforms.

In a mobile-first and app-fatigued world, Mini Programs offer a lightweight alternative — and WXML and WXSS are your gateway in.

Conclusion

WXML and WXSS aren’t just “HTML and CSS in Chinese clothes” — they’re tailored for a fast, responsive, mobile ecosystem that thrives inside the WeChat super-app. For developers eyeing the Chinese market, or anyone curious about the future of lightweight app ecosystems, learning these tools is a smart investment.

FAQs

Q: Is WXML the same as HTML?
 A: No, WXML is similar in structure but designed specifically for WeChat Mini Programs. It uses custom tags and supports dynamic binding.

Q: What is the difference between WXSS and CSS?
 A: WXSS is based on CSS but includes enhancements like the rpx unit for responsive design, optimized for WeChat’s environment.

Q: Can I use Flexbox or Grid in WXSS?
 A: Yes, WXSS supports Flexbox, which is the recommended layout model for WeChat Mini Programs. CSS Grid is not fully supported.

Q: How do I test WXML and WXSS?
 A: Use the official WeChat Developer Tool to create and preview Mini Programs with real device simulation.