WeChat 애플릿의 wxs 모듈에 대해 이야기하고 사용 방법을 소개하겠습니다.

이 글은 여러분에게 WeChat 애플릿의 wxs 모듈을 이해하고 wxs의 사용법을 소개할 것입니다. 모든 사람에게 도움이 되기를 바랍니다!

이전에 쓴 생각:

저는 한동안 WeChat 미니 프로그램을 개발해 왔습니다. API와 WeChat 미니 프로그램의 다양한 패키지 구성 요소는 실제로 상당 부분 매우 강력합니다. .개발자의 시간을 절약해 주지만 저는 직접 작성하는 것을 선호합니다. 모든 것이 WeChat에 의해 패키지된 구성 요소와 API 내에서 개발되므로 숙련된 작업자처럼 작업할 수 있습니다.

작은 프로그램도 하나의 레이어에 캡슐화되어 있지만, 기성 프로그램을 사용하는 것과 직접 작성하는 것에는 항상 차이가 있습니다. 예를 들어 위챗의 공식 패키징과 네이티브 미니 프로그램을 기반으로 한 자체 개발에 전적으로 의존하는 것은 하드커버 방을 꾸미는 것과 거친 방을 꾸미는 것의 차이와 같습니다. 위챗의 패키징에 전적으로 의존하기만 하면 됩니다. 물론, WeChat에서 제공하는 API를 거부하지는 않습니다. 어느 정도 성능이 향상되길 바랄 뿐입니다. 결국 프론트 엔드는 단지 작은 프로그램이 아닙니다.

텍스트:

최근에는 페이지에 슬라이더가 있어야 한다는 요구 사항이 있습니다. 손가락으로 페이지의 어느 위치로든 슬라이더를 끌 수 있으며, 놓으면 슬라이더가 자동으로 가장자리를 흡수할 수 있습니다.

DOM 요소는 미니 프로그램에서 직접 조작할 수 없기 때문에 js를 통해 직접 스타일을 설정할 수 없습니다. 슬라이더가 손가락의 슬라이딩에 빠르게 반응하도록 하려면 페이지의 데이터를 통해 요소 위치를 찾는 것이 동일합니다. 밀리초 수준의 setData.setData 응답에는 논리 계층과 렌더링 계층 간의 두 가지 통신과 한 번의 렌더링이 필요하며 통신에는 상대적으로 시간이 많이 걸립니다. 또한 setData 렌더링은 이 빈도로 다른 스크립트의 실행을 차단하므로 쉽게 지연이 발생할 수 있으므로 이 솔루션은 실현 가능하지 않습니다.

WeChat 애플릿에는 movable-view라는 공식 뷰 컨테이너가 있습니다. 하지만 위에서 언급했듯이 성능 차이가 크지 않으면 직접 작성하는 것을 선호합니다. 대안으로 작용합니다.

WXS 사용법

즉, wxs는 특별히 wxml 페이지에 사용되는 함수 호출 기능을 뷰 레이어

호출 방법

비록 WeChat 문서에는 wxs가 소규모 프로그램을 위한 스크립팅 언어이며 자체 구문이 있다고 명시되어 있으며 대부분의 구문은 js와 크게 다르지 않습니다. 관심이 있다면 문서를 직접 읽어보세요. WeChat 애플릿은 두 가지 호출 방법을 제공합니다. 여기서는 너무 자세히 설명하지 않겠습니다. 코드를 직접 붙여넣으세요.

<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);
  }
}

최종 효과: (Nuggets는 지원하지 않는 것 같습니다. 영상은 Zhihu라서 직접 옮겨서 gif로 변환하지 않았으니 영상을 보시려면 Zhihu 글 )

를 참고하세요. wxs의 기본 사용법은 아마 이렇습니다. 저 역시 마찬가지이기 때문입니다. wxs를 처음 사용해 보는데 부족한 점이나 오류가 있으면 언제든지 지적해 주시기 바랍니다.

【관련 학습 추천:

미니 프로그램 개발 튜토리얼

】

위 내용은 WeChat 애플릿의 wxs 모듈에 대해 이야기하고 사용 방법을 소개하겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!