or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

api-interceptors.mdconfig-compilation.mdevent-system.mdframework-runtime.mdindex.mdmp-runtime.mdutility-functions.mdwxs-utilities.md
tile.json

wxs-utilities.mddocs/

WXS Utilities

WeChat Mini Program WXS (WeiXin Script) utility functions for use in WeChat Mini Program expressions and filters. WXS is a JavaScript-like language that runs in WeChat Mini Program's view layer for high-performance data processing and filtering.

Capabilities

Regular Expression Creation

Creates RegExp objects within the WXS runtime environment for pattern matching and text processing.

/**
 * Creates a RegExp object in WXS context for pattern matching
 * @param args - Arguments passed to RegExp constructor (pattern, flags)
 * @returns RegExp object for pattern matching
 */
function getRegExp(...args: any[]): RegExp;

Usage Example:

// In WXS file (*.wxs)
var utils = require('wxs-utilities');

// Create regex for email validation
var emailPattern = utils.getRegExp('^[^@]+@[^@]+\\.[^@]+$', 'i');

// Create regex for phone number formatting
var phonePattern = utils.getRegExp('(\\d{3})(\\d{3})(\\d{4})');

function validateEmail(email) {
  return emailPattern.test(email);
}

function formatPhone(phone) {
  var match = phonePattern.exec(phone);
  if (match) {
    return '(' + match[1] + ') ' + match[2] + '-' + match[3];
  }
  return phone;
}

module.exports = {
  validateEmail: validateEmail,
  formatPhone: formatPhone
};

In WXML template:

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

<view class="form">
  <input 
    bindinput="onEmailInput" 
    placeholder="Enter email"
    class="{{utils.validateEmail(email) ? 'valid' : 'invalid'}}"
  />
  <text class="phone">{{utils.formatPhone(phone)}}</text>
</view>

Date Object Creation

Creates Date objects within the WXS runtime environment for date formatting and manipulation.

/**
 * Creates a Date object in WXS context for date operations
 * @param args - Arguments passed to Date constructor (timestamp, date string, etc.)
 * @returns Date object for date operations
 */
function getDate(...args: any[]): Date;

Usage Example:

// In WXS file (*.wxs)
var utils = require('wxs-utilities');

function formatDate(timestamp) {
  var date = utils.getDate(timestamp);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  
  return year + '-' + 
         (month < 10 ? '0' + month : month) + '-' + 
         (day < 10 ? '0' + day : day);
}

function formatDateTime(timestamp) {
  var date = utils.getDate(timestamp);
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  
  return formatDate(timestamp) + ' ' +
         (hours < 10 ? '0' + hours : hours) + ':' +
         (minutes < 10 ? '0' + minutes : minutes) + ':' +
         (seconds < 10 ? '0' + seconds : seconds);
}

function getRelativeTime(timestamp) {
  var now = utils.getDate();
  var date = utils.getDate(timestamp);
  var diff = now.getTime() - date.getTime();
  var seconds = Math.floor(diff / 1000);
  
  if (seconds < 60) {
    return '刚刚';
  } else if (seconds < 3600) {
    return Math.floor(seconds / 60) + '分钟前';
  } else if (seconds < 86400) {
    return Math.floor(seconds / 3600) + '小时前';
  } else {
    return Math.floor(seconds / 86400) + '天前';
  }
}

function isToday(timestamp) {
  var now = utils.getDate();
  var date = utils.getDate(timestamp);
  
  return now.getFullYear() === date.getFullYear() &&
         now.getMonth() === date.getMonth() &&
         now.getDate() === date.getDate();
}

module.exports = {
  formatDate: formatDate,
  formatDateTime: formatDateTime,
  getRelativeTime: getRelativeTime,
  isToday: isToday
};

In WXML template:

<wxs module="dateUtils" src="./date-utils.wxs"></wxs>

<view class="message-list">
  <view 
    wx:for="{{messages}}" 
    wx:key="id" 
    class="message-item"
  >
    <text class="content">{{item.content}}</text>
    <text class="timestamp">
      {{dateUtils.isToday(item.timestamp) ? 
        dateUtils.getRelativeTime(item.timestamp) : 
        dateUtils.formatDate(item.timestamp)}}
    </text>
  </view>
</view>

WXS Integration Patterns

Data Filtering and Formatting

// filter.wxs
var utils = require('wxs-utilities');

function currencyFormat(amount) {
  if (typeof amount !== 'number') return '¥0.00';
  return '¥' + amount.toFixed(2);
}

function truncateText(text, maxLength) {
  if (!text || text.length <= maxLength) return text;
  return text.substring(0, maxLength) + '...';
}

function highlightSearch(text, keyword) {
  if (!keyword) return text;
  var regex = utils.getRegExp(keyword, 'gi');
  return text.replace(regex, '<span class="highlight">$&</span>');
}

module.exports = {
  currency: currencyFormat,
  truncate: truncateText,
  highlight: highlightSearch
};

Validation and Utilities

// validation.wxs
var utils = require('wxs-utilities');

var patterns = {
  email: utils.getRegExp('^[^@]+@[^@]+\\.[^@]+$'),
  phone: utils.getRegExp('^1[3-9]\\d{9}$'),
  idCard: utils.getRegExp('^\\d{17}[\\dXx]$'),
  url: utils.getRegExp('^https?:\\/\\/.+')
};

function validate(type, value) {
  return patterns[type] && patterns[type].test(value);
}

function maskPhone(phone) {
  var phoneRegex = utils.getRegExp('(\\d{3})\\d{4}(\\d{4})');
  return phone.replace(phoneRegex, '$1****$2');
}

function maskIdCard(idCard) {
  if (idCard.length < 8) return idCard;
  return idCard.substring(0, 4) + '****' + idCard.substring(idCard.length - 4);
}

module.exports = {
  validate: validate,
  maskPhone: maskPhone,
  maskIdCard: maskIdCard
};

Performance Considerations

WXS functions run in the view layer and are optimized for high-frequency operations:

  • Use for data formatting: Date formatting, number formatting, text manipulation
  • Use for simple calculations: Mathematical operations, data transformations
  • Use for filtering: Search filtering, data validation, content filtering
  • Avoid complex logic: Keep WXS functions simple and focused
  • Avoid async operations: WXS doesn't support asynchronous operations

Types

// WXS utility function signatures
interface WXSUtils {
  /** Create RegExp object in WXS context */
  getRegExp(...args: any[]): RegExp;
  /** Create Date object in WXS context */
  getDate(...args: any[]): Date;
}

// Common WXS module structure
interface WXSModule {
  /** Exported functions available in WXML */
  [functionName: string]: (...args: any[]) => any;
}