Skip to main content

moregeek program

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

一、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 属性代表传入模板的数据。

©著作权归作者所有:来自51CTO博客作者愚公搬代码的原创作品,请联系作者获取转载授权,否则将追究法律责任

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-引用_qq61972345e36b7的博客-多极客编程

前言 1.模板的引入方式 WXML 提供两种文件引用方式import和include import:导入模板并没有真正的使用 include:直接引入页面元素,已经使用了 2.模板和组件的比较 template(模板):是可以在wxml中引用的代码,就是在wxml中引用公用的wxml类型的代码,它的作用类似于组件,因此这里简单的说明下template与Component (组件)的区别。 te

appstore 打包上传后提示“二进制文件无效” 的解决方法_mb6359e7ae95f15的博客-多极客编程

昨天提交打包提交App,将包上传到iTunes Connect之后,以为就能发布了,便点击构建版本,发现没有刚刚上传的包,于是就点击"预发行"看一下,会看到"已上传",过不久再刷新一次再看,就变成了二进制无效,无比的郁闷,上传了五六次都是二进制文件无效。在检查了app是否支持64位以后,我以为是传错了版本,把debug版本传上去了,排查了后发现不是。查了很多的资料都说是使用了私有API或者是iDF

flutter开发之scaffold组件快速开发app_亦可追寻的博客-多极客编程

Scaffold包括的属性 const Scaffold( {Key? key, PreferredSizeWidget? appBar, Widget? body, Widget? floatingActionButton, FloatingActionButtonLocation? floatingActionButtonLocation, FloatingActionButtonAnimat

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-wxs模块的使用_qq61972345e36b7的博客-多极客编程

前言 WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内。每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。 一、WXS模块的使用

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-icon图标详解_qq61972345e36b7的博客-多极客编程

前言 在小程序中经常会用到各种各样的图标,如果这些图标都使用图片的话,将会大大增加小程序打包后的体积,而小程序限制代码最大2MB,分包加载4MB,所以为了缩小体积,我们可以使用图标来缩小体积。 使用图标有两种方式: 自带图标 外部图标(图片、精灵图、CSS绘图、矢量字体、SVG格式) 自带图标组件属性说明: 属性 类型 默认值 必填 说明 最低版本 type string 是

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-视图容器_qq61972345e36b7的博客-多极客编程

前言 视图容器 名称 功能说明 cover-image 覆盖在原生组件之上的图片视图 cover-view 覆盖在原生组件之上的文本视图 match-media media query 匹配检测节点 movable-area movable-view的可移动区域 movable-view 可移动的视图容器,在页面中可以拖拽滑动 page-container 页面容

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-引用_qq61972345e36b7的博客-多极客编程

前言 1.模板的引入方式 WXML 提供两种文件引用方式import和include import:导入模板并没有真正的使用 include:直接引入页面元素,已经使用了 2.模板和组件的比较 template(模板):是可以在wxml中引用的代码,就是在wxml中引用公用的wxml类型的代码,它的作用类似于组件,因此这里简单的说明下template与Component (组件)的区别。 te

#yyds干货盘点#【愚公系列】2022年10月 微信小程序-数据绑定_qq61972345e36b7的博客-多极客编程

前言 1.小程序页面结构 微信小程序的页面结构主要是分别由四个文件组成: js(逻辑处理文件):负责页面逻辑内容的处理,遵循js语言框架。 json(配置文件):用来设置页面的窗口内容,遵循JSON语法规范。 wxml(页面结构文件或视图文件):用于页面可视化组件的组织和描述,语法结构类似于xml,与html格式差别较大。 wxss(样式文件):兼容CSS语法规范。 2.数据绑定的定义 数据绑

#yyds干货盘点#【愚公系列】2022年10月 微信小程序-循环的使用_qq61972345e36b7的博客-多极客编程

一、列表渲染 1.wx:for 的item和index 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> 使用 wx:f

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-wxs模块的使用_qq61972345e36b7的博客-多极客编程

前言 WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内。每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。 一、WXS模块的使用

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-icon图标详解_qq61972345e36b7的博客-多极客编程

前言 在小程序中经常会用到各种各样的图标,如果这些图标都使用图片的话,将会大大增加小程序打包后的体积,而小程序限制代码最大2MB,分包加载4MB,所以为了缩小体积,我们可以使用图标来缩小体积。 使用图标有两种方式: 自带图标 外部图标(图片、精灵图、CSS绘图、矢量字体、SVG格式) 自带图标组件属性说明: 属性 类型 默认值 必填 说明 最低版本 type string 是

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-视图容器_qq61972345e36b7的博客-多极客编程

前言 视图容器 名称 功能说明 cover-image 覆盖在原生组件之上的图片视图 cover-view 覆盖在原生组件之上的文本视图 match-media media query 匹配检测节点 movable-area movable-view的可移动区域 movable-view 可移动的视图容器,在页面中可以拖拽滑动 page-container 页面容