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>主頁(yè)</view>
<wxs module="IndexWxs" ></wxs>//新建index.wxs文件，在wxs標(biāo)簽中自定義路徑引入，IndexWxs為自定義的module名
    <view 
    change:prop="{{IndexWxs.chooseShow}}" //change:prop是起到類似observe的監(jiān)聽(tīng)作用，當(dāng)prop中的data屬性有更新的時(shí)候，會(huì)觸發(fā)change:prop的方法
    prop="{{monitor}}" //data屬性
    data-navHeight="{{navHeight}}" //可以使用data-自定義傳入屬性
    data-edge="{{edgeData}}" 
    catch:touchstart="{{IndexWxs.touchStartByBlock}}" //要調(diào)用wxs的方法需使用{{  }}
    catch:touchmove="{{IndexWxs.touchMoveByBlock}}" 
    catch:touchend="{{IndexWxs.touchEndByBlock}}">
    </view>
</view>

\

wxs：

var x = 0,y = 0;
//viewData 使用小程序獲取節(jié)點(diǎn)信息的方法，通過(guò)data-傳入
var viewData = {
  height: 0,//滑塊的寬高
  width: 0,
  windowHeight: 0,//屏幕的寬高
  windowWidth: 0
}
var eventInstance = null
module.exports = {
//觸摸開(kāi)始
  touchStartByBlock: function (event) {
    eventInstance = event;// event.instance為組件實(shí)例
    var setViewData = event.currentTarget.dataset//獲取data-傳入的值
    if (setViewData && setViewData.edge && setViewData.edge.windowHeight) {
      viewData = setViewData.edge
    }
    x = event.changedTouches[0].clientX - viewData.width/2//滑動(dòng)過(guò)程中保持手指在模塊中心位置
    y = event.changedTouches[0].clientY - viewData.height/2
  },

//觸摸移動(dòng)中，可以給x,y寫(xiě)一些邊界值判斷，防止滑塊越界，此處不做展示
  touchMoveByBlock: function (event) {
    x = event.changedTouches[0].clientX - viewData.width/2
    y = event.changedTouches[0].clientY - viewData.height/2

    event.instance.setStyle({//使用setStyle設(shè)置的樣式權(quán)重比wxml設(shè)置的樣式高
      transform: 'translate('+x+'px'+','+y+'px)'//setStyle需使用字符串
    })
  },

//松開(kāi)手指，觸摸結(jié)束時(shí)
  touchEndByBlock: function (event) {
    //吸邊處理，判斷當(dāng)前手指位置在屏幕的哪一邊
    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;,
    })
  },
//當(dāng)props的monitor數(shù)據(jù)發(fā)生變化的時(shí)候觸發(fā)該方法，會(huì)自動(dòng)傳入monitor當(dāng)前值，一些業(yè)務(wù)邏輯可以在此處處理
  chooseShow: function (monitor) {
    console.log(&#39;監(jiān)聽(tīng)到更新，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!