微信小程序脚本语言 WXS 怎么用

这是微信小程序踩坑系列的第二篇，想要了解更多关于微信小程序开发的那些事，欢迎关注个人《微信小程序》专栏。

---

前言

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

下面举个简单的例子：

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

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

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

1、用 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 的作法。

2、 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_empty.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>
复制代码

上例中，我使用了 WXS 的函数功能帮我作条件判断，拿到对应的模板输出，其功能就是一个空数据展现页面。或许你会问这样写的好处是什么？ 那我能够告诉你，它很容易扩展，好比新增一个页面须要对应的空数据模板，那么直接在 switch 语句中加多一个 case 便可。何况若是把逻辑写在 WXML 上代码会很复杂，不容易看懂。 明白了这一点，你会发现，只要是在 WXML 上须要作一些逻辑判断的操做均可以 WXS 代替。 也就是说，在开发中，咱们均可以用 WXS 的函数功能帮助咱们清晰有效地处理 WXML 上渲染的一些视图。

3、思考（引申）

一、 对于须要作成 filter 形式的 WXS，最好把它写在一个.wxs文件里，须要使用时，直接在对应 WXML 上引用便可。

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";
复制代码

<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>
复制代码

二、 在 .wxs 模块中引用其余 wxs 文件模块，可使用 require 函数，可是不能引用其余 js 文件模块。

4、参考连接

• WXS·小程序

（完）

本文做者 Thinker

本文若有错误之处，请留言，我会及时更正

以为对您有帮助的话就点个赞或收藏吧！

欢迎转载或分享，转载时请注明出处

阅读原文