小程序学习笔记：深入理解小程序中的 WXS及其用法

you4580

于 2025-06-27 09:07:34 发布

阅读量881

点赞数 29

CC 4.0 BY-SA版权

文章标签：小程序学习笔记

本文链接：https://blog.csdn.net/you4580/article/details/148939879

在微信小程序开发的广阔天地里，WXS（WeiXin Script）是一项独特且重要的技术。今天，就让我们一起深入探究 WXS 的奥秘，揭开它的神秘面纱。

一、WXS 是什么

WXS 的全称是微信 script，是小程序里独有的一套脚本语言。它就像是小程序页面渲染的得力助手，结合微信 ML 标签的结构，能构建出页面相应的 UI 结构，主要负责帮助我们渲染页面。

比如说，我们要在小程序页面展示一个商品列表，每个商品都有名称、价格等信息。通过微信 ML 定义页面的基本结构，再借助 WXS 对商品数据进行处理和格式化，就能让页面以美观、规范的形式呈现商品信息。

二、WXS 的应用场景

在微信小程序开发中，WXS 有着独特且广泛的应用场景，其中最典型的就是充当过滤器。在微信 ML 中，无法直接调用页面的.js 文件中定义的函数，但却可以调用 WXS 中定义的函数。这一特性使得 WXS 成为数据处理和展示的关键一环。

假设我们有一个时间戳数据，需要将其转换为 “YYYY-MM-DD HH:MM:SS” 这样的日期格式展示在页面上。这时候就可以在 WXS 中定义一个过滤器函数来处理这个数据。

首先，在 WXS 文件（例如 filter.wxs）中编写代码：

var formatDate = function(timestamp) {
    var date = new Date(timestamp);
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    month = month < 10? '0' + month : month;
    day = day < 10? '0' + day : day;
    hour = hour < 10? '0' + hour : hour;
    minute = minute < 10? '0' + minute : minute;
    second = second < 10? '0' + second : second;
    return year + '-' + month + '-' + day +'' + hour + ':' + minute + ':' + second;
};
module.exports = {
    formatDate: formatDate
};

然后在微信 ML 文件中引入并使用这个过滤器：

<wxs src="./filter.wxs" module="filters"></wxs>
<view>{
  
  {filters.formatDate(timestampData)}}</view>

这样，原本的时间戳数据经过 WXS 的处理，就能以我们期望的格式展示在页面上了。

三、WXS 与 JavaScript 的关系

虽然 WXS 的语法与 JavaScript 有相似之处，但本质上它们是两门完全不同的语言。下面来详细看看它们的区别：

数据类型方面：WXS 支持 number（数字）、string（字符串）、布尔值、object（对象）、function（函数）、array（数组）、date（日期）、正则等数据类型，这点和 JavaScript 类似。但在实际语法上差异较大，比如 WXS 不支持使用 let 或 const 定义变量或常量，也不支持解构赋值、展开运算符、箭头函数、对象属性简写等高级语法，只支持使用 var 定义变量。
遵循规范方面：WXS 遵循 CommonJS 规范，它有 module 对象和 require 函数。通过 require 函数可以导入其他模块，还能通过 module.exports 对象向外共享一些成员，这和 Node.js 有些类似。

在实际开发中，了解这些区别非常重要，能帮助我们更准确地使用 WXS 进行小程序开发。例如，当我们在 WXS 模块中需要复用一些工具函数时，就可以利用 CommonJS 规范进行模块导入和导出。

假设我们有一个计算商品总价的工具函数在 utils.wxs 中：

var calculateTotalPrice = function(products) {
    var total = 0;
    for (var i = 0; i < products.length; i++) {
        total += products[i].price * products[i].quantity;
    }
    return total;
};
module.exports = {
    calculateTotalPrice: calculateTotalPrice
};

在另一个 WXS 文件中，就可以通过 require 函数引入并使用这个函数：

var utils = require('./utils.wxs');
var products = [
    { price: 10, quantity: 2 },
    { price: 15, quantity: 3 }
];
var totalPrice = utils.calculateTotalPrice(products);
module.exports = {
    totalPrice: totalPrice
};

============================================

在微信小程序开发的广阔天地里，WXS（WeiXin Script）作为一门独特的脚本语言，发挥着不可或缺的作用。今天，就让我们深入探究一下 WXS 的基本用法，揭开它神秘的面纱。

一、WXS 简介

WXS 是微信小程序的一套脚本语言，用于在视图层进行复杂的数据处理。它与 JavaScript 有相似之处，但本质上是不同的语言。WXS 借鉴了大量 JavaScript 的语法，这在一定程度上降低了开发者的学习成本，不过二者在功能和应用场景上存在明显差异。

二、内嵌 WXS 脚本的使用

（一）定义内嵌 WXS 脚本

在微信小程序的.wxml 文件中，可以通过<wxs>标签来编写内嵌的 WXS 代码。每个<wxs>标签必须设置module属性，该属性用于指定当前 WXS 的模块名称，方便在页面中访问模块里的成员。

假设我们要在页面中实现将字符串转为大写的功能，代码如下：

<wxs module="m1">
  var toUpper = function(str) {
    return str.toUpperCase();
  }
  module.exports = {
    toUpper: toUpper
  }
</wxs>

在这段代码中，我们在<wxs>标签内定义了一个名为toUpper的函数，它接收一个字符串参数，并使用toUpperCase()方法将其转为大写后返回。然后通过module.exports将toUpper函数共享出去，这样在页面的其他地方就可以调用这个函数了。

（二）使用内嵌 WXS 脚本

在页面的视图层，我们可以通过模块名称调用共享的函数。例如，在页面的.js文件中定义了一个数据username：

Page({
  data: {
    username: '张三'
  }
})

在.wxml文件中，我们希望将username以大写形式渲染到页面上，就可以这样做：

<view>{
  
  {m1.toUpper(username)}}</view>

这样，页面上显示的就是大写的 “张三”，而实际存储在app data中的username值仍然是小写的 “张三”，这体现了 WXS 作为过滤器的作用，只在视图层处理数据显示，不影响数据的原始值。

三、外联 WXS 脚本的使用

（一）定义外联 WXS 脚本

WXS 代码还可以编写在以.wxs为后缀名的文件中。在项目的根目录下创建一个名为tools.wxs的文件，内容如下：

var toLower = function(str) {
  return str.toLowerCase();
}
module.exports = {
  toLower: toLower
}

在这个文件中，我们定义了一个toLower函数，用于将字符串转为小写，然后通过module.exports将其共享出去。需要注意的是，在 WXS 中不支持对象属性的简写形式，必须完整地写出属性和对应的值。

（二）引入并使用外联 WXS 脚本

在页面的.wxml文件中引入外联 WXS 脚本时，需要为<wxs>标签添加module和src两个属性。module属性指定模块名称，src属性指定要引入的脚本的相对路径。

假设在message.wxml文件中要使用刚才定义的tools.wxs脚本，代码如下：

<wxs module="m2" src="../../tools.wxs"></wxs>

在页面的.js文件中定义了一个数据country：

Page({
  data: {
    country: 'CHINA'
  }
})

在.wxml文件中，我们希望将country以小写形式渲染到页面上，就可以调用m2模块中的toLower函数：

<view>{
  
  {m2.toLower(country)}}</view>

保存代码后，页面上显示的就是小写的 “china”。

四、WXS 的特点

（一）与 JavaScript 不同

尽管 WXS 借鉴了 JavaScript 的语法，但它和 JavaScript 是完全不同的两种语言，有着各自的运行机制和应用场景。

（二）不能作为组件的事件回调

WXS 的主要应用场景是作为过滤器配合 Mustache 语法使用。在 WXS 中定义的函数不能作为组件的事件回调，例如下面这样的用法是错误的：

<button bindtap="{
  
  {m1.toUpper}}">点击</button>

WXS 函数只能用于处理数据，在视图层展示时发挥作用，不能直接参与组件的交互逻辑。

（三）具有隔离性

WXS 的运行环境和其他 JavaScript 代码的运行环境相互隔离。这意味着在 WXS 中不能调用 js 文件中定义的函数，也不能调用小程序提供的 API 函数。这种隔离性保证了 WXS 在处理视图层数据时的独立性和安全性。

（四）性能优势（iOS 设备上）

在 iOS 设备上，小程序内的 WXS 脚本性能表现出色，比 JavaScript 代码快 2 - 20 倍左右。不过在安卓设备上，WXS 和 js 的运行效率没有明显差异。这使得在开发针对 iOS 设备的小程序时，合理使用 WXS 可以显著提升性能。