Sharing some wonderful uses of wxs files in WeChat applet

Preface

The wxs file is the logic file in the applet, and it is used in conjunction with wxml.

Unlike js, wxs can act directly on the view layer without the need for setData data interaction between the view layer and the logic layer;

Because of this feature, wxs is very suitable for optimizing the frequent interactive operations of small programs;

application

Filters

In the iOS environment, wxs runs much faster than js, and in Android, the two perform similarly.

Using wxs as a filter can also improve performance somewhat; 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

The above code implements the function of retaining two decimal places in a number.

wxml file:

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

Basic syntax: In the view file, it is introduced through the wxs tag, the module value is a custom name, and then the method can be called through the filter in wxml

The above code shows the operation logic of wxs, allowing us to call methods in wxs like functions;

Next, let's take a look at the performance of wxs in wxml page events.

Drag

When using interactions (dragging, sliding up and down, sliding left and right, etc.), if you rely on the js logic layer, a large amount of frequent data communication will be required. Stuttering is inevitable;

Use wxs files instead of interactions, and there is no need to frequently use setData, which causes large amounts of real-time data communication, thus saving performance.

The following is a drag example

wxs file:

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

The touches and changedTouches properties in the event parameter event and the event content in js are consistent

 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 (the second parameter) is the view layer wxml context that triggers the event. You can find all elements on the page and set style and class (enough to complete the interactive effect)

Note: There is also a context instance in the event parameter; the instance instance in event is scoped to the element that triggers the event, while the ins parameter of the event is scoped to the component that triggers the event.

 module.exports = {
  touchstart: touchstart,
  touchmove: touchmove,
}

Finally, throw the method out and reference it to the wxml file.

wxml file

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

The above examples explain the basic interactive usage of events.

Passing references between files

In event interaction, it is necessary to pass parameters between various files. The following are some of the more commonly used

wxs passes parameters to js logic layer

In the wxs file:

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

In the js file:

 callback(e){
	console.log(e)
}
//sldkfj

Use the callMethod method to execute the callback method in js. It is also possible to pass parameters;

• ! ! ! callMethod does not support passing callback functions*

js logic layer passes parameters to wxs file

In the js file:

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

wxml file:

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

In the wxs file:

 change(newValue,oldValue){}

The parameters in the js file need to be transferred to wxs through the wxml file.

The js file triggers the handler event. After changing the value of a, the latest a is passed to wxml.

Prop changes in wxml will trigger change events in wxs. The latest prop value will be received in change

Get dataset in wxs (get wxml data in wxs)

Code in wxs

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

It is mentioned above that e.instance is the element instance that currently triggers the event.

So e.instance.getDataset() gets the dataset that currently triggers the event.

Note

wxs and js are two different scripting languages. However, the syntax is basically the same as es5, but it does not support es6 syntax; getState is very practical in multi-element interaction, welcome to explore.

I don't know if it is a supported syntax. I can jump to the official website document; wxs operators, statements, basic class libraries, data types

Summarize

This is the end of this article about some wonderful uses of wxs files in WeChat mini-programs. For more relevant content on the wonderful uses of wxs files in WeChat mini-programs, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!