微信小程序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

<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_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 上渲染的一些视图。

三、思考（引伸）

1、 对于需要做成 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>

2、 在 .wxs 模块中引用其他 wxs 文件模块，可以使用 require 函数，但是不能引用其他 js 文件模块。

本文参考：微信小程序开发基础教程 https://www.html.cn/study/20.html

以上就是微信小程序WXS怎么使用的详细内容，更多内容请关注技术你好其它相关文章！