CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dcloudio--uni-mp-weixin

WeChat Mini Program platform adapter for uni-app enabling cross-platform Vue.js development

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}

Install with Tessl CLI

npx tessl i tessl/npm-dcloudio--uni-mp-weixin

docs

api-interceptors.md

config-compilation.md

event-system.md

framework-runtime.md

index.md

mp-runtime.md

utility-functions.md

wxs-utilities.md

tile.json