2.10 WXS

WXS是微信小程序的一套脚本语言，规范详见。

它的特点是运行在渲染层。当需要避免逻辑层和渲染层交互通信折损时，可采用wxs。

uni-app可以将wxs代码编译到微信小程序、QQ小程序、APP、H5上（HBuilderX 2.2.5-alpha及以上版本）

与wxs类似，百度小程序提供了Filter、阿里小程序提供了SJS，uni-app也支持使用这些功能，并将它们编译到百度和阿里的小程序端。不过它们的功能还不如wxs强大。此外头条系小程序自身不支持类似功能。

wxs示例

小白教程网www.2d5.net

以下是一些使用 WXS 的简单示例

小白教程网www.2d5.net

<template>

    <view>

        <view>

            <view @touchstart="test.touchstart" @touchmove="test.touchmove">{{test.msg}}</view>

        </view>

    </view>

</template>

<script module="test">

    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" src="./utils.filter.js"></script>

<script module="utils" 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">

  //...code

</script>

<script module="utils">

  //...code

</script>

<!-- 外部引入 -->

<script module="utils" src="./utils.wxs"></script>

<script module="utils" src="./utils.filter.js"></script>

<script module="utils" src="./utils.sjs"></script>

n  【重要】 编写wxs、sjs、filter.js 内容时必须遵循相应语法规范

n  【重要】 module所指定的模块名不可与data、methods、computed内的属性重名

n  目前各个小程序正在完善相关规范，可能会有较大改动，请务必仔细阅读相应平台的文档小白教程网

n  支付宝小程序请使用sjs规范，详见

n  支付宝小程序sjs只能定义在.sjs 文件中，然后使用<script>标签引入

n  支付宝小程序script的标签属性name、from被统一为了module、src以便后续实现多平台统一写法

n  百度小程序中请使用Filter规范，详见

n  百度小程序Filter只能导出function函数

n  暂不支持在 wxs、sjs、filter.js 中调用其他同类型文件

n  wxs、filter.js既能内联使用又可以外部引入，sjs只能外部引入

n  QQ小程序目前对内联的 wxs 支持不好，部分写法可能会导致编译出错，尽量使用外部引入的方式

n  在微信自定义组件中wxcomponents也可以使用wxs

n  nvue页面暂不支持wxs、sjs、filter.js

n  各个script标签会分别被打包至对应支持平台，不需要额外写条件编译

n  自HBuilderX 2.2.5-alpha开始，不推荐使用各个小程序自有的引入方式，推荐使用script标签引入

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977

（4）毕业设计网

http://www.pc-365.net

（5）小程序编程网

http://www.4317.org

（6）计算机编程网

http://www.05423.com