微信小程序 WXS 的使用方式与操作要点

本篇文章给大家带来的内容是关于微信小程序wxs怎么使用，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

下面举个简单的例子：

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

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

一、用 WXS 实现 filter

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

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

二、 WXS 还能做什么

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

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

三、思考（引伸）

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

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

以上就是微信小程序 WXS 的使用方式与操作要点的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。