【愚公系列】2022年02月 微信小程序-template的使用

文章目录

• 一、template的概念
• 二、template模板的使用
  • 1.定义模板
  • 2.使用模板
  • 3.is的用法
• 总结

---

一、template的概念

template模板顾名思义就是页面的复用，前端可以理解成组件中通用页面的封装，后端可以理解成时函数的封装，主要的作用就是服用减少代码冗余

比如下面几个场景：

首页需要显示轮播，分类页面也需要显示轮播，详情页面也需要显示轮播。三个地方都是需要使用轮播，并且是同一个轮播。这时就可以使用template 了 把轮播的代码提取出来放入模板标签中 在多个页面引用这个模板 ，把重复的xwml 提取出来重复使用 减少代码冗余。

二、template模板的使用

1.定义模板

代码语言：javascript复制

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

2.使用模板

代码语言：javascript复制

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

代码语言：javascript复制

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

3.is的用法

代码语言：javascript复制

<!-- 动态数据 -->
<template name="tem_2">
    <!-- 显示 -->
    <view wx:if="{{mentor_image_uri==null}}">
    <!-- 默认图片地址 -->
        <image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image>
    </view>
    <view wx:else>
        <image class="widget_arrow" src="{{mentor_image_uri}}" mode="aspectFill"></image>
    </view>
    <view class='info'><span>姓名：</span>{{mentor_name}}</view>
    <view class='info'><span>职位：</span>{{career}}</view>
    <view class='info'><span>公司：</span>{{company_name}}</view>
    <view class='info'><span>地区：</span>{{address}}</view>
    <view class='info'><span>擅长：</span>{{mentor_skills}}</view>
    <navigator>详情</navigator>
    <view class='hr'></view>
</template>


<!-- 默认，不动态写入数据-->
<template name="tem_3">
    <!-- 显示 -->
    <view wx:if="{{mentor_image_uri==null}}">
    <!-- 默认图片地址 -->
        <image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image>
    </view>
    <view wx:else>
        <image class="widget_arrow" src="../../image/timg.jpg" mode="aspectFill"></image>
    </view>
    <view class='info'><span>姓名：</span>lcy</view>
    <view class='info'><span>职位：</span>程序员</view>
    <view class='info'><span>公司：</span>未知</view>
    <view class='info'><span>地区：</span>珠海</view>
    <view class='info'><span>擅长：</span>爱笑</view>
    <navigator>详情</navigator>
    <view class='hr'></view>
</template>

代码语言：javascript复制

<!-- 引入模块 -->
<import src="../index7/index.wxml" />

<!-- is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板 -->
<block wx:for="{{message2}}">
  <!-- 1==1是true，所以使用tem_2模板 -->
  <template  is="{{1 == 1 ? 'tem_2' : 'tem_3'}}" data="{{...item}}"/>
</block>

代码语言：javascript复制

data: {
    message2:[
      {
        mentor_image_uri: "../../image/timg2.jpg",
        mentor_name: "ljq",
        career: "护士",
        company_name: "中山远大医院",
        address: "中山市",
        "mentor_skills": "爱看书"
      }
    ]
  },

代码语言：javascript复制

.name {
    text-align: center;
}

.widget_arrow {
    margin-top: 20px;
    height: 200px;
    width: 200px;
    margin-left: 25%;
}

.info {
    font-size: 14px;
  width: 370rpx;
  margin: auto;
  margin-top: 10px;
}
.info span{
  font-weight: 600;
}

.info_border {
    height: 200px;
    width: 200px;
    border: 8px solid red;
}

navigator {
    margin: 0 auto;
    height: 40px;
    width: 90%;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: green;
    line-height: 40px;
    text-align: center;
}

.hr {
    height: 0;
    width: 100%;
    border: 1px solid green;
}

总结

在一个项目中需要在多处页面使用类似的模块，就需要创建模板—-减少代码量，同时代码高度复用；

• 在同一个WXML文件中创建多个类似的模板用name属性来区别；
• 模板WXSS在全局引入和在使用页面引入的区别在于模板的使用量；
• 使用 import 引入模板 WXML 和 WXSS ；
• 通过template 标签使用模板，template 标签的 is 属性与模板的 name 属性对应，data 属性代表传入模板的数据。

data import

0 人点赞