? ?? ????? 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" ></wxs>//新建index.wxs文件，在wxs標(biāo)簽中自定義路徑引入，IndexWxs為自定義的module名
    <view 
    change:prop="{{IndexWxs.chooseShow}}" //change:prop是起到類似observe的監(jiān)聽作用，當(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)信息的方法，通過data-傳入
var viewData = {
  height: 0,//滑塊的寬高
  width: 0,
  windowHeight: 0,//屏幕的寬高
  windowWidth: 0
}
var eventInstance = null
module.exports = {
//觸摸開始
  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)過程中保持手指在模塊中心位置
    y = event.changedTouches[0].clientY - viewData.height/2
  },

//觸摸移動(dòng)中，可以給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é)束時(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)聽到更新，monitor=&#39;,monitor);
  }
}

?? ??: (Nuggets? ???? ?? ? ????. ??? Zhihu?? ?? ??? gif? ???? ???? ??? ???? Zhihu ? )

? ?????. wxs? ?? ???? ?? ?????. ? ?? ?????? ?????. wxs? ?? ??? ??? ??? ??? ??? ??? ???? ??? ??? ????.

【?? ?? ??:

】

? ??? WeChat ???? wxs ??? ?? ????? ?? ??? ???????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!