wxs

wxs

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构
个人理解：就是减少与逻辑层的通信，在wxml页面上调用wxs 暴露出来的方法来完成界面的交互。

下面是实现一个div触摸移动的实例：

movable.wxs:

var startX = 0
var startY = 0
var lastLeft = lastTop = 50
function touchstart(event, ins) {
  //console.log(JSON.stringify( ins))
  var touch = event.touches[0] || event.changedTouches[0]
  console.log(touch, touch.pageX, touch.pageY)
  startX = touch.pageX
  startY = touch.pageY
  ins.callMethod('testCallmethod', {           //wxs促发逻辑层（index.js）的方法
    complete: function(res) {
      console.log('args', res)
    }
  })
  function jsons(a){
    return JSON.stringify(a)
  }
  console.log(jsons(ins.selectAllComponents()),JSON.stringify(ins.selectComponent('.movable').getDataset()),JSON.stringify(ins.selectComponent('.movable').getState()) )
}
function touchmove(event, ins) {
  var touch = event.touches[0] || event.changedTouches[0]
  var pageX = touch.pageX
  var pageY = touch.pageY
  var left = pageX - startX + lastLeft
  var top = pageY - startY + lastTop
  startX = pageX
  startY = pageY
  lastLeft = left
  lastTop = top
  // console.log('idff', pageX - context.startX, left, top)
  ins.selectComponent('.movable').setStyle({
    left: left + 'px',
    top: top + 'px'
  })
  // console.log('get data', JSON.stringify(ins.selectComponent('.movable')[0].getData()))
  // console.log('get data set', JSON.stringify(ins.selectComponent('.movable')[0].getDataset()))
  // console.log('test select', ins.selectComponent('.movable')[0].selectComponent('.dd'))
}
module.exports = {
  touchstart: touchstart,
  touchmove: touchmove,
}

index.wxml
<wxs module="test" src="./movable.wxs"></wxs>     //将wxs引入
<view wx:if="{{show}}" class="area" style='position:relative;width:100%;height:100%;'>
  <view data-index="1" data-obj="{{dataObj}}" bindtouchstart="{{test.touchstart}}" bindtouchmove="{{test.touchmove}}" bindtouchend='{{test.touchmove}}' class="movable" style="position:absolute;width:100px;height:100px;background:red;left:{{left}}px;top:{{top}}px"></view>
 
</view>
 /*1.当发生触摸事件的时候，会依次执行index.wxs里面的方法（touchstart，touchmove）*/

index.js:
Page({

  data: {
    left: 50,
    top: 50,
    taptest: 'taptest',
    show: true,
    dataObj: {
      obj: 1
    }
  },
  taptest() {
    this.setData({
      show: false,
    })
  },
  testCallmethod(){       //被wxs促发的方法
    console.log('022')
  }
})

wxs调用逻辑层js的方法

	是通过ComponentDescriptor 实例调用callMethod方法来实现，例如：

在text.wxs中有一个函数a：
	function a(event, ins) {
	  ins.callMethod('testCallmethod', {           //wxs促发逻辑层js中的方法
	    complete: function(res) {
	      console.log(111)
	    }
	  })
在逻辑层js中的testCallmethod方法会被执行：
testCallmethod(){
	console.log(22222)
}

逻辑层js调用wxs中的方法，

是通过WxsPropObserver来实现的，例如：

wxml:
<wxs module="test" src="./test.wxs"></wxs>     //将wxs引入
<input type="text" change:value='{{test.a}}' value="{{value}}" bindblur="blur"/>
/*
	上面的change:value（属性前面带change:前缀）是
	在 value属性被设置setData的时候触发 WXS 函数，值必须用{{}}括起来。
*/

js: 
blur(e){   //改变value属性的值，当value值改变之后，wxml会触发test.wxs中的a()方法
  this.setData({
    value:e.detail.value
})}
wxs:
function a(){
	console.log('wxml调用wxs的a()')
}