微信小程序中wxs文件的妙用

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

wxs文件是小程序中的逻辑文件，它和wxml结合使用。
不一样于js， wxs能够直接做用到视图层，而不须要进行视图层和逻辑层的setData数据交互；
由于这个特性，wxs很是适合应用于优化小程序的频繁交互操做中；

应用

过滤器

在IOS环境中wxs的运行速度要远高于js，在android中二者表现至关。
使用wxs做为过滤器也能够必定幅度提高性能；让咱们来看一个过滤器来了解其语法。

wxs文件:

var toDecimal2 = function (x) {
  var f = parseFloat(x);
  if (isNaN(f)) {
    return '0.00'
  }
  var f = Math.round(x * 100) / 100;
  var s = f.toString();
  var rs = s.indexOf('.');
  if (rs < 0) {
    rs = s.length;
    s += '.';
  }
  while (s.length <= rs + 2) {
    s += '0';
  }
  return s;
}
module.exports = toDecimal2
复制代码

上面的代码实现了数字保留两位小数的功能。

wxml文件：

<wxs src="./filter.wxs" module="filter"></wxs>
<text>{{filter(1)}}</text>
复制代码

基本语法：在视图文件中经过wxs标签引入，module值是自定义命名，以后在wxml中能够经过filter调用方法

上面的代码展现了 wxs的运行逻辑，让咱们能够像函数同样调用wxs中的方法；
下面再看一下wxs针对wxml页面事件中的表现。

拖拽

使用交互时（拖拽、上下滑动、左右侧滑等）若是依靠js逻辑层，会须要大量、频繁的数据通讯。卡顿是不可避免的；
使用wxs文件替代交互，不须要频繁使用setData致使实时大量的数据通讯,从而节省性能。

下面展现一个拖拽例子

wxs文件：

function touchstart(event) {
  var touch = event.touches[0] || event.changedTouches[0]
  startX = touch.pageX
  startY = touch.pageY
}
复制代码

事件参数event和js中的事件event内容中touches和changedTouches属性一致

function touchmove(event, ins) {
  var touch = event.touches[0] || event.changedTouches[0]
  ins.selectComponent('.div').setStyle({
    left: startX - touch.pageX + 'px',
    top: startY - touch.pageY  + 'px'
  })
}
复制代码

ins(第二个参数)为触发事件的视图层wxml上下文。能够查找页面全部元素并设置style,class(足够完成交互效果)

注意：在参数event中一样有一个上下文实例instance；
event中的实例instance做用范围是触发事件的元素内，而事件的ins参数做用范围是触发事件的组件内。

module.exports = {
  touchstart: touchstart,
  touchmove: touchmove,
}
复制代码

最后将方法抛出去，给wxml文件引用。

wxml文件

<wxs module="action" src="./movable.wxs"></wxs> 
<view class="div" bindtouchstart="{{action.touchstart}}" bindtouchmove="{{action.touchmove}}"></view>
复制代码

上面的例子，解释了事件的基本交互用法。

文件之中相互传参

在事件交互中，少不了须要各个文件之中传递参数。 下面是比较经常使用的几种

wxs传参到js逻辑层

wxs文件中：

var dragStart = function (e, ins) {
	ins.callMethod('callback','sldkfj')
}
复制代码

js文件中：

callback(e){
	console.log(e)
}
// sldkfj
复制代码

使用callMethod方法，能够执行js中的callback方法。也能够实现传参；

js逻辑层传参到wxs文件

js文件中：

handler(e){
	this.setData({a:1})
}
复制代码

wxml文件：

<wxs module="action" src="./movable.wxs"></wxs> 
<view change:prop="{{action.change}}" prop="{{a}}"></view>
复制代码

wxs文件中：

change(newValue,oldValue){}
复制代码

js文件中的参数传递到wxs须要经过wxml文件中转。
js文件触发handler事件，改变a的值以后，最新的a传递到wxml中。
wxml中prop改变会触发wxs中的change事件。change中则会接收到最新prop值

wxs中获取dataset(wxs中获取wxml数据）

wxs中代码

var dragStart = function (e) {
  var index = e.currentTarget.dataset.index;
  var index = e.instance.getDataset().index;
}
复制代码

上面有提到e.instance是当前触发事件的元素实例。
因此e.instance.getDataset()获取的是当前触发事件的dataset数据集

注意点

wxs和js为不一样的两个脚本语言。可是语法和es5基本相同，确又不支持es6语法； getState 在多元素交互中很是实用，欢迎探索。

不知道是不是支持的语法能够跳转官网文档； wxs运算符、语句、基础类库、数据类型

有疑问或者须要指正的错误，欢迎留言