微信小程序自定义模板template

亦凉 2022-10-29 03:14 288阅读 0赞

示例：

创建目录和文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWt1bmxvbmc_size_16_color_FFFFFF_t_70][]

mytemp.wxml：

<template name="mytemp">
      <view>
        <view class="title">这是我自定的模板内容</view>
        <view class="userInfo">
          <view class="userName">用户名： {
       {username}}</view>
          <view class="age">年龄： {
       {age}}</view>
        </view>
      </view>
    </template>

mytemp.wxss：

.title {
      font-size: 40rpx;
      color: greenyellow;
    }

到这里模板已经创建好了。

开始导入使用：

<import src="/template/mytemp/mytemp.wxml"></import>
    <view>
        
      <view class="otherTitle">测试使用模板</view>
      
      <template is="mytemp" data="{
       {...person}}"/>
    
    </view>

使用ES6...展开运算符，...person可以自动展开对象属性，这里的person对象在js里自己定义，：

data: {
        person: {
          username: 'curry',
          age: 33
        }
      },

需要注意wxss里也需要导入，否则样式不会生效：

/* 引入模板样式 */
    @import "/template/mytemp/mytemp.wxss";
    .otherTitle {
      font-size: 50rpx;
      font-weight: bold;
      color: red;
    }

实现效果如下：

![20210207220432401.png][]

最后需要注意的是如果模板里的类名和当前页面有相同类名，样式会被覆盖！！！

所以模板的类名可以搞特殊一些。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWt1bmxvbmc_size_16_color_FFFFFF_t_70]: /images/20221024/c6c3edeb93314e7eb873bd72eecb7a14.png
[20210207220432401.png]: /images/20221024/d9f4c6cb9c8a4f99acf9ba1adc49e09f.png