ミニ プログラム開発の概要: WXML について

この記事では、小規模プログラムの入門レベルの開発における WXML について詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

開発フレームワークの紹介

小規模プログラムの開発フレームワークは、大きく 4 つのフレームワークで構成されます。パーツ: WXML、WXSS、WXS、および Java Script で構成されます。

1. WXML はページのコンテンツを記述するために使用されます;

2. WXSS はページ スタイルを記述します;

3. JS はユーザー ロジックとデータを処理するために使用されます通信;

4. WXS は、WXML 機能の強化を体現したものです。WXS は、要求されたデータに対して計算を実行して、wxml がページの構造を迅速に構築できるようにします。

WXML 構文

WXML(weixin マークアップ言語)

747ab682edf5e9a1d0bb2347f786e29d

WXML の特徴

WXML には 4 つあります合計の言語機能、それぞれデータ バインディング、リスト レンダリング、条件付きレンダリング、テンプレート参照

1. データ バインディング:

<!--index.wxml-->
<view>
  <text>{{message}}</text>
</view>
---------------------------------------------------
<!--index.js-->
Page
( 
  {
     data:
          {
            message:"Hello,world!"
          }
  }
)

2. リスト レンダリング

<!--index.wxml-->
<view>
  <block wx:for="{{items}}"  wx:for-item="{{item}}"  wx:key="index">
    <view>{{index}}:{{item.name}}</view>
  </block>
</view>
------------------------------------------
<!--index.js-->
Page
(
  {
    data:
        {
          items:[
                {name:"商品A"}
                {name:"商品B"}
                ]
        }
  }
)

3. 条件付きレンダリング

<!--index.xwml-->
<view>今天吃什么？<view>
<view wx:if="{{condicition===1}}">当然是吃饺子啦！</view>
<view wx:elif="{{condicition===2}}">可以考虑吃面条！</view>
<view wx:else>米饭把米饭吧</view>
-----------------------------------------------------------
<!--index.js-->
Page
(
 {
   data:
       {
       condicition:Math.floor(Math.random()*3+1)
       }
 }
)

4. テンプレートと参照

<!--index.wxml 模板-->
<template name="template">
  <view>
    <view>收件人：{{name}}</view>
    <view>联系方式：{{phone}}</view>
    <view>地址：{{address}}</view>
  </view>
</template>
<template is="template" data="{{...item}}" ></template>
--------------------------------------------------------------------
<!--index.js-->
Page
( 
  {
    data:
         {
           item:
                {
                  name="张三",
                  photo="1212123",
                  address="China"
                }
         }
  }
)

<!--index.wxml 引用-->
<import src="a.wxml"></import>
<template is="a"></template>
<!--a.wxml-->
<view>Hello,world</view>
<template name="a">
  Hello World!
</template>

注: 参照はネストできません

<!--index.wxml-->
<include src="a.wxml">
<template is="a"></template>
</include>
------------------------------------
<!--a.wxml-->
<template name="a">
  <view>This is a.wxml</view>
</template>
<view>hello world</view>

注: include はマスターを除くすべてのコンテンツをコピーします

#この記事は、https://blog.csdn.net/yue__shen/article/details/90384729

から転載されています。推奨: 「

小プログラム開発チュートリアル##」 #》

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