This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

WXS files are logical files in small programs that are used in conjunction with WXML. Different from JS, WXS can be directly applied to the view layer without the need for setData data interaction between the view layer and the logical layer. Because of this feature, WXS is ideal for optimizing frequent interactions between small programs;

application

The filter

On IOS, WXS runs much faster than JS, but on Android they perform equally well. Using WXS as a filter can also improve performance to some extent; Let’s look at a filter to understand its syntax.

WXS file:

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
Copy the code

The above code implements the function of keeping two decimal digits.

WXML file:

<wxs src="./filter.wxs" module="filter"></wxs>
<text>{{filter(1)}}</text>
Copy the code

Basic syntax: Introduced in view files via WXS tags, module values are custom named, and methods can then be called in WXML via filter

The above code shows the logic of WXS and allows us to call methods in WXS as functions. Let’s take another look at WXS for WXML page events.

Drag and drop

When using interaction (drag and drop, slide up and down, left and right side slide, etc.) if relying on JS logic layer, will require a large number of frequent data communication. Caton is inevitable; Using WXS files instead of interactions saves performance by eliminating the need for frequent use of setData to result in massive data traffic in real-time.

A drag and drop example is shown below

WXS file:

function touchstart(event) {
  var touch = event.touches[0] || event.changedTouches[0]
  startX = touch.pageX
  startY = touch.pageY
}
Copy the code

The “event” parameter is consistent with the “Touches” and “changedTouches” properties in the “event” content

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'})}Copy the code

Ins (second parameter) is the view-level WXML context from which the event is triggered. You can find all the elements on the page and set style,class(enough for interaction)

Note: There is also a context instance in the event argument; The instance in event is scoped within the element that triggers the event, and the ins parameter of the event is scoped within the component that triggers the event.

module.exports = {
  touchstart: touchstart,
  touchmove: touchmove,
}
Copy the code

Finally, the method is thrown out and referenced to a WXML file.

WXML file

<wxs module="action" src="./movable.wxs"></wxs> 
<view class="div" bindtouchstart="{{action.touchstart}}" bindtouchmove="{{action.touchmove}}"></view>
Copy the code

The above example illustrates the basic interactive use of events.

Pass parameters to each other in files

In event interaction, it is necessary to pass parameters in each file. Here are some of the more common ones

WXS passes parameters to the JS logical layer

In the WXS file:

var dragStart = function (e, ins) {
	ins.callMethod('callback'.'sldkfj')}Copy the code

Js file:

callback(e){
	console.log(e)
}
// sldkfj
Copy the code

Using the callMethod method, you can execute the callback method in JS. Can also be passed;

The js logical layer passes parameters to the WXS file

Js file:

handler(e){
	this.setData({a:1})}Copy the code

WXML file:

<wxs module="action" src="./movable.wxs"></wxs> 
<view change:prop="{{action.change}}" prop="{{a}}"></view>
Copy the code

In the WXS file:

change(newValue,oldValue){}
Copy the code

Parameters passed to WXS from the js file need to be relayed through the WXML file. After the value of a is changed, the latest version of A is passed to WXML. A prop change in WXML triggers the change event in WXS. Change receives the latest prop value

Dataset (WXS, WXML)

WXS code in

var dragStart = function (e) {
  var index = e.currentTarget.dataset.index;
  var index = e.instance.getDataset().index;
}
Copy the code

As mentioned above, E.stance is the element instance of the current firing event. So e.inchun.getDataset () gets the dataset for the current triggered event

Pay attention to the point

WXS and JS are two different scripting languages. However, the syntax is basically the same as es5, but es6 syntax is not supported. GetState is useful in multi-element interactions, so you’re welcome to explore.

It is not known whether the supported syntax can jump to the official website document; WXS operators, statements, base class libraries, data types

If you have any questions or errors to correct, please leave a comment