Let's talk about the wxs module in the WeChat applet and introduce how to use it.

This article will take you to understand the wxs module in the WeChat applet and introduce the use of wxs. I hope it will be helpful to everyone!

Written before, about some thoughts:

It has been a while since we developed WeChat mini programs. I have to say that WeChat mini programs The program's API and various packaged components are indeed very powerful and save developers' time to a great extent, but for me, I prefer to write something myself. Everything is packaged in WeChat components, Development within the API can only achieve operations like a skilled worker over time.

Although the small program is also a layer of encapsulation, there is always a difference between using a ready-made one and writing it yourself. For example, relying entirely on WeChat's official packaging and self-development on the basis of native mini programs is like the difference between decorating a hardcover room and a rough room. It completely relies on WeChat's packaging. You only need to move furniture into the hardcover room. That's great, it can be said to be a quick build. Of course, I don't reject the API packaged by WeChat. After all, to some extent, their performance is better. I just hope that no matter when, I will not lose my ability to develop from scratch. After all, the front end is not just small programs.

Text:

Recently there is a need to have a slider on a page. You can drag the slider to any position on the page with your finger and release it. , the slider can automatically absorb edges.

Since DOM elements cannot be directly manipulated in the mini program, the style cannot be set directly through js. If you want the slider to quickly respond to the sliding of your finger, locating the element position through the data of the page is the same as For millisecond-level setData, a setData response requires two communications between the logic layer and the rendering layer and one rendering. The communication is relatively time-consuming. In addition, setData rendering will also block the execution of other scripts. SetData at this frequency can easily cause lag, so this solution is not feasible.

In the WeChat applet, there is an official view container called movable-view. This should be able to solve the demand. However, as mentioned above, when the performance difference is not big, I prefer I tend to write it myself, and this is an alternative.

Use of WXS

In other words, wxs is specifically used for wxml pages Yes, it implements the function of calling functions in the view layer

Calling method

Although it is explained in the WeChat documentation, Wxs is a scripting language for small programs. It has its own syntax, but most of the syntax is not much different from js. If you are interested, you can read the documentation by yourself. There are two calling methods provided in the WeChat applet. I won’t go into details here. Just paste the code directly

wxml：

<view class="main">
<view>主页</view>
<wxs module="IndexWxs" src="./index.wxs"></wxs>//新建index.wxs文件，在wxs标签中自定义路径引入，IndexWxs为自定义的module名
    <view 
    change:prop="{{IndexWxs.chooseShow}}" //change:prop是起到类似observe的监听作用，当prop中的data属性有更新的时候，会触发change:prop的方法
    prop="{{monitor}}" //data属性
    data-navHeight="{{navHeight}}" //可以使用data-自定义传入属性
    data-edge="{{edgeData}}" 
    catch:touchstart="{{IndexWxs.touchStartByBlock}}" //要调用wxs的方法需使用{{  }}
    catch:touchmove="{{IndexWxs.touchMoveByBlock}}" 
    catch:touchend="{{IndexWxs.touchEndByBlock}}">
    </view>
</view>

\

wxs：

var x = 0,y = 0;
//viewData 使用小程序获取节点信息的方法，通过data-传入
var viewData = {
  height: 0,//滑块的宽高
  width: 0,
  windowHeight: 0,//屏幕的宽高
  windowWidth: 0
}
var eventInstance = null
module.exports = {
//触摸开始
  touchStartByBlock: function (event) {
    eventInstance = event;// event.instance为组件实例
    var setViewData = event.currentTarget.dataset//获取data-传入的值
    if (setViewData && setViewData.edge && setViewData.edge.windowHeight) {
      viewData = setViewData.edge
    }
    x = event.changedTouches[0].clientX - viewData.width/2//滑动过程中保持手指在模块中心位置
    y = event.changedTouches[0].clientY - viewData.height/2
  },

//触摸移动中，可以给x,y写一些边界值判断，防止滑块越界，此处不做展示
  touchMoveByBlock: function (event) {
    x = event.changedTouches[0].clientX - viewData.width/2
    y = event.changedTouches[0].clientY - viewData.height/2

    event.instance.setStyle({//使用setStyle设置的样式权重比wxml设置的样式高
      transform: 'translate('+x+'px'+','+y+'px)'//setStyle需使用字符串
    })
  },

//松开手指，触摸结束时
  touchEndByBlock: function (event) {
    //吸边处理，判断当前手指位置在屏幕的哪一边
    x = viewData.windowWidth/2 < x ? viewData.windowWidth-viewData.width : 0;
    y = y > viewData.windowHeight-viewData.height ? viewData.windowHeight-viewData.height : y
    event.instance.setStyle({
      transform: &#39;translate(&#39;+x+&#39;px&#39;+&#39;,&#39;+y+&#39;px)&#39;,
    })
  },
//当props的monitor数据发生变化的时候触发该方法，会自动传入monitor当前值，一些业务逻辑可以在此处处理
  chooseShow: function (monitor) {
    console.log(&#39;监听到更新，monitor=&#39;,monitor);
  }
}

Final effect: (The Nuggets do not seem to support video. Since it was moved directly by Zhihu, it was not converted into a gif. If you want to watch the video, you can go to the Zhihu article )

The basic use of wxs is probably like this. Since it is my first time to use wxs, if there are any deficiencies or errors, please feel free to correct me.

[Related learning recommendations: 小program development tutorial]

The above is the detailed content of Let's talk about the wxs module in the WeChat applet and introduce how to use it.. For more information, please follow other related articles on the PHP Chinese website!