WeChat アプレットの wxs モジュールについて説明し、その使用方法を紹介します。

この記事では、WeChat アプレットの wxs モジュールを理解し、wxs の使用方法を紹介します。皆様のお役に立てれば幸いです。

以前にいくつかの考えについて書きました:

WeChat ミニ プログラムを開発してからしばらく時間が経ちました。その WeChat ミニ プログラム プログラムの API とさまざまなパッケージ化されたコンポーネントは確かに非常に強力で、開発者の時間を大幅に節約しますが、私にとっては、自分で何かを書くことを好みます。すべてが WeChat コンポーネントにパッケージ化されており、API 内での開発のみが達成できます。時間の経過とともに熟練労働者のような操作が可能になります。

小さなプログラムもカプセル化の層ですが、既製のものを使用する場合と自分で作成する場合には常に違いがあります。たとえば、WeChat の公式パッケージングとネイティブ ミニ プログラムに基づく自己開発に完全に依存することは、ハードカバーの部屋を装飾するか、ラフな部屋を装飾するかの違いに似ています。完全に WeChat のパッケージングに依存します。家具をハードカバーに移動するだけで済みます。すごいですね、クイックビルドと言えます。もちろん、WeChat がパッケージ化した API を否定するわけではありません。結局のところ、ある程度のパフォーマンスはそちらの方が優れています。いつになってもそうなるよう願っています。結局のところ、フロントエンドは単なる小さなプログラムではありません。

本文:

最近、ページ上にスライダーが必要になりました。スライダーをページ上の任意の位置に指でドラッグして放すことができます。 . 、スライダーはエッジを自動的に吸収できます。

ミニプログラムでは DOM 要素を直接操作できないため、js を介してスタイルを直接設定することはできません。指のスライドにスライダーを素早く反応させたい場合は、データから要素の位置を特定します。ミリ秒レベルの setData の場合、setData 応答にはロジック層とレンダリング層間の 2 回の通信と 1 回のレンダリングが必要となり、通信には比較的時間がかかります。さらに、setData のレンダリングは他のスクリプトの実行もブロックするため、この頻度で SetData を実行するとラグが発生しやすくなるため、この解決策は現実的ではありません。

WeChat アプレットには、movable-view という公式のビュー コンテナがあるので、これで解決できるはずですが、前述したように、パフォーマンスに大きな差がない場合は、自分で書いてください。これは代替案です。

WXS の使用

つまり、wxs は特に wxml ページに使用されます。はい、ビュー層で関数を呼び出す機能を実装しています

#メソッドの呼び出し

#WeChatのドキュメントで説明されていますが、 , Wxs は小さなプログラム用のスクリプト言語です。独自の構文がありますが、ほとんどの構文は js とあまり変わりません。興味がある場合は、ドキュメントを自分で読むことができます。 WeChat アプレットには 2 つの呼び出しメソッドが用意されています。ここでは詳しく説明しません。コードを直接貼り付けるだけです。

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

最終効果: (Nuggets はビデオをサポートしていないようです。Zhihu によって直接移動されるため、GIF には変換されません。ビデオを見たい場合は、Zhihu にアクセスしてください)記事「WeChat アプレット wxs の使い方の話」 ）

#wxs の基本的な使い方はこんな感じだと思います。不足や間違いがありましたら、遠慮なく修正してください。

[関連する学習の推奨事項:

小さなプログラム開発チュートリアル]

以上がWeChat アプレットの wxs モジュールについて説明し、その使用方法を紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。