tencent cloud

Tencent Cloud Super App as a Service

Release Notes and Announcements
Announcement: Tencent Cloud Mini Program Platform Renamed to Tencent Cloud Super App as a Service on January 2, 2025
Console Updates
Android SDK Updates
iOS SDK Updates
Flutter SDK Updates
IDE Updates
Base Library Updates
Product Introduction
Overview
Strengths
Use Cases
Purchase Guide
Billing Overview
Pay-As-You-Go Billing
Renewal Guide
Service Suspension Instructions
Getting Started
Plan Management
Overview
Console Account Management
Storage Configuration
Acceleration Configuration
Branding Configurations
Platform Features
Console Login
Users and Permission System
Mini Program Management
Mini Game Management
Superapp Management
Commercialization
Platform Management
User Management
Team Management
Operations Management
Security Center
Code Integration Guide
Getting Demo and SDK
Android
iOS
Flutter
Superapp Server
GUID Generation Rules
Mini Program Development Guide
Mini Program Introduction and Development Environment
Mini Program Code Composition
Guide
Framework
Components
API
Server Backend
JS SDK
Base Library
IDE Operation Instructions
Mini Game Development Guide
Guide
API
Server Backend
Practice Tutorial
Mini Program Login Practical Tutorial
Mini Program Subscription Message Practical Tutorial
Payment Practical Tutorial
Ad Integration Practical Tutorial
Mini Game Subscription Message Practical Tutorial
API Documentation
History
Introduction
API Category
Making API Requests
Operation Management APIs
User Management APIs
Team Management APIs
Sensitive API-Related APIs
Role Management APIs
Platform Management APIs
Other Console APIs
Mini Program or Mini Game APIs
Management-Sensitive APIs
Global Domain Management APIs
Superapp APIs
Data Types
Agreements
Service Level Agreement
Data Processing and Security Agreement
SDK Privacy Policy Module
SDK Data Processing and Security Agreement Module
DocumentationTencent Cloud Super App as a ServiceMini Program Development GuideFrameworkWXS Syntax ReferenceWXS Modules

WXS Modules

PDF
Focus Mode
Font Size
Last updated: 2024-11-21 18:34:18
WXS code can be written in <wxs> tags in a wxml file or in files with the extension .wxs.

Modules

Each .wxs file or <wxs> tag is an independent module.
Each module has an independent scope. This means the variables and functions in a module are private by default and not visible to other modules.
A module can only externally expose its private variables and functions through the module.exports implementation.

wxs Files

In Weixin DevTools, right-click to create a .wxs file. You can write WXS scripts directly in the file.
Sample code:
// /pages/comm.wxs

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar
};
In the above example, WXS code is written in the /pages/comm.wxs file. This .wxs file can be referenced by other .wxs files or <wxs> tags in WXML.

module Objects

Each wxs module contains one built-in module object.

Properties

exports: This property is used to share the module’s private variables and functions externally.
Sample code:
// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";
<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>
Page output:
some msg
'hello world' from tools.wxs

require Functions

You can use a require function to reference another wxs file module in a .wxs module.
When referencing another wxs file module, you must note the following:
You can only reference .wxs files modules and must use relative paths;
All wxs modules are single instances. The first time a wxs module is referenced, it is automatically initialized as a single-instance object. Multiple pages, multiple regions, and multiple references all use the same wxs module object;
If a wxs module is never referenced after it is defined, the module is not parsed or run.
Sample code:
// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";
// /pages/logic.wxs

var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);
<!-- /page/index/index.wxml -->

<wxs src="./../logic.wxs" module="logic" />
Console output:
'hello world' from tools.wxs
logic.wxs
some msg

<wxs> Tags

Property Name
Type
Default Value
Description
module
String
-
The module name of the current <wxs> tag. This is a required field.
src
String
-
The relative path of the referenced .wxs file, only valid when this tag is a single closed tag or the tag content is empty.

module Property

The module property is the module name of the current <wxs> tag. In a single wxml file, we recommend that this value be unique. In the case of duplicate module names, the value is overwritten based on the order (the latter overwrites the former). The names of wxs modules are not overwritten across different files.
The name specified by the module property value must comply with the following rules:
The first character must be an English letter (a-z, A-Z) or underscore (_).
The remaining characters can be English letters (a-z, A-Z), underscores (_), or numbers (0-9).
Sample code:
<!--wxml-->

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>
Page output:
hello world
The above example declares a module with the name foo that exposes the some_msg variable for use on the current page.

src Property

The src property is used to reference another wxs file module.
When referencing another wxs file module, you must note the following:
You can only reference .wxs files modules and must use relative paths.
All wxs modules are single instances. The first time a wxs module is referenced, it is automatically initialized as a single-instance object. Multiple pages, multiple regions, and multiple references all use the same wxs module object.
If a wxs module is never referenced after it is defined, the module is not parsed or run.
Sample code:
// /pages/index/index.js

Page({
  data: {
    msg: "'hello wrold' from js",
  }
})
<!-- /pages/index/index.wxml -->

<wxs src="./../comm.wxs" module="some_comms"></wxs>
<!-- You can also directly use single tag closed syntax.
<wxs src="./../comm.wxs" module="some_comms" />
-->

<!-- Calls the bar function in the some_comms module, and the parameter is foo in the some_comms module. -->
<view> {{some_comms.bar(some_comms.foo)}} </view>
<!-- Calls the bar function in the some_comms module, and the parameter is msg in page/index/index.js. -->
<view> {{some_comms.bar(msg)}} </view>
Page output:
'hello world' from comm.wxs
'hello wrold' from js
In the above example, the <wxs> tag is used to reference /page/comm.wxs in the file /page/index/index.wxml.

Note

A <wxs> module can only be accessed in the WXML file that defines the module. If you use <include> or <import>, <wxs> modules are not introduced into the corresponding WXML files.
In a <template> tag, you can only use the <wxs> module defined in the WXML file that defines the <template>.



Previous Topic: IntroductionNext Topic: Variables

Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback