微信小程序wxs使用方法

在微信小程序的 WXML 里，不能 直接在 {{}} 里调用 substring() 和 replace() 这样的 JavaScript 方法。你需要在 JS 代码中预处理 数据，然后在 WXML 里直接使用。

---

✅ 解决方案

方法 1：在 computed 里格式化（推荐）

如果你用的是 computed 计算属性（微信小程序 2.27.0+ 支持），可以这样做：

JS 代码

Page({
  data: {
    weekDays: ["2025-03-10", "2025-03-11", "2025-03-12"], // 原始数据
  },
  computed: {
    formattedWeekDays() {
      return this.data.weekDays.map(date => date.slice(5).replace("-", "/"));
    }
  }
});

WXML 代码

<text class="tipsText">{{formattedWeekDays[index]}}</text>

✅ 优点：性能好，逻辑清晰，不重复计算。

---

方法 2：在 setData 时预处理

如果你的 小程序版本较低 或者 不支持 computed，可以在 setWeekDays 里直接格式化：

JS 代码

setWeekDays(day) {
    let todayWeek = day.format("d") ? dayjs(day).format("d") - 1 : 6;
    let First = day.subtract(todayWeek, "day"); 
    let _week = [];

    for (let index = 0; index < 7; index++) {
        let fullDate = First.add(index, "day").format("YYYY-MM-DD"); // 2025-03-10
        let formattedDate = fullDate.slice(5).replace("-", "/"); // 03/10
        _week.push({ full: fullDate, short: formattedDate });
    }

    this.setData({
        weekDays: _week
    });
}

WXML 代码

<text class="tipsText">{{weekDays[index].short}}</text>

✅ 优点：数据存两种格式，适应不同需求。

---

方法 3：写一个 wxs 过滤器

如果你不想改 JS 代码，可以用 WXS（微信小程序扩展语法）：

WXS 代码（新建 utils.wxs）

function formatDate(date) {
  return date.substring(5).replace("-", "/");
}
module.exports = {
  formatDate: formatDate
};

WXML 代码

<wxs src="utils.wxs" module="utils" />
<text class="tipsText">{{utils.formatDate(weekDays[index])}}</text>

✅ 优点：代码分离，模板更清晰。
⚠️ 缺点：WXS 运行环境有限，调试不如 JS 方便。

---

🚀 总结

方法	适用场景	优点
方法 1：computed 计算属性 ✅	微信小程序 2.27.0+	性能好，代码清晰
方法 2：setData 预处理 ⚡	所有版本	数据存两种格式，最灵活
方法 3：WXS 过滤器	希望在 WXML 里处理	代码分离，但调试不便

如果你的微信小程序版本较新，方法 1（computed）最推荐！如果你的版本较旧，方法 2（setData 预处理）最通用！ 🚀