本篇文章帶大家了解微信小程式中的wxs模組，介紹一下wxs的使用，希望對大家有幫助！

寫在前面，關(guān)於一些想法：

開發(fā)微信小程式已經(jīng)有一段時間了，不得不說微信小程式的API以及各種封裝好的組件確實很厲害，很大程度上節(jié)約了開發(fā)者的時間，但是對我來說，我是更傾向於自己寫一些東西的，一切都在微信封裝的組件、 API內(nèi)開發(fā)，久而久之只能實現(xiàn)如同熟練工的操作。

雖然說小程式也是一層的封裝，但是拿現(xiàn)成的和自己寫的總是有所不同的。舉個例子，全依賴與微信官方封裝和在原生小程式基礎(chǔ)上自我開發(fā)，就像是裝修精裝房和毛胚房的區(qū)別一樣，完全依賴於微信的封裝，你只需要往精裝房內(nèi)搬家具就好了，可謂是快速搭建，當(dāng)然我也不排斥微信封裝的API，畢竟在某些程度上，他們性能更加卓越，我只是希望，不管在什麼時候，都不要喪失自己從零開發(fā)的能力，畢竟前端，不隻小程式。

正文：

最近有一個需求，在一個頁面中有一個滑塊，能夠用手指拖動滑塊到頁面的任意位置，並且在鬆手的時候，滑塊能夠自動吸邊。

由於在小程式中無法直接操作DOM元素，也就無法透過js直接設(shè)定style，如果想要滑桿快速回應(yīng)手指的滑動的話，透過頁面的data去定位元素位置，無異於是毫秒級的setData，一次setData 的回應(yīng)需要經(jīng)過2 次的邏輯層和渲染層的通訊以及一次渲染，通訊的耗時比較大。此外 setData 渲染也會阻塞其它腳本執(zhí)行，這種頻率的setData容易造成卡頓，因此這個方案是不可行的。

在微信小程式中，官方有提供一個視圖容器，叫做movable-view，這個應(yīng)該是可以解決需求的，但是在上文中有提到，在性能差別不大的時候，我更傾向於自己寫，這個作為一個備選方案。

WXS的使用

#也就是說，wxs是專門用於wxml頁面的，它實現(xiàn)的是在視圖層調(diào)用函數(shù)的功能

#調(diào)用方式

雖然在微信文檔中有說明， wxs是小程式的一套腳本語言，有自己的文法，但大部分文法還是跟js差別不大，有興趣的可以自行翻看文件。微信小程式中提供了兩種呼叫方式，這裡不做過多贅述，直接貼程式碼

wxml：

<view class="main">
<view>主頁</view>
<wxs module="IndexWxs" src="./index.wxs"></wxs>//新建index.wxs文件，在wxs標(biāo)簽中自定義路徑引入，IndexWxs為自定義的module名
    <view 
    change:prop="{{IndexWxs.chooseShow}}" //change:prop是起到類似observe的監(jiān)聽作用，當(dāng)prop中的data屬性有更新的時候，會觸發(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é)點信息的方法，通過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設(shè)置的樣式權(quán)重比wxml設(shè)置的樣式高
      transform: 'translate('+x+'px'+','+y+'px)'//setStyle需使用字符串
    })
  },

//松開手指，觸摸結(jié)束時
  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ā)生變化的時候觸發(fā)該方法，會自動傳入monitor當(dāng)前值，一些業(yè)務(wù)邏輯可以在此處處理
  chooseShow: function (monitor) {
    console.log(&#39;監(jiān)聽到更新，monitor=&#39;,monitor);
  }
}

最終效果:(掘金好像不支持視頻，由於是知乎直接搬運的，也就沒有轉(zhuǎn)成gif，想看視頻的可以移步知乎文章 )

wxs的基本使用大概就是這樣，由於我也是第一次使用wxs，若有說的不足或錯誤之處歡迎補(bǔ)充指正。

【相關(guān)學(xué)習(xí)推薦：小程式開發(fā)教學(xué)】

以上是聊聊微信小程式中的wxs模組，介紹使用方法的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！