13.WXS

WXS是一套运行在视图层的脚本语言？？？，微信端的规范详见。
它的特点是运行在视图层。
当需要避免逻辑层和渲染层交互通信折损时，可采用wxs。
uni-app可以将wxs代码编译到微信小程序、QQ小程序、app-vue、H5上（uni-app 2.2.5及以上版本）
与wxs类似，百度小程序提供了Filter、阿里小程序提供了SJS，uni-app也支持使用这些功能，并将它们编译到百度和阿里的小程序端。不过它们的功能还不如wxs强大。此外头条系小程序自身不支持类似功能。

平台差异说明

App端nvue解决此类需求，不应该使用wxs，而是使用bindingx。

wxs示例

以下是一些使用 WXS 的简单示例，要完整了解 WXS 语法，请参考WXS 语法参考。
本示例使用wxs响应touchmove事件，减少视图层与逻辑层通信，使滑动更加丝滑。

<template>
    <view>
        <view class="area">
            <view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable">{{test.msg}}</view>
        </view>
    </view>
</template>
<script module="test" lang="wxs">
    var startX = 0
    var startY = 0
    var lastLeft = 50; var lastTop = 50
    function touchstart(event, ins) {
        console.log("touchstart")
      var touch = event.touches[0] || event.changedTouches[0]
      startX = touch.pageX
      startY = touch.pageY
    }
    function touchmove(event, ins) {
      var touch = event.touches[0] || event.changedTouches[0]
      var pageX = touch.pageX
      var pageY = touch.pageY
      var left = pageX - startX + lastLeft
      var top = pageY - startY + lastTop
      startX = pageX
      startY = pageY
      lastLeft = left
      lastTop = top
      ins.selectComponent('.movable').setStyle({
        left: left + 'px',
        top: top + 'px'
      })
        return false
    }
    module.exports = {
        msg: 'Hello',
      touchstart: touchstart,
      touchmove: touchmove
    }
</script>
<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
        }
    }
</script>
<style>
.area{
    position: absolute;
    width: 100%;
    height: 100%;
}
.movable{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px;
    color: white;
    text-align: center;
    line-height: 100px;
    background-color: red;
}
</style>

支付宝小程序，百度小程序官方暂未支持事件响应，不过也可以使用对应的SJS、Filter过滤器实现一些数据处理的操作，以下代码展示了一个时间格式化的小功能
index.vue

<template>
    <view>
        <view>
            {{timestr}} 是
        </view>
        <view>
            {{utils.friendlyDate(timestamp)}}
        </view>
    </view>
</template>
<script module="utils" lang="filter" src="./utils.filter.js"></script>
<script module="utils" lang="sjs" src="./utils.sjs"></script>
<script>
    export default {
        data() {
            return {
                timestr: '2019/08/22 10:10:10',
                timestamp: 0
            }
        },
        created() {
            this.timestamp = new Date(this.timestr).getTime()
        },
        methods: {
        }
    }
</script>

utils.sjs 与 utils.filter.js 内容一致

export default {
    friendlyDate: (timestamp) => {
        var formats = {
            'year': '%n% 年前',
            'month': '%n% 月前',
            'day': '%n% 天前',
            'hour': '%n% 小时前',
            'minute': '%n% 分钟前',
            'second': '%n% 秒前',
        };
        var now = Date.now();
        var seconds = Math.floor((now - parseInt(timestamp)) / 1000);
        var minutes = Math.floor(seconds / 60);
        var hours = Math.floor(minutes / 60);
        var days = Math.floor(hours / 24);
        var months = Math.floor(days / 30);
        var years = Math.floor(months / 12);
        var diffType = '';
        var diffValue = 0;
        if (years > 0) {
            diffType = 'year';
            diffValue = years;
        } else {
            if (months > 0) {
                diffType = 'month';
                diffValue = months;
            } else {
                if (days > 0) {
                    diffType = 'day';
                    diffValue = days;
                } else {
                    if (hours > 0) {
                        diffType = 'hour';
                        diffValue = hours;
                    } else {
                        if (minutes > 0) {
                            diffType = 'minute';
                            diffValue = minutes;
                        } else {
                            diffType = 'second';
                            diffValue = seconds === 0 ? (seconds = 1) : seconds;
                        }
                    }
                }
            }
        }
        return formats[diffType].replace('%n%', diffValue);
    }
}

注意

引入方式

<!-- 内联 -->
<script module="test" lang="wxs">
  //...code
</script>
<script module="utils" lang="filter">
  //...code
</script>
<!-- 外部引入 -->
<script module="utils" lang="wxs" src="./utils.wxs"></script>
<script module="utils" lang="filter" src="./utils.filter.js"></script>
<script module="utils" lang="sjs" src="./utils.sjs"></script>

• 【重要】** 编写wxs、sjs、filter.js 内容时必须遵循相应语法规范**
• 【重要】 module所指定的模块名不可与data、methods、computed内的属性重名
• 目前各个小程序正在完善相关规范，可能会有较大改动，请务必仔细阅读相应平台的文档
• 支付宝小程序请使用sjs规范，详见
• 支付宝小程序sjs只能定义在.sjs 文件中，然后使用<script>标签引入
• 支付宝小程序script的标签属性name、from被统一为了module、src以便后续实现多平台统一写法
• 百度小程序中请使用Filter规范，详见
• 百度小程序Filter只能导出function函数
• 暂不支持在 wxs、sjs、filter.js 中调用其他同类型文件
• wxs、filter.js既能内联使用又可以外部引入，sjs只能外部引入
• QQ小程序目前对内联的 wxs 支持不好，部分写法可能会导致编译出错，尽量使用外部引入的方式
• 在微信自定义组件中wxcomponents也可以使用wxs
• nvue页面暂不支持wxs、sjs、filter.js
• 各个script标签会分别被打包至对应支持平台，不需要额外写条件编译
• 自HBuilderX 2.2.5开始，不推荐使用各个小程序自有的引入方式，推荐使用script标签引入
• App和H5端，提供了wxs的升级版，更加强大，见下面的 renderjs 章节