一般用来做过滤处理或计算处理使用
wxs本身是放在UI线程中的,当处理逻辑的现程阻塞时,是不会影响UI线程的,避免跨线程通信的消耗
wxs中不能调用其他JavaScript文件中定义的函数,也不能调用小程序提供的API。
(1)使用环境
WXS代码可以编写在wxml文件中的<wxs>标签内.或以.wxs为后缀名的文件内
(2)变量
支持es5的内容
var声明,不支持let
不支持箭头函数
不支持解构赋值
不支持对象属性简写
(3)使用导出
方式一:创建wsx文件
...
module.exports = {
foo: foo,
bar: bar,
};
module.exports.msg = "some msg";
方式二:在wsx标签中编写
<wxs module="自定义导出的模块变量">
...
module.exports={
f:f
}
</wxs>
即能在文件的任意位置使用,通过自定义导出的模块变量操作
(4)导入
<wxs>标签导入:
<wxs src="x.wxs" module="自定义导出的模块变量" />
即能在文件的任意位置使用,通过自定义导出的模块变量操作
在wxs文件中导入:
var x=require("x.wxs") 不支持解构赋值
不能在js文件中使用
(5)使用示例
<wxs module="m1">
var getMax = function(array) {
...
}
module.exports.getMax = getMax;
</wxs>
<view> {{m1.getMax(array)}} </view> 参数为page.js里面data的array
(6)wxs中绑定事件
目前还不支持原生组件的事件、input和textarea组件的bindinput事件(未验证)
一般用例设置组件的样式和class或动画,原因:
1.相比于传统的在js中绑定事件(即AppService逻辑层),因为wxs是运行在视图层(Webview)的,能够减少进程间的通信
2.以及setData渲染也会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟。
(1)在wxs文件中,设置事件并导出
function tapName(event, ownerInstance) {
event:在原有基础上添加了,instance属性
event.instance:触发事件的组件的ComponentDescriptor实例。
ownerInstance:触发事件的组件所在的组件的ComponentDescriptor实例,如果触发事件的组件是在页面内的,ownerInstance表示的是页面实例。
selectComponent:选择器,返回组件的ComponentDescriptor实例。
selectAllComponents:选择器数组,返回组件的ComponentDescriptor实例数组。
setStyle: Object/string:设置组件样式,支持rpx
设置的样式优先级比组件wxml里面定义的样式高,不能设置最顶层页面的样式。
addClass/removeClass/hasClass:设置的组件class
优先级比组件wxml里面定义的class高,不能设置最顶层页面的 class。
getDataset:返回当前组件/页面的dataset对象
.getDataset().data-之后的名字
callMethod: 调用当前组件/页面在逻辑层(App Service)定义的函数。
.callMethod(函数名,参数) 只能传递一个参数
requestAnimationFrame:requestAnimationFrame一样,用于设置动画。
getState:返回一个object对象,当有局部变量需要存储起来后续使用的时候用这个方法。
triggerEvent:(eventName,detail)和组件的triggerEvent一致。
getComputedStyle:参数与SelectorQuery的computedStyle一致。
setTimeout用于创建定时器。wxs中无法使用setTimeout直接创建定时器
clearTimeout:Number与原生clearTimeout一致。用于清除定时器。
getBoundingClientRect:返回值与SelectorQuery的boundingClientRect一致。
若只针对当前组件,则不需要使用ownerInstance,只需要event.instance即可,否则需要使用ownerInstance.selectComponent或selectAllComponents选择器进行选择
}
(2)引入wxs标签
<wxs src="..." module="x"></wxs>
(3)绑定事件
<view bindtap="{{x.事件名}">jackey</view>
(4)wxs运行所在的视图层(Webview)和js逻辑层(App Service)通信:
视图层调用逻辑层:
利用.callMethod(函数名,参数)进行
逻辑层调用视图层:
利用change:prop监听,prop是标签上的任意属性,值被设置WXS函数就会触发,而不只是值发生改变,所以在页面初始化的时候会调用一次
(1)wxs中设置监听函数
module.exports = {
propObserver: function(newValue, oldValue, ownerInstance, instance) {
...
}
}
(2)设置监听属性,可以监听任意属性
<wxs src="....wxs" module="x"></wxs>
<view change:pop="{{x.propObserver}}" pop="gg">jaffica</view>
当属性第一次设置和之后设置时触发监听函数
版权声明：本文为weixin_43294560原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。