当前位置：首页 > news >正文

微信小程序入门学习教程，从入门到精通，WXS语法详解(10）

news 2025/10/7 5:21:35

WXS语法详解

WXS（WeiXin Script）是微信小程序中提供的一套脚本语言系统，用于在 WXML 中进行逻辑处理和数据操作。WXS 与 JavaScript 语法类似，但运行环境独立，不能直接调用小程序的 API 或修改 Page/Data。本章将系统讲解 WXS 的语法体系、数据类型、模块机制及常用操作，并配以详细案例。

一、WXS介绍

1.1 什么是WXS？

WXS 是运行在视图层（WXML）的脚本语言，用于处理数据格式化、条件判断、循环等逻辑，避免将复杂逻辑写在 WXML 中。

1.2 使用方式

内联方式：<wxs module="m1">...</wxs>
外部文件：<wxs src="./utils.wxs" module="utils" />

二、基础语法

2.1 变量声明

WXS 使用 var、let、const 声明变量（推荐使用 var，兼容性更好）。

// 声明变量
var name = "WXS";
let age = 2;
const PI = 3.14159;

注意：WXS 中 let 和 const 在部分旧版本基础库中可能不支持，建议使用 var。

三、WXS模块

3.1 模块导出

通过 module.exports 导出函数或对象。

// utils.wxs
var formatTime = function (timestamp) {var date = getDate(timestamp); // WXS 内置 getDatereturn date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
};module.exports = {formatTime: formatTime
};

3.2 模块导入（在 WXML 中）

<wxs src="./utils.wxs" module="utils" />
<view>{{utils.formatTime(1700000000000)}}</view>

四、变量

4.1 变量作用域

WXS 中变量具有函数作用域（类似 ES5）。

var a = 1;
function test() {var a = 2; // 局部变量console.log(a); // 输出 2
}
test();
console.log(a); // 输出 1

注意：WXS 不支持 console.log 在真机上输出，仅在开发者工具中调试可用。

五、注释

5.1 单行与多行注释

// 这是单行注释/*
这是
多行注释
*/

六、运算符

6.1 算术、比较、逻辑运算符

var a = 10, b = 3;var add = a + b;        // 13
var mod = a % b;        // 1
var equal = a == b;     // false
var and = (a > 5) && (b < 5); // true
var not = !(a == b);    // true

6.2 三元运算符

var result = a > b ? "a大" : "b大";

七、语句

7.1 条件语句

var score = 85;
var grade;
if (score >= 90) {grade = "A";
} else if (score >= 80) {grade = "B";
} else {grade = "C";
}

7.2 循环语句（仅支持 for，不支持 while）

var sum = 0;
for (var i = 1; i <= 5; i++) {sum += i;
}
// sum = 15

注意：WXS 不支持 while、do-while、for...in、for...of。

八、数据类型

8.1 基本数据类型

number：整数或浮点数
string：字符串
boolean：true / false
null / undefined

var num = 42;
var str = "Hello";
var bool = true;
var n = null;
var u = undefined;

8.2 引用数据类型

array：数组
object：对象
function：函数
date：日期（通过 getDate() 创建）
regexp：正则表达式

var arr = [1, 2, 3];
var obj = { name: "WXS", version: 1.0 };
var fn = function() { return "hello"; };
var d = getDate(); // 当前时间
var re = getRegExp("\\d+", "g"); // 全局匹配数字

九、正则表达式

9.1 创建与使用

WXS 使用 getRegExp(pattern, flags) 创建正则。

var phoneReg = getRegExp("^1[3-9]\\d{9}$");
var isValid = phoneReg.test("13812345678"); // true// 提取数字
var text = "订单号：20251006";
var numReg = getRegExp("\\d+", "g");
var match = numReg.exec(text); // ["20251006"]

注意：WXS 正则不支持 new RegExp()，必须用 getRegExp。

十、数据类型判断

10.1 使用 `typeof`

typeof 42;          // "number"
typeof "abc";       // "string"
typeof true;        // "boolean"
typeof {};          // "object"
typeof [];          // "object"（数组也是对象）
typeof null;        // "object"（历史 bug）
typeof undefined;   // "undefined"
typeof function(){}; // "function"

10.2 判断数组（使用 `constructor`）

var arr = [1,2,3];
var isArr = arr.constructor === Array; // true

十一、基础类库

WXS 提供以下内置构造器和方法：

类型	构造器/函数
数值	`Number`, `parseInt`, `parseFloat`
字符串	`String`, `JSON.stringify`, `JSON.parse`
日期	`getDate(timestamp)`
正则	`getRegExp(pattern, flags)`
数学	`Math` 对象（abs, ceil, floor, random, round, max, min 等）

示例：JSON 操作

var obj = { name: "WXS", active: true };
var str = JSON.stringify(obj); // '{"name":"WXS","active":true}'
var parsed = JSON.parse(str);  // { name: "WXS", active: true }

示例：Math 使用

var randomInt = Math.floor(Math.random() * 100); // 0-99 随机整数
var maxVal = Math.max(10, 20, 5); // 20

十二、综合性案例

案例1：格式化商品价格（保留两位小数 + 千分位）

// format.wxs
var formatPrice = function (price) {if (typeof price !== 'number') {price = parseFloat(price);}if (isNaN(price)) return "0.00";// 保留两位小数price = price.toFixed(2);// 添加千分位var parts = price.toString().split(".");var integerPart = parts[0];var decimalPart = parts[1];// 从右往左每三位加逗号var reg = getRegExp("(\\d)(?=(\\d{3})+$)", "g");integerPart = integerPart.replace(reg, "$1,");return integerPart + "." + decimalPart;
};module.exports = {formatPrice: formatPrice
};

WXML 使用：

<wxs src="./format.wxs" module="fmt" />
<view>价格：¥{{fmt.formatPrice(1234567.891)}}</view>
<!-- 输出：价格：¥1,234,567.89 -->

案例2：时间戳转“刚刚/几分钟前/今天 HH:mm/YYYY-MM-DD”

// time.wxs
var formatTimeAgo = function (timestamp) {var now = getDate().getTime();var diff = now - timestamp; // 毫秒差var seconds = Math.floor(diff / 1000);var minutes = Math.floor(seconds / 60);var hours = Math.floor(minutes / 60);var days = Math.floor(hours / 24);if (seconds < 60) {return "刚刚";} else if (minutes < 60) {return minutes + "分钟前";} else if (hours < 24) {return hours + "小时前";} else if (days === 1) {var d = getDate(timestamp);var h = d.getHours();var m = d.getMinutes();return "昨天 " + (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m);} else if (days < 30) {return days + "天前";} else {var d = getDate(timestamp);var y = d.getFullYear();var m = d.getMonth() + 1;var day = d.getDate();return y + "-" + (m < 10 ? "0" + m : m) + "-" + (day < 10 ? "0" + day : day);}
};module.exports = {formatTimeAgo: formatTimeAgo
};

WXML 使用：

<wxs src="./time.wxs" module="time" />
<view>{{time.formatTimeAgo(1728123456789)}}</view>

案例3：过滤数组（模拟 filter）

WXS 不支持数组高阶函数，需手动实现：

var filter = function (arr, predicate) {var result = [];for (var i = 0; i < arr.length; i++) {if (predicate(arr[i], i)) {result.push(arr[i]);}}return result;
};var users = [{ name: "张三", age: 25 },{ name: "李四", age: 17 },{ name: "王五", age: 30 }
];var adults = filter(users, function (user) {return user.age >= 18;
});// adults = [{ name: "张三", age: 25 }, { name: "王五", age: 30 }]