WeChat アプレット WXML のテンプレートとリファレンスを学ぶ

この投稿は、 WeChat アプレットの開発を完了するための9 時間の学習のためのメモです.
ドキュメント:テンプレート、アプレット、リファレンス、アプレット

1. テンプレート: テンプレート タグを使用して、テンプレートに独自のコード スニペットを定義します。

<!-- index.wxml -->
<template name="tempItem">
    <view>
        <view>收件人：{
   
   {name}}</view>
        <view>联系方式：{
   
   {phone}}</view>
        <view>地址：{
   
   {address}}</view>
    </view>
</template>

<template is="tempItem" data="{
     
     {...item}}"></template>

name属性はテンプレートの名前であり、is属性は使用しているテンプレートを宣言します。{ {...item}}先頭の 3 つのドットは、es6 構文のスプレッド演算子であり、オブジェクトまたは配列を分解して割り当てることができます。

//index.js
Page({
    data:{
        item:{
            name:"张三",
            phone:"18888888888",
            address:"中国"
        }
    }
})

さらに、is属性は動的なデータ バインディングを実行することもできます。

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{
     
     {[1, 2, 3, 4, 5]}}">
    <template is="{
     
     {item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

2. ファイル参照: インポートとインクルード

テンプレートを参照する 2 つの方法: インクルードとインポートの違い
:includeテンプレート コンテンツを除くファイル内のコンテンツのみが参照され、importファイル内のテンプレート内のコンテンツのみが参照され、データは動的に渡されます。is参照されたテンプレート名を示し、data着信テンプレート データを示します。

輸入

<!--index.wxml -->
<import src="a.wxml"></import>
<template is="a"></template>

<!-- a.wxml -->
<view>Hello,world</view>
<template name="a">
    Hello,World!
</template>

import import のスコープには
スコープの概念があります。つまり、ターゲット ファイルで定義されたテンプレートのみをインポートし、ターゲット ファイルによってインポートされたテンプレートはインポートしません。

例: C インポート B、B インポート A、B で定義されたテンプレートは C で使用でき、A で定義されたテンプレートは B で使用できますが、A で定義されたテンプレートは C で使用できません。

これは、テンプレートで無限ループを参照する問題を回避するためです。

<!--index.wxml-->
<import src="a.wxml"></import>
<template is="a"></template>

<!--a.wxml-->
<import src="b.wxml"/>
<template name="a">
    This is a.wxml
</template>

<!--b.wxml-->
<template name="b">
    This is b.wxml
</template>

含む

<!--index.wxml-->
<include src="a.wxml" />
<template is="a">
</template>

<!--a.wxml-->
<template name="a">
    <view>
        This is a.wxml
    </view>
</template>
<view>Hello,world</view>