话题来源

  1.    临下班了还开会，有点生气唷=.=，去会议室一屁股刚坐下，我隔壁的小姐姐小声地问了我一个问题：你有用过wxs么？是怎么用的?<br />      我：一般是拿来对数据进行处理，比如后端接口返回的时间戳格式的，我们要展示成yyyy-mm-dd格式.<br />      小姐姐：那这个JS也可以做呀，直接放在数据请求回来以后，不是么？<br />      我：嗯，确实是的。<br />      额嗯，很尴尬，我也不知道为啥我好像只拿来处理过我刚描述的场景😳。<br />越学发现不会的东西越多，那就总结起来啊👌

什么是wxs?

wxs区别于js, wxs可直接作用到视图层，而不需要逻辑层跟视图层的setData数据交互。

适用场景： 适合优化小程序的频繁交互操作中。

wxs用法

1. 过滤器

可像函数一样调用wxs中的方法。

举个例子🌰：这里仅简单说明怎么用，实际业务肯定没这么简单=.=

  1. // wxml
  2. <wxs src='../../wxs/time.wxs' module="time"/>
  3. <view>{{ time.sayHello() }}</view>
  5. // wxs
  6. function sayHello () {
  7.     return 'wxs进行处理后的东东'
  8. }
  9. module.exports = {
  10.     sayHello: sayHello
  11. }

2. 复杂动画

若依赖js逻辑层，会需要大量、频繁的数据通信，卡顿是不可避免的。而采用wxs的话不需要频繁setData()从而导致的实时大量数据通信，节省性能的考虑。

实现需求：有个box盒子，用原生实现拖拽的效果。
实现思路：监听手势动作，记录每次移动的left/top，实时更新给到视图层。
实现code如下👇：

  1. // wxml
  2. <view>
  3.   <view class="touch-cont">
  4.     <view class="touch-box" style="left: {{left}}px; top: {{top}}px" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove">我是可拖动的box</view>
  5.   </view>
  6. </view>
  8. // js文件
  9. Page({
  10.   data: {},
  11.   bindtouchstart (event) {
  12.     const touches = event.touches[0]
  13.     this.startX = touches.pageX
  14.     this.startY = touches.pageY
  15.   },
  16.   bindtouchmove (event) {
  17.     const touches = event.touches[0]
  18.     const resX = this.startX + touches.pageX
  19.     const resY = this.startY + touches.pageY
  20.     this.setData({
  21.       left: resX,
  22.       top: resY
  23.     })
  24.   },
  25. })
  27. // wxss文件
  28. .touch-cont {
  29.   position: relative;
  30.   width: 600rpx;
  31.   height: 600rpx;
  32.   overflow: hidden;
  33.   background: #eeeeee;
  34. }
  35. .touch-box {
  36.   position: absolute;
  37.   top: 0;
  38.   left: 0;
  39.   width: 200rpx;
  40.   height: 200rpx;
  41.   background: #2c2c2c;
  42.   color: #ffffff;
  43. }

该实现思路会导致频繁的setData，即存在频繁的数据通信，卡顿是有的，不信你cooy代码试试看。

那我们思考下，如果换成wxs来实现的话，效果怎么样呢？
实现思路：通过wxs可直接绑定在wxml标签上，通过selectComponent去选中操作的元素从而达到修改left/top的效果。

  1. // wxml
  2. <wxs src='./demo.wxs' module='demo'></wxs>
  3. <view>
  4.   <view class="touch-cont">
  5.     <view class="touch-box" bindtouchstart="{{demo.touchstart}}" bindtouchmove="{{demo.touchmove}}">我是可拖动的box</view>
  6.   </view>
  7. </view>
  10. // wxs文件
  11. var startX = 0
  12. var startY = 0
  14. var touchstart =  function (event) {
  15.    var touch = event.touches[0]
  16.    startX = touch.pageX
  17.    startY = touch.pageY
  18. }
  20. var touchmove = function (event, ins) {
  21.   var touch = event.touches[0]
  22.   var resX = startX + touch.pageX
  23.   var resY = startY + touch.pageY
  24.   ins.selectComponent('.touch-box').setStyle({
  25.     left: resX + 'px',
  26.     top: resY + 'px'
  27.   })
  28. }
  29. module.exports = {
  30.   touchstart: touchstart,
  31.   touchmove: touchmove
  32. }
  34. // js
  35. js不需要任何额外的东西

该方案下，js文件不需要写任何额外的东西，也没有频繁的逻辑层跟视图层通信，卡顿感少很多。

写在最后

  1.    一个东西的出现肯定是为了解决问题的，所以尝试多去思考该东西出现的背景，也许你会对技术有更大的cover力！