WeChat ミニ プログラムのカスタム テンプレート

アプレットプロジェクト

1. テンプレートを定義します。
プロジェクトのルート ディレクトリの下に新しいフォルダーを作成します:templatesテンプレートを格納するために使用されます。
フォルダー templates: の下に新しいフォルダーを作成し、temp:および のtemp下に新しいファイルを作成します。temp.wxml では、テンプレートは によって定義され。2. 新しいページを作成します。アプレットのルート ディレクトリの下に新しいフォルダーを作成します: 、フォルダー test の下に新しい Page: を作成します。3. ターゲット ページでテンプレートを使用します。対象ページのwxmlファイルはテンプレートのwxmlファイルでインポートされます。ターゲット ページの wxml ファイルは、テンプレートを使用し。ターゲット ページの wxss ファイルは、インポート テンプレートの wxss ファイルを渡す必要があります。temp.wxmltemp.wxss
<template name=""></template>

testtest

<import src=""/>
<template is=""></template>
@import ""

コードに含まれる主なファイルは次のとおりです。

1. テンプレート/temp/temp.wxml
2. テンプレート/temp/temp.wxss
3. ページ/テスト/test.json
4. ページ/テスト/test.wxml
5. ページ/テスト/test.wxss
6. ページ/テスト/test.js

テンプレート/temp/temp.wxml

<!-- 定义模板 -->
<template name="my-template">
  <view class="user-box">
    <image class="avatar" src="{
     
     {avatarUrl}}"/>
    <view class="username">{
   
   {username}}</view>
  </view>
</template>

テンプレート/temp/temp.wxss

.user-box{
    
    
  text-align: center;
}
.user-box .avatar{
    
    
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
}
.user-box .username{
    
    
  font-size: 48rpx;
  font-family:fantasy;
  color: #1761d8;
  height: 80rpx;
  line-height: 80rpx;
}

ページ/テスト/test.json

{
    
    
  "usingComponents": {
    
    },
  "navigationBarBackgroundColor": "#eee",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "我的"
}

ページ/テスト/test.wxml

<import src="/templates/temp/temp.wxml"/>

<view class="test-container">
  <template is="my-template" data="{
     
     {...user}}"></template>
</view>

ページ/テスト/test.wxss

@import "/templates/temp/temp.wxss";

.test-container{
    
    
  height: 100%;
  background: #eee;
}

ページ/テスト/test.js

Page({
    
    
  data:{
    
    
    user:{
    
    
      username:"Mr Duck",
      avatarUrl:"/static/images/avatar.png"
    }
  }
})

関連リンク

ミニ プログラムのカスタム コンポーネントの WXML 構文リファレンス
>テンプレート
WXML 構文リファレンス>リファレンス