• 微信小程序WXS


    微信小程序中,WXS(WeChat Script)是一种专门用于在视图层进行数据处理和业务逻辑的脚本语言。它与小程序的逻辑层(JavaScript)相对应,但专门设计用于在视图层(WXML)中执行,旨在提升小程序的渲染效率和性能。

    主要特点和用途:
    数据处理和逻辑计算:

    格式化数据:例如日期格式化、数字格式化等。
    逻辑判断:用于简单的条件判断、循环等逻辑。
    字符串处理:如截取、拼接等操作。
    模块化和导出:

    每个 WXS 文件都可以通过 module.exports 导出一个或多个函数、变量,这些导出可以在 WXML 中被引用和调用。
    与 WXML 结合使用:

    在 WXML 中可以通过 标签引入和使用 WXS 文件,类似于引入 JavaScript 模块。
    在 WXS 中定义的函数可以直接在 WXML 表达式中调用和运行。
    性能优化:

    WXS 的设计目标之一是减少数据传输和处理的开销,因此适合于在视图层处理简单的数据逻辑和操作,避免频繁地与逻辑层进行通信和数据交换。
    使用示例:

    1. 数据格式化
    // utils.wxs
    module.exports = {
      formatTime: function(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        return `${year}-${this.formatNumber(month)}-${this.formatNumber(day)}`;
      },
      formatNumber: function(n) {
        return n < 10 ? '0' + n : n;
      }
    }
    
    <wxs src="./utils.wxs" module="utils">wxs>
    
    <view>{{utils.formatTime(new Date())}}view> 
    
    1. 条件判断和循环
    // logic.wxs
    module.exports = {
      isEven: function(n) {
        return n % 2 === 0;
      }
    }
    
    <wxs src="./logic.wxs" module="logic">wxs>
    
    <view wx:for="{{[1, 2, 3, 4]}}">
      <text>{{item}} is {{logic.isEven(item) ? 'even' : 'odd'}}text>
    view>