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

女爷i 2021-07-24 20:13 634阅读 0赞

作用:其他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%
    }