Wxs相当于一个独立模块，相当于一个独立模块对象。它是通过module.exports公开的，可以在引入到文件中后使用。下面这篇文章主要介绍微信小程序中wxs文件的一些神奇功能，有需要的朋友可以参考一下。
目录
前言应用过滤器拖拽文件，交叉引用wxs到js逻辑层，交叉引用wxs文件，wxs获取dataset(wxs获取wxml数据)，注意事项总结
前言
Wxs文件是小程序中的逻辑文件，和wxml结合使用。
与js不同，wxs可以直接作用于视图层，不需要视图层与逻辑层之间的setData数据交互。
因为这个特性，wxs非常适合优化小程序的频繁交互；
应用
过滤器
在IOS中，wxs运行速度比js快很多，在android中，两者表现相当。
用wxs做滤镜也能在一定程度上提升性能；让我们看一个过滤器来理解它的语法。
wxs文件：
var toDecimal2=函数(x) {
var f=parse float(x)；
if (isNaN(f)) {
返回' 0.00 '
}
var f=math . round(x * 100)/100；
var s=f . tostring()；
var rs=s.indexOf(' . ');
如果(0卢比){
rs=s .长度；
s=' . '；
}
while (s.length=rs 2) {
s=“0”；
}
返回s；
}
module.exports=toDecimal2
上面的代码实现了数字保留两位小数的功能。
wxml文件：
wxs src='。/filter . wxs ' module=' filter '/wxs
text{{filter(1)}}/text
基本语法：通过wxs标签在视图文件中引入，模块值自命名。之后，可以通过wxml中的filter调用该方法。
上面的代码展示了wxs的运行逻辑，让我们可以像调用函数一样调用wxs中的方法；
让我们来看看wxs对wxml页面事件的性能。
拖拽
使用交互时(拖动、上下滑动、左右滑动等。)，如果依赖js逻辑层，会需要大量频繁的数据通信。卡顿是必然的；
用wxs文件代替交互，不需要频繁使用setData，产生实时的海量数据通信，从而节省性能。
下面展示一个拖拽例子
Wxs文件：
功能触摸开始(事件){
var touch=event . touches[0]| | event . changed touches[0]
startX=touch.pageX
startY=touch.pageY
}
事件参数event和js中的事件event内容中touches和changedTouches属性一致
函数touchmove(事件，ins) {
var touch=event . touches[0]| | event . changed touches[0]
ins.selectComponent('。div’)。setStyle({
左：startX - touch.pageX 'px '，
top: startY - touch.pageY 'px '
})
}
ins(第二个参数)为触发事件的视图层wxml上下文。可以查找页面所有元素并设置style,class(足够完成交互效果)
注意：在参数event中同样有一个上下文实例instance；事件中实例instance的作用域在触发事件的元素内，而事件的ins参数的作用域在触发事件的组件内。
模块.导出={
touchstart: touchstart，
触摸移动：触摸移动，
}
最后，扔掉这个方法，给它一个对wxml文件的引用。
Wxml文件
wxs module='action' src='。/movable.wxs'/wxs
view class=' div ' bindtuchstart=' { { action . touch start } } ' bindtuchmove=' { { action . touch move } } '/view
上面的例子解释了事件的基本交互用法。
文件之中相互传参
在事件交互中，每个文件中传递参数是必不可少的。以下是一些常用的。
wxs传参到js逻辑层
Wx文件：
var dragStart=function (e，ins) {
ins.callMethod('callback '，' sldkfj ')
}
在js文件中：
回拨(e){
console.log(e)
}
//sldkfj
使用callMethod方法在js中执行回调方法。还可以实现参数传递；
！CallMethod不支持调用回调函数*
js逻辑层传参到wxs文件
在js文件中：
处理器(e){
this.setData({a:1})
}
Wxml文件：
wxs module='action' src='。/movable.wxs'/wxs
查看更改：prop=' { { action . change } } ' prop=' { { a } } '/view
Wx文件：
change(新值，旧值){}
js文件中的参数需要通过wxml文件传递给wxs。
js文件触发处理程序事件。更改A的值后，最新的A被传递给wxml。
wxs中适当变化将触发wxs中的变化事件。更改将接收最新的属性值。
wxs中获取dataset(wxs中获取wxml数据）
wxs中的代码
var dragStart=function (e) {
var index=e . current target . dataset . index；
var index=e.instance.getDataset()。指数；
}
上面提到e.instance是当前触发事件的元素实例。
因此，e.instance.getDataset()获取当前触发事件的数据集数据集。
注意点
Wxs和js是两种不同的脚本语言。但是语法基本和es5一样，不支持es6语法。GetState在多元素交互方面很实用，欢迎探讨。
不知道是否是支持的语法可以跳转到官网文档；Wx运算符，语句，基本类库，数据类型
总结
关于微信小程序中wxs文件的一些神奇功效的这篇文章就到这里了。更多wxs文件在微信小程序中的神奇效果，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。