WeChatミニプログラムWXSの使い方

この記事の内容は WeChat アプレット WXS の使用方法に関するものです。必要な方は参考にしていただければ幸いです。

数日前、クラスメートが私に、WeChat アプレットはパイプライン フィルターをサポートしていますか と尋ねました。
angular または vue を使用したことがある学生は、プロジェクトでフィルターを使用できるはずですが、小規模なプログラムではサポートされていません。しかし、解決策はいくつかあります。
しかし、私が気になるのは、WXS がフィルターを実装できるかどうか、そして他に何ができるかということだけです。この疑問を抱いて、WeChat ミニ プログラムの公式 WXS を読み直してみました。

これは簡単な例です:

<wxs>var msg = "hello world"; module.exports.message = msg;</wxs>
<view>{{m1.message}}</view>

公式ドキュメントを読み終えると、上記の例は hello world ページを出力できます。アプレット スクリプト言語の機能は非常に複雑で、たとえば、es5 構文のみをサポートし、js の外部導入をサポートしません。しかし、将来的にはさらに多くの機能がサポートされることを期待しています。

メイン トピックに進み、記事のタイトルに関する質問を検討しましょう。

1. WXS を使用してフィルターを実装します

フロントエンドには通常、バックグラウンドから送信されたタイムスタンプを仕様の異なる日付に変換して表示することが求められます。以前は、データを関数でラップしてページに出力していました。前述の記事で説明した最初の方法と同様に、一部の人々はパフォーマンスの問題を考慮し、js でのループ処理の方がパフォーマンスに負荷がかかると考えています (これについてはコメントしません。実際にはテストしていないからです)
日付の書式設定の例は、前述の記事ですでに公開されています。ここでは、比較的単純な例を示します。私が開発したプロジェクトでは、バックグラウンドから返されるインターネット画像アドレスは通常相対アドレスです。つまり、画像を表示するには、構成されたドメイン名プレフィックスを追加する必要があります。通常、データを取得した後にそれを走査し、フロントエンドで表示する必要がある画像にプレフィックスを追加します。しかし、WXS を使用すると、次のことが可能になります。

<wxs>
    function getFullPath(url) {
        return "https://shiyuanjieyi.cn" + url
    }
    module.exports.getFullPath = getFullPath
</wxs>
<image></image>

上記の例では、プロセス全体が基本的に vue などのフレームワークでのカスタム フィルターの方法と似ていることがわかります。

2. WXS で他にできること

実際、WXS がさらに条件付きレンダリングを実行できることを理解していないことがよくあります。次の例を見てください:

<wxs>
  function getData(entry, type) {
    var imgUrl = '';
    var content = '';
    switch (entry) {
      case 'needs':
        imgUrl = '/images/goods_empty.png';
        content = '暂时没有需求';
        break;
      case 'goods':
        imgUrl = '/images/goods_empty.png';
        content = '暂时没有商品';
        break;
      case 'activity':
        imgUrl = '/images/activity_empty.png';
        content = '该专栏暂时没有活动';
        break;
      case 'channel':
        imgUrl = '/images/article_empty.png';
        content = '该专栏暂时没有资讯';
        break;
      case 'micro-circle':
        imgUrl = '/images/article_empty.png';
        content = '没有相关的话题哦';
        break;
      case 'needs-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你还没有发布任何需求哦';
        break;
      case 'goods-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你还没有发布任何商品哦';
        break;
      case 'goods-collection':
        imgUrl = '/images/goods_collect_empty.png';
        content = '你还没有收藏任何商品哦';
        break;
      case 'apply':
        imgUrl = '/images/activity_apply_empty.png';
        content = '你还没有报名任何活动哦';
        break;
      case 'activity-collection':
        imgUrl = '/images/activity_collect_empty.png';
        content = '你还没有收藏任何活动哦';
        break;
      default:
        break;
    }
    if (type === 'image') {
      return imgUrl;
    } else {
      return content;
    }
  }
  module.exports.getData = getData;
</wxs>
<template>
  <view>
    <image></image>
    <view>{{filter.getData(entry, 'content')}}</view>
  </view>
</template>

上の例では、条件判断を行い、対応するテンプレート出力を取得するために WXS の関数関数を使用しました。その関数は空のデータ表示ページです。おそらく、このように書くことにどのような利点があるのか​​と尋ねるでしょう?
次に、拡張が簡単であることがわかります。たとえば、新しいページに対応する空のデータ テンプレートが必要な場合は、switch ステートメントにケースを 1 つ追加するだけです。さらに、ロジックを WXML で記述すると、コードが非常に複雑になり、理解するのが難しくなります。
これを理解すると、WXML で論理的な判断が必要な操作はすべて WXS に置き換えることができることがわかります。
言い換えれば、開発中に WXS の機能を使用すると、WXML でレンダリングされた一部のビューを明確かつ効果的に処理できるようになります。

3. 感想(拡張子)

1. フィルター形式にする必要があるWXSは、使用する場合は.wxsファイルに記述するのがベストです。対応する WXML 内で直接引用するだけです。

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<wxs></wxs>
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

2. .wxs モジュール内の他の wxs ファイル モジュールを参照するには、require 関数を使用できますが、他の js ファイル モジュールを参照することはできません。

この記事の参考資料: WeChat ミニ プログラム開発の基本チュートリアル https://www.html.cn/study/20.html

以上がWeChatミニプログラムWXSの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。