#yyds干货盘点#愚公系列2022年11月微信小程序-template的使用

Posted 2022-11-03

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#愚公系列2022年11月微信小程序-template的使用相关的知识，希望对你有一定的参考价值。

一、template的概念

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

比如下面几个场景：

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

二、template模板的使用

1.定义模板

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

2.使用模板

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

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

3.is的用法

<!-- 动态数据 -->
<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>

<!-- 引入模块 -->
<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>

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

.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;