微信小程序条件渲染太多咋办？微信小程序静态页面使用js,那就用wxs!

最新推荐文章于 2024-03-26 22:32:00 发布

G.Bro

最新推荐文章于 2024-03-26 22:32:00 发布

阅读量424

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 wxs

本文链接：https://blog.youkuaiyun.com/fasdfdssdf/article/details/99682670

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文探讨了如何在微信小程序中处理大量条件渲染的问题，提出使用wxs作为解决方案。通过创建wxs模块并在wxml中引入，可以更高效地进行复杂的渲染判断，例如对用户多选答案的渲染。wxs的使用有助于提升小程序的性能和代码可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我一朋友开发过程中问我有更好的方式解决太多的条件渲染，如图

在这里插入图片描述
然我举荐他使用wxs

wxs使用方法

新建一个***.wxs

var filters = {
  /**保留小数点*/
  toFix: function(value, digit) {  /**保留小数点*/
    return value.toFixed(digit)
  },
  /**数组切割*/
  toArr: function(arr, str) {
    return arr.join(str)
  },
  /**转换数字*/
  toNumber: function(val) {
    console.log('=======', val);
    return Number(val);
  },
  /**时间差*/
  timeRub: function(this_time, past_time) {
    var past_times = getDate(past_time).getTime(),
      this_times = getDate(this_time).getTime(),
      rest = this_times - past_times,
      unit;
    if (rest >= 1000 && rest < 60000) {
      unit = Math.floor(rest / 1000) + '秒前';
    } else if (rest >= 60000 && rest < 3600000) {
      unit = Math.floor(rest / 60000) + '分钟前';
    } else if (rest >= 3600000 && rest < 86400000) {
      unit = Math.floor(rest / 3600000) + '小时前';
    } else if (rest >= 86400000) {
      unit = Math.floor(rest / 86400000) + '天前';
      if (Math.floor(rest / 86400000) == 30) {
        unit = '1个月前'
      }
      if (Math.floor(rest / 86400000) > 30) {
        var date = getDate(past_time),
          Y = date.getFullYear() + '-',
          M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-',
          D = date.getDate() + ' ';
        unit = Y + M + D;
      }
    }
    return unit;
  },

}
module.exports = {
  toFixs: filters.toFix,
  toArrs: filters.toArr,
  toNumber: filters.toNumber,
  timeRub: filters.timeRub
}

然后在用到的wxml上引入

在这里插入图片描述