WXS脚本

1. 概述

1.1 什么是 WXS

WXS（WeiXin Script）是微信小程序独有的一套脚本语言，专门用于在 WXML 中进行复杂的逻辑处理和数据格式化。WXS 的语法与 JavaScript 类似，但它和 JavaScript 是两个独立的语言环境，WXS 的运行环境与 JavaScript 互相隔离。

WXS 的作用：WXS 结合 WXML 主要用于构建页面的结构和处理数据格式化。它在小程序中主要用于页面上的过滤器、数据处理等轻量级操作。

1.2 WXS 的应用场景

在微信小程序中，WXML（微信小程序的标记语言）中无法直接调用在页面的 .js 文件中定义的函数，而 WXS 提供了一种可以在 WXML 中进行简单逻辑和数据处理的方式。因此，WXS 典型的应用场景是作为“过滤器”来使用。

例如：

• 格式化时间显示
• 进行简单的数学运算或字符串处理
• 根据某个条件动态修改数据

1.3 WXS 和 JavaScript 的关系

虽然 WXS 的语法和 JavaScript 类似，但它们是两种不同的语言，具体差异如下：

1. 数据类型： WXS 有自己的数据类型，支持以下几种常用类型：

   • number：数值类型
   • string：字符串类型
   • boolean：布尔类型
   • object：对象类型
   • function：函数类型
   • array：数组类型
   • date：日期类型
   • regexp：正则表达式类型

2. 语法支持： WXS 只支持类似于 ES5 的语法，不能使用 ES6 及以上的新语法形式。

   • 支持：var 声明变量、普通函数（function）。
   • 不支持：let、const、解构赋值、箭头函数、对象属性简写等 ES6+ 的语法。

3. 模块化： WXS 遵循 CommonJS 规范，这意味着它支持 module 对象、require() 函数和 module.exports 对象，类似于 JavaScript 中的模块化。

// 例如：在 WXS 中使用模块化
module.exports = {
  formatNumber: function(num) {
    return num.toFixed(2);
  }
};

2. WXS 基础语法

2.1 内嵌 WXS 脚本

WXS 代码可以直接写在 WXML 文件中，类似于 HTML 中的 <script> 标签。开发者可以使用 <wxs> 标签来包含 WXS 脚本。

• module 属性：<wxs> 标签必须包含 module 属性，用来指定当前模块的名称，便于在 WXML 中引用。

<wxs module="filters">
  module.exports = {
    formatTime: function(time) {
      return time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
    }
  };
</wxs>

使用场景：当需要在页面内定义一些简单的过滤器或工具函数时，可以使用内嵌的 WXS 脚本。

下图展示了内嵌 WXS 脚本的代码结构：

2.2 定义外联的 WXS 脚本

除了内嵌 WXS 脚本，WXS 代码还可以写在独立的 .wxs 文件中，类似于 JavaScript 可以写在 .js 文件中一样。这样可以将 WXS 脚本复用到多个页面。

示例代码（定义一个外联的 WXS 文件 utils.wxs）：

// utils.wxs
module.exports = {
  formatCurrency: function(value) {
    return '¥' + value.toFixed(2);
  }
};

下图展示了外联 WXS 脚本的结构：

2.3 使用外联的 WXS 脚本

在 WXML 中可以通过 <wxs> 标签引入外联的 WXS 脚本。引入时，必须为 <wxs> 标签添加 module 和 src 属性。

• module：指定模块的名称。
• src：指定外联 WXS 文件的相对路径。

<wxs module="utils" src="../../utils.wxs"></wxs>

<view>{{ utils.formatCurrency(100) }}</view>

在这个示例中，utils.wxs 文件中的 formatCurrency 函数被引入，并在 WXML 中调用。

下图展示了如何使用外联的 WXS 脚本：

3. WXS 的特点

3.1 与 JavaScript 不同

虽然 WXS 借鉴了 JavaScript 的语法，但它们本质上是完全不同的语言。WXS 在功能上有所限制，以保证其运行效率更高，并且更加适合小程序的特定场景。

主要区别：

• 语法简化：WXS 不支持 ES6+ 语法，只支持 ES5 语法（如 var、普通函数），这让它更加轻量。
• 数据类型和对象：WXS 使用了独立的对象系统，无法与 JavaScript 代码共享对象。

3.2 不能作为组件的事件回调

WXS 的主要应用场景是数据处理和过滤，不能用于处理页面中的交互事件。因此，在 WXS 中定义的函数不能直接作为组件的事件回调函数使用。

示例（错误示范，WXS 函数不能作为事件回调）：

<!-- 这种写法是错误的 -->
<wxs module="utils">
  module.exports = {
    handleClick: function() {
      console.log('Button clicked');
    }
  };
</wxs>

<button bindtap="utils.handleClick">点击我</button>

下图展示了 WXS 函数不能作为事件回调的示例：

3.3 隔离性

WXS 和 JavaScript 代码运行在不同的环境中，它们彼此独立且互不影响。这种隔离性体现在两个方面：

1. WXS 不能调用 JavaScript 中定义的函数：WXS 中的函数只能在 WXML 中使用，无法直接访问页面或组件中的 JS 函数。
2. WXS 不能调用微信小程序的 API：由于 WXS 的执行环境与 JS 隔离，WXS 无法调用小程序提供的 API，如 wx.request 等。

3.4 性能优势

WXS 的运行效率高于 JavaScript，尤其在 iOS 设备上表现突出。由于 WXS 是专为微信小程序设计的脚本语言，在某些场景下比 JavaScript 代码运行得更快。

• 在 iOS 设备上：WXS 的运行速度比 JavaScript 快 2 ~ 20 倍。
• 在 Android 设备上：WXS 和 JavaScript 的运行速度没有显著差异。

这种性能上的优势使得 WXS 成为需要高效处理数据的首选脚本语言，尤其在处理大量数据或需要快速响应的场景中。

总结

WXS 是微信小程序中用于处理数据的脚本语言，具有高性能和轻量级的特点。它虽然类似于 JavaScript，但它和 JavaScript 是独立的语言，运行在不同的环境中。通过内嵌或外联的方式，WXS 可以用于页面中处理数据格式化、过滤等操作，但不能用于事件回调或调用微信 API。在性能要求较高的场景中，WXS 是一个非常好的选择。