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

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 内置 getDate
  return 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 }]

注意：WXS 中无法直接在 WXML 中遍历此结果，需在 JS 中处理后传入。WXS 更适合用于单值转换。

---

本章小结

• WXS 是视图层脚本，用于轻量逻辑处理。
• 支持基本 JS 语法，但限制较多（无 while、无 DOM、无 API 调用）。
• 模块化通过 module.exports 实现。
• 内置 getDate、getRegExp、Math、JSON 等工具。
• 适用于格式化、简单计算、条件渲染等场景。
• 复杂逻辑仍应放在 Page 的 JS 中处理。

⚠️ 重要提醒：WXS 运行在渲染线程，性能敏感，避免在 WXS 中写复杂循环或递归，以免阻塞 UI 渲染。

---

以上内容覆盖了 WXS 的核心语法点与实用技巧，配合案例可快速掌握其开发方法。