WeChat ミニ プログラムの手順は何ですか?

藏色散人
リリース: 2023-01-06 17:04:38
オリジナル
5339 人が閲覧しました

WeChat アプレットの命令には次のものが含まれます。 1.「wx:for」命令。使用方法は「{{index }} {{ item } }"; 2. 配列の現在の要素の変数名を指定できる「wx:for-item」命令; 3. 現在の要素の変数名を指定できる「wx:for-index」命令配列の添字、4.「wx:if」命令、5.データバインディング命令など

WeChat ミニ プログラムの手順は何ですか?

#このチュートリアルの動作環境: Windows 10 システム、WeChat アプレット正式バージョン 8.0.25、Dell G3 コンピューター。

WeChat ミニ プログラムの説明とは何ですか?

WeChat ミニ プログラム: よく使用されるコマンド/コンポーネント

1. コマンド

1.1 wx:for command

  • 1.1.1 html

1. 組み込みのインデックス/項目があり、前者はインデックス、後者は要素

<view wx:for="{{ data_list }}">{{ index }} {{ item }} index索引 item元素 </view>
ログイン後にコピー

2です。変更

wx:for-itemを使用して配列の現在の要素の変数名を指定します。

wx:for-indexを使用して配列の現在の添え字の変数名を指定します:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
ログイン後にコピー

  • 1.1.2 js

  •  data: {
        data_list:[&#39;大饼&#39;,&#39;洋葱&#39;]
      },
    ログイン後にコピー
1.2 wx:if

フレーム内で、wx:if= を使用します。 "" でコード ブロックをレンダリングする必要があるかどうかを判断します。

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
ログイン後にコピー

1.3 block wx:if

wx:if はコントロール属性であるため、ラベルに追加する必要があります。

複数のコンポーネントタグを一度に判定したい場合は、タグを使用して複数のコンポーネントをラップし、上記のwx:ifコントロール属性を使用できます。

注: はコンポーネントではなく、ページ上でレンダリングを行わず、コントロール属性のみを受け入れる単なるラッピング要素です

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
ログイン後にコピー

1.4 データ バインディング

  • 1.4.1 html

  • <view>数据1:{{message}}</view>
    ログイン後にコピー
    #1.4.2 js
  • Page({
     
      /**
       * 页面的初始数据
       */
      data: {
        message:"新年快乐",
      }
    )}
    ログイン後にコピー
    2. コンポーネント (ラベル)

    2.1 ビュー---div と同様

    2.2 画像---画像

    2.3 テキスト--- -スパン

    推奨学習: 「

    小プログラム ビデオ チュートリアル

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!