微信小程序WXS怎么使用

前几天有个同学问我 微信小程序支持管道过滤器 吗？
用过 angular 或者 vue 的同学都应该会在项目里用到 filter，然而在小程序中是不支持的。但是也有一些解决办法
但我只是关心 WXS 能不能实现 filter 以及还能做什么？带着这样的疑问，我重新看了一遍微信小程序官方的 WXS。

下面举个简单的例子：

<wxs module="m1">var msg = "hello world"; module.exports.message = msg;</wxs><view>{{m1.message}}</view>

上面的例子可以输出 hello world 页面，当你阅读完 官方文档，会发现小程序的脚本语言的功能很捉鳖，比如只支持 es5 语法，不支持外部引入 js 等等。但是我仍然期待它未来支持更多的能力。

下面接入正题，探索文章题目的疑问

一、用 WXS 实现 filter

前端通常有一个需求，那就是把后台传过来的时间戳转为不同规格的日期后显示出来。以往的做法一般是用一个函数对数据进行包装，然后输出到页面。就像前面提到的那篇文章里面所说的第一种方法一样，但是有人考虑到性能问题，认为在js里面循环处理比较耗性能（这点我不做评价，毕竟自己没有真正测试过）
关于日期格式化的例子在前面提到的文章已经有了，在这里我再举一个比较简单的例子。在我开发过的项目里面，后台返回的网路图片地址通常是相对地址，也就是说要把图片显示出来，还得加上配置好的域名前缀。而我通常是拿到数据后进行遍历操作，把需要前端展示的图片加上前缀。但是有了 WXS，我们可以这样做：

<wxs module="filter">    function getFullPath(url) {        return "https://shiyuanjieyi.cn" + url    }    module.exports.getFullPath = getFullPath</wxs><image src="{{filter.getFullPath(url)}}"></image>

在上面这个例子中，可以看到整个过程基本类似于 vue 等框架自定义 filter 的做法。

二、 WXS 还能做什么

其实很多时候，我们并不了解 WXS 还能做更多条件渲染的一些东西。请看下面一个例子：

<wxs module="filter">  function getData(entry, type) {    var imgUrl = '';    var content = '';    switch (entry) {      case 'needs':        imgUrl = '/images/goods_empty.png';        content = '暂时没有需求';        break;      case 'goods':        imgUrl = '/images/goods_em制作软件
pty.png';        content = '暂时没有商品';        break;      case 'activity':        imgUrl = '/images/activity_empty.png';        content = '该专栏暂时没有活动';        break;      case 'channel':        imgUrl = '/images/article_empty.png';        content = '该专栏暂时没有资讯';        break;      case 'micro-circle':        imgUrl = '/images/article_empty.png';        content = '没有相关的话题哦';        break;      case 'needs-release':        imgUrl = '/images/goods_release_empty.png';        content = '你还没有发布任何需求哦';        break;      case 'goods-release':        imgUrl = '/images/goods_release_empty.png';        content = '你还没有发布任何商品哦';        break;      case 'goods-collection':        imgUrl = '/images/goods_collect_empty.png';        content = '你还没有收藏任何商品哦';        break;      case 'apply':        imgUrl = '/images/activity_apply_empty.png';        content = '你还没有报名任何活动哦';        break;      case 'activity-collection':        imgUrl = '/images/activity_collect_empty.png';        content = '你还没有收藏任何活动哦';        break;      default:        break;    }    if (type === 'image') {      return imgUrl;    } else {      return content;    }  }  module.exports.getData = getData;</wxs><template name="nodata">  <view class="no-data">    <image src="{{filter.getData(entry, 'image')}}" class="no-data-icon"></image>    <view class="no-data-text">{{filter.getData(entry, 'content')}}</view>  </view></template>              
              

            
微信小程序