1. What is wxs
wxs is a scripting language for applets, which is similar to JavaScript but different from JavaScript. wxs is a data binding and logic processing language, it can be used in wxml, and can be called directly in wxml. Using wxs enables more efficient and flexible data processing and rendering.
2. How to use wxs
2.1 Using wxs in wxml
To use wxs in wxml, you need to use tags to define the wxs code block, and specify the module name of the wxs code block through the module attribute. For example:
<wxs module="math" src="utils/math.wxs"></wxs>
<view>{
{ math.sum(1, 2) }}</view>
Here, a wxs module named math is defined using module="math", and a function named sum is defined in the wxs code block. In wxml, we directly use { { math.sum(1, 2) }} to call the sum function in the math module.
It should be noted that the code in the wxs module will be compiled independently into a part of the wxml template, so the data and methods of the page logic layer cannot be used.
2. Reference wxs in the js file
In order to use the wxs module in the js file, we need to use the require method to reference the wxs module. For example:
const math = require('./utils/math.wxs');
console.log(math.sum(1, 2)); // 输出3
The require method introduces the math.wxs module and directly calls the sum method in it.
3. Pass parameter of wxs
When using wxs, we may need to pass parameters for data processing in wxs. Here are some ways to pass parameters:
3.1 Pass parameters in wxml
We can use the data attribute of the tag to pass data to wxs in wxml. For example:
<wxs module="math" src="utils/math.wxs" data="{
{ n:2}}"> </wxs>
<view wx:for="{
{ arr }}" wx:for-item="item"> <view>{
{math.sum(item, n) }}</view></view>
Use wx:for to loop through the array arr, and pass each element in the array and the variable n to the sum function in the wxs module. It should be noted here that we use the data attribute to pass the variable n to the wxs module.
3.2 Pass parameters in the js file
We can also pass parameters to the wxs module in the js file. For example:
const math = require('./utils/math.wxs');
console.log(math.sum(1, 2)); // 输出3console.log(math.sum(2, 3)); // 输出5
Here, the sum method in the math.wxs module is called directly, and two parameters are passed.
4. Notes on using wxs
① When using wxs in wxml, you need to use the module attribute to specify the module name of the wxs code block.
② When using wxs in wxml, you need to pay attention that the data and methods of the page logic layer cannot be used in the wxs module.
③ In the wxs module, you can use module.exports to expose the methods in the module for use in other places.
④ In the wxs module, you can use the data attribute to receive the passed data.
⑤ When using wxs, you need to pay attention that the data and methods of the page logic layer cannot be used in the wxs module. For example, wx.request cannot be used directly, and there is no native XHR in wxs. But you can use module.exports to expose the methods in the module for use elsewhere.
5. Summary
Through the introduction of this article, I believe that everyone has a certain understanding of how to use wxs in native applets. It can better realize data processing and rendering. I hope this blog will be helpful to everyone. Welcome to correct and communicate.