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