微信小程序 template模板引用、include引用

最新推荐文章于 2024-09-06 14:55:10 发布

神奇大叔

最新推荐文章于 2024-09-06 14:55:10 发布

阅读量638

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104370936

版权

微信小程序专栏收录该内容

62 篇文章 5 订阅

订阅专栏

作用:其他wxml文件能直接使用模板定义好的html内容

template模板引用:
	1、创建.wxml
	  <template name='xx'>
		可以嵌套其他的<template is="..." />
	  </template>
	  
	2、创建.wxss
	  写模板样式
	
	3、在使用该模板的文件引入
		  .wxml:<import src='路径'/>
		  	若:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template
		  		但是C不能使用A定义的template
		  .wxss:@import '路径'
		 
	
	4、模板使用传入的变量
		<template is='xx' data='{{...item}}'/>
		<template is='xx' data='{{变量1,变量2}}'/>
		使用解构赋值:模板内可直接使用对象中的属性
		不使用解构赋值:则根据传入的变量名来使用
			其中:
				<template />不能绑定事件

include引用:
	<include src="x.wxml"/>
	可以将目标文件除了<template/> <wxs/>外的整个代码引入,相当于是拷贝到include位置
	如:
	index.wxml:
		<include src="header.wxml"/>
		<view> body </view>
	
	header.wxml:
		<view> header </view>

代码示例:
模板.wxml文件:

<template name='temp'>

	<view class='article'>
	    <view class='content'>
	      <image class='author_img' src='{{authorIcon}}'></image>
	      <text class='author'>{{authorName}}</text>
	      <text class='date'>{{authorDate}}</text>
	    </view>
	  </view>
	  <text class='title'>{{title}}</text>
	  <image class='content_img' src='{{articleImg}}'></image>
	  <text class='text'>{{articleText}}</text>
	  <view class='like'>
	    <image class='zan_img' src='{{dzImg}}'></image>
	    <text class='zan'>{{articleLikeComment}}</text> 
	    <image class='fx_img' src='{{fxImg}}'></image>
	     <text class='fx'>{{articleLikeSc}}</text> 
	  </view>
  
</template>

模板wxss文件:

.article{
  display: flex;
  flex-direction:column;
  margin-top:70rpx;
  margin-bottom:40rpx;
  background-color: #fff;
  border-top:solid 1px #ededed;
  border-bottom:solid 1px #ededed;
  padding:1px;
  padding-bottom:5px;
}
.content{
  margin-top:10rpx;
  margin-bottom:20rpx;

}
.author_img{
width:60rpx;
height:60rpx;
vertical-align:middle;

}
.author{
margin-left:20rpx;
}
.date{
margin-left:20rpx;
vertical-align:middle;
margin-bottom:5px;
font-size:20rpx;
}
.title{
font-size:34rpx;
font-weight: 700;
color:#333;
margin-bottom:10px;
}
.content_img{
margin-left:16px;
width:100%;
height:340rpx;
margin:auto 0;
margin-bottom:15px;
}
.text{
color:#666;
letter-spacing: 2rpx;
line-height: 40rpx;
margin-bottom:20rpx;

}
.like{
font-size:13px;
flex-direction: row;
line-height: 16px;

}
.zan_img{
height: 16px;
width:16px;
margin-left:8px;
vertical-align: middle;

}
.zan{
vertical-align: middle;
margin-right: 2rpx;
}
.fx_img{
height: 16px;
width:16px;
margin-left:8px;
vertical-align: middle;
}
.fx{
vertical-align: middle;
margin-right: 20px;
}

引入模板的wxml文件:

<import src='./new-temp/new-temp.wxml' />

<block wx:for="{{newsData}}" wx:for-item="item" wx:for-index="index" wx:key="key">
//传入的item是对象
  <template is='temp' data='{{...item}}'/>
</block>

引入模板样式的wxss文件:

/* pages/news/news.wxss */
@import "new-temp/new-temp.wxss"

.v-container{
  background-color:#f1f1f1;
}
.swipe{
  width:100%;
  height:325rpx;
}
.swipe image{
  width:100%
}