WeChat Mini Program platform adapter for uni-app enabling cross-platform Vue.js development
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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.
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>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>// 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.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
};WXS functions run in the view layer and are optimized for high-frequency operations:
// 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