Customized template in wechat applet

Applet project

1. Define templates .
Create a new folder under the project root directory ：templates, Used to store templates .
Folder templates I'm gonna go ahead and create a new folder ：temp,temp Next new file ：temp.wxml and temp.wxss.
temp.wxml in , adopt <template name=""></template> Define templates .
2. New page .
Create a new folder under the applet root directory ：test, In the folder test Under the new Page：test.
3. Use template in target page .
Of the target page wxml File by <import src=""/> Import template wxml file .
Of the target page wxml File by <template is=""></template> Use templates .
Of the target page wxss Document approval @import "" Import template wxss file .

The main files involved in the code are ：

1. templates/temp/temp.wxml
2. templates/temp/temp.wxss
3. pages/test/test.json
4. pages/test/test.wxml
5. pages/test/test.wxss
6. pages/test/test.js

templates/temp/temp.wxml

<!--  Define templates  -->
<template name="my-template">
  <view class="user-box">
    <image class="avatar" src="{
     {avatarUrl}}"/>
    <view class="username">{
   {username}}</view>
  </view>
</template>

templates/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;
}

pages/test/test.json

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

pages/test/test.wxml

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

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

pages/test/test.wxss

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

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

pages/test/test.js

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

Related links

Custom components in applets
WXML Syntax reference > Templates
WXML Syntax reference > quote