wxs 无法引入外部 js 过滤器,require 仅支持 .wxs 文件;复用逻辑需手动重写适配:改 var、禁箭头函数、用 getdate/getregexp、限字符串方法;uni-app 中 wxs 与 vue.filter 完全隔离,须显式通过 引入调用。

WXS 不能引入外部 JS 过滤器
WXS 是微信小程序的独立脚本环境,和 JS 完全隔离,require 只支持 .wxs 文件,不支持 .js,所以你写好的 filters/index.js 或 utils/format.js 在 WXS 里根本无法 require,也不存在“引入外部过滤器逻辑”这回事。
wxs 中复用过滤逻辑只能靠手动搬代码
如果你已在 JS 层写了日期格式化、金额处理等函数,想在 WXS 模板里用(比如 {{ price | toMoney }}),必须把对应逻辑重写一份到 .wxs 文件里——不是引用,是复制粘贴再适配:
- 去掉
let/const,全改用var - 不用箭头函数,改写成
function声明 - 时间对象用
getDate(timestamp),不能用new Date() - 正则用
getRegExp(pattern, flags),不能直接写/\d+/g - 字符串方法仅支持基础版:
toString()、substr()、replace()(但不支持正则全局 flag)
例如 JS 里的 toMoney:
// utils.js
export function toMoney(money) {
return '¥' + Number(money).toLocaleString()
}
对应 WXS 版本得写成:
// filters.wxs
function toMoney(money) {
var num = money * 1
if (isNaN(num)) return '¥0'
// toLocaleString 不可用,手动千分位
var parts = String(num).split('.')
var intPart = parts[0]
var decPart = parts[1] || ''
var result = ''
for (var i = intPart.length - 1; i >= 0; i--) {
if ((intPart.length - i) % 3 === 0 && i !== intPart.length - 1) {
result = ',' + result
}
result = intPart[i] + result
}
return '¥' + result + (decPart ? '.' + decPart : '')
}
module.exports = {
toMoney: toMoney
}
uni-app 中 wxs 和 Vue filter 别混用
很多人以为 “wxs 是小程序版 filter”,其实二者定位不同:
-
Vue.filter运行在 JS 层,只对{{ }}和v-bind生效,且仅 Vue 2 支持; -
wxs运行在视图层(类似 Web Worker),能提前执行、减少 JS-View 通信,但只在微信/支付宝小程序生效,H5 和 App 端完全不走这套; - 你在
main.js里注册的Vue.filter('toMoney'),在微信小程序模板里写{{ price | toMoney }}是无效的——它走的是 Vue 渲染流程,不是 WXS;要走 WXS,必须显式用<script module="xxx" lang="wxs"></script>引入并调用xxx.toMoney(price)。
最常被忽略的一点:WXS 模块名(module="xxx")必须和调用时的命名一致,且大小写敏感;路径必须是相对路径,不能带 ../ 跨目录引用,否则编译报错但无明确提示。











