位置:电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) 推荐学习资源
前言
第1章 uni-app入门
2.1.1 应用生命周期
2.2 路由
2.3 运行环境判断
2.4 页面样式与布局
2.5 template 和 block
2.7 NPM支持
2.8 TypeScript 支持
2.9 小程序组件支持
2.10 WXS
3.1 配置概要
3.2 配置项列表 pages.json
3.3 manifest.json 配置项列表
3.4 package.json
3.5 vue-config.js
3.6 uni.scss
3.7 App.vue 3.7.1 应用生命周期
3.8 main.js
4.1 JSON 简介
4.2 JSON 语法
4.3 JSON 对象
4.4 JSON 数组
4.5 JSON.parse()
4.6 JSON.stringify()转字符串
4.7 eval函数
5.1uni-app常用语法
5.2 uni-app接口的使用
5.3 uni-app中表单的使用
5.4 uni-app中参数的使用
第6章 uni-app常用组件
当前阅读教程:Uni-app入门到精通教程 > 2.10 WXS
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 2.9 小程序组件支持 下一篇: 3.1 配置概要

2.10 WXS

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

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

uni-app可以将wxs代码编译到微信小程序、QQ小程序、APPH5上(HBuilderX 2.2.5-alpha及以上版本)

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


image.png


wxs示例

小白教程网www.2d5.net

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

小白教程网www.2d5.net

,要完整了解 WXS 语法,请参考WXS 语法参考。本示例

小白教程网www.2d5.net

使用
wxs响应touchmove事件,减少视图层与逻辑层通信,使滑动更加丝滑。

<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>

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

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  【重要】 编写wxssjsfilter.js 内容时必须遵循相应语法规范

n  【重要】 module所指定的模块名不可与datamethodscomputed内的属性重名

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

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

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

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

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

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

n  暂不支持在 wxssjsfilter.js 中调用其他同类型文件

n  wxsfilter.js既能内联使用又可以外部引入,sjs只能外部引入

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

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

n  nvue页面暂不支持wxssjsfilter.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



上一篇: 2.9 小程序组件支持 下一篇: 3.1 配置概要
毕业设计网             广告联系QQ:45157718(微信同号)