微信小程序中的wxs模块怎么用

这篇文章将为大家详细讲解有关微信小程序中的wxs模块怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

WXS的使用

wxs是专门用于wxml页面的，它实现的是在视图层调用函数的功能

调用方式

虽然在微信文档中有说明，wxs是小程序的一套脚本语言，有自己的语法，但是大部分语法还是和js区别不大，有兴趣的可以自行翻看文档。微信小程序中提供了两种调用方式，这里不做过多赘述，直接贴代码

wxml：

主页//新建index.wxs文件，在wxs标签中自定义路径引入，IndexWxs为自定义的module名        

\

wxs：

var x = 0,y = 0;//viewData 使用小程序获取节点信息的方法，通过data-传入var viewData = {  height: 0,//滑块的宽高  width: 0,  windowHeight: 0,//屏幕的宽高  windowWidth: 0}var eventInstance = nullmodule.exports = {//触摸开始  touchStartByBlock: function (event) {    eventInstance = event;// event.instance为组件实例    var setViewData = event.currentTarget.dataset//获取data-传入的值    if (setViewData && setViewData.edge && setViewData.edge.windowHeight) {      viewData = setViewData.edge    }    x = event.changedTouches[0].clientX - viewData.width/2//滑动过程中保持手指在模块中心位置    y = event.changedTouches[0].clientY - viewData.height/2  },//触摸移动中，可以给x,y写一些边界值判断，防止滑块越界，此处不做展示  touchMoveByBlock: function (event) {    x = event.changedTouches[0].clientX - viewData.width/2    y = event.changedTouches[0].clientY - viewData.height/2    event.instance.setStyle({//使用setStyle设置的样式权重比wxml设置的样式高      transform: 'translate('+x+'px'+','+y+'px)'//setStyle需使用字符串    })  },//松开手指，触摸结束时  touchEndByBlock: function (event) {    //吸边处理，判断当前手指位置在屏幕的哪一边    x = viewData.windowWidth/2 < x ? viewData.windowWidth-viewData.width : 0;    y = y > viewData.windowHeight-viewData.height ? viewData.windowHeight-viewData.height : y    event.instance.setStyle({      transform: 'translate('+x+'px'+','+y+'px)',    })  },//当props的monitor数据发生变化的时候触发该方法，会自动传入monitor当前值，一些业务逻辑可以在此处处理  chooseShow: function (monitor) {    console.log('监听到更新，monitor=',monitor);  }}

关于"微信小程序中的wxs模块怎么用"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。