微信小程序视图层处理增强之WXS

摘要：WXS算是专供WXML调用的有独立作用域的JS模块（不是全功能的JS，感觉有所限制）。举个例子，在这之前，我们是没有办法在WXML的数据绑定括号{{}}中调用JS函数的，所以在WXML层面就缺少了进一步做数据处理的能力。

熟悉微信小程序开发框架的开发者，肯定会对其视图层WXML中缺失的一个功能耿耿于怀，那就是没有办法在视图层对数据进行格式化处理。比如我们从后端获取到一个包含了时间戳数据的数组，然后需要在界面上把这些日期都格式化显示为2017-01-01这种格式的日期形式，在Vue, Angular之类的前端Web框架中，一般在视图层都提供了如filter之类相应比较好用的方案。
而在现有的微信小程序代码中？你能怎么做？估计我们的做法要么是在Page代码中遍历一次数组，做一下格式化；要么，只能让后端返回已经格式化好的数据了。
对于追求程序代码优雅的程序员来说，这简直就是心中一个巨大的疙瘩！微信小程序团队估计没少受这方面的吐槽。因此，这次WXS的推出算是满足了对这种需求的渴望吧。
WXS算是专供WXML调用的有独立作用域的JS模块（不是全功能的JS，感觉有所限制）。举个例子，在这之前，我们是没有办法在WXML的数据绑定括号{{}}中调用JS函数的，所以在WXML层面就缺少了进一步做数据处理的能力。
下列代码是不工作的：

<!-- wxml文件 -->
<view>{{testFunc(name)}}</view>

// some-page.js
Page({
    data: {
        name: "一斤代码"
    },

    testFunc: function (name) {
          return "Hello," + name
    }
})

而有了WXS之后，我们就可以实现我们预期的功能了：

<!-- wxml文件 -->
<view>{{myModule.testFunc(name)}}</view>

<wxs module="myModule">
    function testFunc(name) {
        return "Hello," + name
    }
    module.exports.testFunc = testFunc
</wxs>

// some-page.js
Page({
    data: {
        name: "一斤代码"
    }
})

WXS可以直接定义在wxml文件的标签体中，也可以写在独立的.wxs后缀名的文件中，然后在wxml文件中通过的形式引入。
如要要在WXS代码中去引用其他独立.wxs文件，可以通过 require()函数来引入，基本上都是我们熟悉的方式：

var formatUtil = require("./format-util.wxs");
var now = getDate()

formatUtil.formatDate(now)

所以，WXS在功能方面，并没有什么复杂的东西，唯一需要特别注意一些的，就是它的作用域了：
模块只能在定义模块的 WXML 文件中被访问到。使用或时，模块不会被引入到对应的 WXML 文件中。
标签中，只能使用定义该的 WXML 文件中定义的模块。

来源：https://blog.csdn.net/tianxintiandisheng/article/details/82086275

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_1036