微信小程序 WXS 不了解一下？骚骚的实现各大前端框架中的 filter

琛ｈ。发布于2019-08-22 17:36 / 2900人阅读

摘要：前言最近有在做小程序开发，在开发的过程中碰到一点小问题，描述一下先。介绍是小程序出的一套脚本语言，用于模板文件中，在模板文件中可以完成页面的结构。不依赖于运行时的基础库脚本，可以在所有版本的小程序中运行。

前言

最近有在做小程序开发，在开发的过程中碰到一点小问题，描述一下先。

本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多，不同的状态码会对应不同的文字，但是在微信小程序中又没有类似 vue 中的 | 方法进行快速的过滤，看了前人的代码大都是用数据遍历洗数据来实现的，说实话，很麻烦，即使提取了公共方法那也麻烦，总之要洗数据就麻烦（对，我就是这么懒，懒人推动世界发展 =3=）

在翻看小程序的文档的时候，正好看到了 WXS 的介绍官方文档一拍脑门，这不就成了么？

正文 WXS 为何物

在上代码之前先简单的介绍一下 WXS 是什么，以及和 javascript 有什么区别，虽然官方文档中都有，但我认为博客的存在意义就是尽量减少看官们的页面跳转，能够在一个页面说明的问题就不要再跳转，外链应该作为课后拓展的手段。

WXS 介绍

是小程序出的一套脚本语言，用于 wxml 模板文件中，在模板文件中可以完成页面的结构。

不依赖于运行时的基础库脚本，可以在所有版本的小程序中运行。

WXS 中不能调用 javascript 中定义的函数或者变量，也不能调用小程序提供的 API，他的运行环境和 javascript 是隔离的。

小程序的条件渲染和循环渲染对 WXS 是无效的，就是说如果 WXS 代码包裹在未渲染的代码中，只要渲染的 wxml 部分调用了此模块，此段 WXS 代码依然会被加载。

由于运行环境的差异，在 ios 设备上小程序的 WXS 会比 javascript 快 2~20 倍，在 android 设备上运行效率无异。

模块想要暴露自己的私有变量和方法，只能通过 module.exports 实现。

若在模块中想要引用其他模块，只能通过 require 实现。

只能使用 var 来定义变量，表现形式和 javascript 一样，会有变量提升。

WXS 模块只能在定义模块的 wxml 文件中被访问到，使用或时，WXS 模块不会被引入到对应的 wxml 文件中。

不能使用 new Date() 应该使用 getDate()。

正确的使用 WXS

上代码

首先，新建一个 config.wxs 文件，用于存储状态码对应转义后的文字。

var orderType = {
  "-1": "type one",
  "0": "type two",
  "1": "type three"
};
module.exports.orderType = orderType;

可以看到我们对外暴露变量的时候用的是 module.exports，在 wxs 文件中只能使用该方法官方文档同样，在引入其他模块的时候，只能使用 require。

接着，创建一个 index.wxs 文件，用于对外暴露一些过滤的方法。

var config = require("./config.wxs");

function _filterOrderType(value) {
  return config.orderType[value.toString()] || "order type undefined"
}
// 时间戳转换成 yyyy-MM-dd HH:mm:ss
function _filterTimestamp(value) {
  // 有些特殊 不能使用 new Date()
  var time = getDate(value);
  var year = time.getFullYear();
  var month = time.getMonth() + 1;
  var date = time.getDate() < 10;
  var hour = time.getHours() < 10;
  var minute = time.getMinutes() < 10;
  var second = time.getSeconds() < 10;
  month = month < 10 ? "0" + month : month;
  date = date < 10 ? "0" + date : date;
  hour = hour < 10 ? "0" + hour : hour;
  minute = minute < 10 ? "0" + minute : minute;
  second = second < 10 ? "0" + second : second;
  return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}

module.exports._filterOrderType = _filterOrderType;
module.exports._filterTimestamp = _filterTimestamp;

最后在我们需要进行过滤处理的 wxml 页面上引入这个模块，使用即可。


{{filter._filterOrderType(item.type)}}
{{filter._filterTimestamp(item.time)}}

这里需要注意一下，在 wxml 页面上使用模块的时候，需要用一个 module="filter" 或者其他的命名来包裹。

结语

WXS 和 javascript 虽然类似，但是还是有一些不同的地方，如果在 debug 的时候发现报错了，可以在底下回复或者直接私信我，虽然不能秒回，但是多一个人多一条思路，也许我能给您提供一些别的思路，或者您的问题会给我带来一些新的思考，我正是这么期待着。

本文可以随意转载，只要附上原文地址即可。

如果您认为我的博文对您有所帮助，请不吝赞赏，点赞也是让我动力满满的手段 =3=。

GPU云服务器云服务器微信小程序框架微信小程序技术实现微信小程序不支持webrtc 微信小程序为什么不火

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95323.html

微信小程序使用filter过滤器几种方式

摘要：与之间通过桥协议通信包括调用指令和各种事件，涉及消息序列化跨线程通信与。一个小程序可以有多个，页面间切换动画比更流畅。业务无法直接控制。 showImg(http://upload-images.jianshu.io/upload_images/326507-e81e06b2cb7187e9.jpeg?imageMogr2/auto-orient/strip%7CimageView2/...

godruoyi 2019-08-21 17:52 评论0 收藏0
微信小程序初体验，入门练手项目--通讯录，后台是阿里云服务器

摘要：最近微信小程序异常火爆，很多人在学习，下面带着大家搭建下微信小程序的调试环境，并调试入门练手项目通讯录和基础即可微信推荐使用的语言，去菜鸟教程简单学习下，，，即可，方便大家学习。一、前言（坑爹的玩意）项目源码：https://github.com/saucxs/wx_... 微信小程序自从2017年，被各种看好，不过一段时间过去了还是反响平平，下半年随着各项功能的开放，很多企业...

kel 2019-08-23 12:41 评论0 收藏0
小程序开发坑点总结

摘要：整个小程序所有分包大小不超过单个分包主包大小不能超过微信小程序主流框架对比应该算是最早发布的小程序开发框架，提供了类的语法风格和特性，现阶段应该也是应用最广泛的框架吧。不过微信官方为了防止下载离线包的时间过程，也严格限制了小程序包的体积。那些年我们踩过的坑css样式不能引用本地图片资源，只能引用线上资源(background-image)，引用本地图片资源只能用标签。{{}}不能执行...

lowett 2019-08-30 15:44 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

pumpkin9 2019-08-23 17:12 评论0 收藏0