WeChat アプレット学習 WXS 使用方法チュートリアル

wxsとは何ですか?

wxs (WeiXin Script) は、小規模プログラム用のスクリプト言語です。WXML と組み合わせて、ページ構造を構築できます。

wxs タグ

<wxs モジュール="utils" src="../../wxs/test.wxs"></wxs>

モジュール属性:

現在のタグのモジュール名。この値は一意にすることをお勧めします。同じ名前のモジュールがある場合は、順番に上書きされます（後者が前者を上書きします）。

src属性:

a. 参照できるのは .wxs ファイルのみであり、パスは相対パスである必要があります。

b. すべての wxs モジュールはシングルトンです。wxs モジュールが初めて参照されると、自動的にシングルトンオブジェクトとして初期化されます。複数のページ、複数の場所、複数の使用はすべて同じ wxs モジュールオブジェクトを使用します。

c. wxs モジュールが定義された後に参照されていない場合、モジュールは解析されず、実行されません。

wxsモジュール

wxs コードは、wxml ファイルのタグ内、または拡張子が .wxs のファイルに記述できます (WeChat 開発者ツールでは、右クリックして .wxs ファイルを直接作成し、その中に wxs スクリプトを直接記述します)。

書き方1は以下のとおりです。

//テスト.wxml
<wxs モジュール="utils">
  モジュール.エクスポート = {
    メッセージ: 'こんにちは世界'
  }
</wxs>
<ビュー> {{utils.msg}}</ビュー>
// 画面出力: hello world

書き方2は次のとおりです。

//テキスト.wxml
<wxs モジュール="utils" src="../../common/wxs/test.wxs"></wxs>
// 単一タグクロージャメソッドを直接使用することもできます // <wxs module="utils" src="../../common/wxs/test.wxs" />
<ビュー> {{utils.msg}}</ビュー>
//テスト.wxs
モジュール.エクスポート = {
  メッセージ: 'こんにちは世界'
}

通常、wxs コードは .wxs ファイルに記述することをお勧めします。

モジュールの説明

各 .wxs ファイルと wxs タグは個別のモジュールです。
各モジュールには独立したスコープがあります。つまり、モジュールで定義された変数と関数はデフォルトでプライベートであり、他のモジュールからは見えません。
モジュールが内部のプライベート変数と関数を公開したい場合は、module.exports を通じてのみ実現できます。

Q1: 同じ wxml で複数の wxs ファイルをインポートし、同じ名前の変数または関数がある場合はどうなりますか?

//テスト.wxml
<wxs モジュール="utils" src="../../wxs/test.wxs"></wxs>
<wxs モジュール="utils1" src="../../wxs/test1.wxs"></wxs>
<ビュー> {{utils.msg}} + {{utils.say()}}}</ビュー>
<ビュー> {{utils1.msg}} +{{utils1.say()}}</ビュー>

//テスト.wxs
モジュール.エクスポート = {
  メッセージ: 'hello test.wxs',
  言う: 関数 (){
    'test.wxsのsay()'を返します
  }
}
//テスト1.wxs
モジュール.エクスポート = {
  メッセージ: 'hello test1.wxs',
  言う: 関数 (){
    'test1.wxsのsay()'を返す
  }
}
// 画面出力 // hello test.wxs + test.wxs の say()
// hello test1.wxs + test1.wxs の say()

検証の結果、各モジュールには独立したスコープがあることがわかりました。

Q2: 他の wxs ファイルモジュールを .wxs モジュールにインポートしたい場合は、どうすればよいでしょうか?

require関数を通じて

//テスト.wxs
var test1 = require('./test1.wxs')
モジュール.エクスポート = {
  メッセージ: 'hello test.wxs',
  言う: 関数 (){
    コンソールログ(test1.msg)
    'test.wxsのsay()'を返します
  }
}
// コンソール出力 // [WXS ランタイム情報] hello test1.wxs

wxsコメント

// wxml ファイル <wxs module="utils">
// .wxs 単一行コメント/**
 * .wxs-複数行コメント*/
 
/*
変数a = 1

</wxs>

上記の例では、すべての wxs コードがコメント化されています。3 番目の書き方は比較的まれです。勉強中に見かけたので記録しました。

.wxs ファイルの場合、コメントには単一行と複数行の 2 種類しかありません。

wxsの基本

加算演算 (+) は文字列を連結するために使用されます。

<wxs モジュール="utils">
モジュール.エクスポート = {
  getnum: 関数 () {
    変数a = 10
    var b = 20
    var str = a + '+' + b + '=' + (a+b) 
    文字列を返す
  }
}
</wxs>
<ビュー>{{utils.getnum()}}</ビュー>

`` 連結演算子は使用できません。使用するとエラーが報告されます。

wxs は現在、次のデータ型をサポートしています。

数値（値）、文字列（文字列）、ブール値（ブール値）、配列（配列）、オブジェクト（オブジェクト）、関数（関数）、日付（日付）、正規表現（正規表現）

wxs データ型には null/undefined はありません。

日付オブジェクトを生成するには、現在の時刻のオブジェクトを返す getDate() を使用する必要があります。

<wxs モジュール="utils">
モジュール.エクスポート = {
  getNowTime: 関数 () {
    getDate() を返す
  }
}
</wxs>
<ビュー>{{utils.getNowTime()}}</ビュー>
// 画面出力 // 2021 年 5 月 1 日土曜日 14:42:57 GMT+0800 (中国標準時)

new Date() は使用できません。エラーが報告されます。

分割や矢印関数などの ES6 構文はサポートされていません。

変数を宣言するために let/const を使用することはできません。var を使用する必要があり、変数の昇格があります。

<wxs モジュール="utils">
モジュール.エクスポート = {
  getnum: 関数 () {
    a = 10とする
    返す
  }
}
</wxs>
<ビュー>{{utils.getnum()}}</ビュー>

アプリケーションシナリオ

通常、バックエンドはタイムスタンプ形式をフロントエンドに返しますが、それを yyyy-mm-dd などの目的の時間形式に処理する必要があります。この場合、wxs を使用して時間変換関数を呼び出すことができます。

おそらく、js の関数を使用してデータをパッケージ化し、それをページに出力することは可能ではないのかと尋ねる人がいるかもしれません。答えは「はい」です。比較的優れていると思われるソリューションを追求するだけです。

<wxs モジュール="utils">
モジュール.エクスポート = {
  formatTime: 関数 (timeStamp) {
    var now = getDate(parseInt(timeStamp))
    var 年 = now.getFullYear()
    var 月 = now.getMonth()+1 
    月 = 月 < 10 ? '0' + 月: 月
    var 日 = now.getDate()
    日 = 日 < 10 ? '0' + 日 :日
    年 + '-' + 月 + '-' + 日を返す 
  }
}
</wxs>
<ビュー>{{utils.formatTime(1619852841428)}}</ビュー>
// 画面出力 // 2021-05-01

バックグラウンドによって返されるネットワークイメージアドレスは、相対パスの場合もあれば、完全なイメージパスの場合もあります。イメージを表示する場合は、設定されたドメイン名のプレフィックスを追加する必要があります。

<wxs モジュール="utils">
モジュール.エクスポート = {
  getImg: 関数 (url = '') {
    var origin = 'https://xxx.com'
    url.indexOf('https') !== -1 || url.indexOf('http') !== -1) の場合 {
      戻りURL
    } それ以外 {
      戻り元 + URL
    }
  }
}
</wxs>
<画像 src="{{utils.getImg('/a.png')}}"></画像>
// src 出力 // https://xxx.com/a.png

ピットフォールレコード

コンパイルを使用して wxml を呼び出すと、予期される LineFeed が表示されます。

解決策: ES6 のすべての部分を ES5 に置き換え、var 宣言を使用します。

要約する

これで、WeChat ミニプログラム学習のための wxs の使用方法に関するチュートリアルの記事は終了です。WeChat ミニプログラムでの wxs の使用方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: