4

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

 1 year ago
source link: https://blog.51cto.com/u_15437432/5818052
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

精选 原创

愚公搬代码 2022-11-02 20:26:34 博主文章分类：小程序 ©著作权

文章标签 javascript 复用 封装 文章分类 微信开发 移动开发 yyds干货盘点 阅读数225

一、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;
}

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

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK