WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します

序文

wxs ファイルはアプレット内のロジック ファイルであり、wxml と組み合わせて使用​​されます。

js とは異なり、wxs はビュー レイヤーとロジック レイヤー間の setData データのやり取りを必要とせずに、ビュー レイヤーに直接作用できます。

この機能により、wxs は小規模なプログラムの頻繁なインタラクティブ操作を最適化するのに非常に適しています。

応用

フィルター

iOS 環境では、wxs は js よりもはるかに高速に実行され、Android では両者のパフォーマンスは同等です。

wxs をフィルターとして使用すると、パフォーマンスがいくらか向上します。フィルターを見て、その構文を理解しましょう。

wxs ファイル:

 var toDecimal2 = 関数(x) {
  var f = parseFloat(x);
  もし (isNaN(f)) {
    '0.00'を返す
  }
  var f = Math.round(x * 100) / 100;
  var s = f.toString();
  var rs = s.indexOf('.');
  （rs < 0）の場合{
    rs = s.長さ;
    s + = '.';
  }
  （s.length <= rs + 2）の間{
    s + = '0';
  }
  s を返します。
}
モジュール.エクスポート = toDecimal2

上記のコードは、数値の小数点以下 2 桁を保持する機能を実装します。

wxml ファイル:

 <wxs src="./filter.wxs" モジュール="フィルター"></wxs>
<テキスト>{{フィルター(1)}}</テキスト>

基本構文: ビューファイルでは、wxsタグを介して導入され、モジュール値はカスタム名であり、メソッドはwxmlのフィルターを介して呼び出すことができます。

上記のコードは wxs の操作ロジックを示しており、関数のように wxs 内のメソッドを呼び出すことができます。

次に、wxml ページ イベントでの wxs のパフォーマンスを見てみましょう。

ドラッグ

インタラクション（ドラッグ、上下スライド、左右スライドなど）を使用する場合、js ロジック層に依存すると、大量の頻繁なデータ通信が必要になります。吃音は避けられません。

インタラクションの代わりに wxs ファイルを使用すると、大量のリアルタイム データ通信を引き起こす setData を頻繁に使用する必要がなくなり、パフォーマンスが節約されます。

以下はドラッグの例です

wxs ファイル:

関数touchstart(イベント) {
  var touch = event.touches[0] || event.changedTouches[0]
  開始X = タッチページX
  開始Y = タッチページY
}

イベントパラメータイベントのtouchesプロパティとchangedTouchesプロパティとjs内のイベントコンテンツは一致しています

関数touchmove(イベント, ins) {
  var touch = event.touches[0] || event.changedTouches[0]
  ins.selectComponent('.div').setStyle({
    左: startX - touch.pageX + 'px'、
    上: startY - touch.pageY + 'px'
  })
}

ins (2 番目のパラメータ) は、イベントをトリガーするビュー レイヤーの wxml コンテキストです。ページ上のすべての要素を見つけて、スタイルとクラスを設定できます（インタラクティブ効果を完成させるのに十分です）

注: イベント パラメータにもコンテキスト インスタンスがあります。イベント内のインスタンス インスタンスはイベントをトリガーする要素にスコープが設定されていますが、イベントの ins パラメータはイベントをトリガーするコンポーネントにスコープが設定されています。

モジュール.エクスポート = {
  タッチスタート: タッチスタート、
  タッチムーブ: タッチムーブ、
}

最後に、メソッドを破棄し、wxml ファイルに参照します。

wxml ファイル

<wxs モジュール="アクション" src="./movable.wxs"></wxs> 
<view class="div" bindtouchstart="{{action.touchstart}}" bindtouchmove="{{action.touchmove}}"></view>

上記の例は、イベントの基本的なインタラクティブな使用方法を説明しています。

ファイル間での参照の受け渡し

イベントのやり取りでは、さまざまなファイル間でパラメータを渡す必要があります。 以下は、よく使われる

wxsはjsロジック層にパラメータを渡します

wxs ファイル内:

 var dragStart = 関数(e, ins) {
	ins.callMethod('コールバック','sldkfj')
}

js ファイル内:

コールバック(e){
	コンソール.log(e)
}
//sldkfj

callMethod メソッドを使用して、js でコールバック メソッドを実行します。パラメータを渡すことも可能です。

• ！ ！ ！ callMethod はコールバック関数の受け渡しをサポートしていません*

js ロジック レイヤーはパラメータを wxs ファイルに渡します

js ファイル内:

ハンドラ(e){
	this.setData({a:1})
}

wxml ファイル:

 <wxs モジュール="アクション" src="./movable.wxs"></wxs> 
<view change:prop="{{action.change}}" prop="{{a}}"></view>

wxs ファイル内:

変更(新しい値、古い値){}

js ファイル内のパラメータは、wxml ファイルを介して wxs に転送する必要があります。

js ファイルはハンドラー イベントをトリガーします。a の値を変更した後、最新の a が wxml に渡されます。

wxml のプロパティの変更により、wxs の変更イベントがトリガーされます。最新のプロパティ値は変更で受信されます

wxs でデータセットを取得 (wxs で wxml データを取得)

wxs のコード

var dragStart = 関数(e) {
  var インデックス = e.currentTarget.dataset.index;
  var index = e.instance.getDataset().index;
}

上で述べたように、e.instance は現在イベントをトリガーする要素インスタンスです。

したがって、e.instance.getDataset() は現在イベントをトリガーしているデータセットを取得します。

注記

wxs と js は 2 つの異なるスクリプト言語です。ただし、構文は基本的に es5 と同じですが、es6 構文はサポートされていません。getState は複数要素の相互作用に非常に実用的であるため、ぜひ検討してください。

サポートされている構文かどうかはわかりません。公式ウェブサイトのドキュメントにジャンプできます。wxs演算子、ステートメント、基本クラスライブラリ、データ型

要約する

WeChat ミニプログラムでの wxs ファイルの素晴らしい使用法に関するこの記事はこれで終わりです。WeChat ミニプログラムでの wxs ファイルの素晴らしい使用法に関する関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。