模板WXML提供了一个" template "模板，您可以在该模板中定义代码片段，并在各个位置调用它们。 接下来博主用文字说明，最后给出源代码作为参考。
文件结构正文中使用的模板类和模板结构如下。
定义模板template是模板化的技术
使用name属性作为模板的名称。 然后，在中定义代码剪辑。 例如，以下内容：
其中postItem表示模板名称，从其他wxml文件调用，
如果要使用此模板类的文件名(即其他wxml文件)，则必须部署文件，然后根据模板类的名称调用该文件，如java引导包或c/c头文件。 这将是：
如您所见，其中import的post-item-template.xml是上图中所示的模板类文件的名称。
applet的绝对路径必须在目录开头加上正斜杠(从根目录到/xxxx/xxx/xx.xx )
然后，具体调用如下
然后，如果导入成功，则必须导入模板类的wxss文件，并将其导入到导入文件中的相应wxss文件中。
而且必须导入到wxss
wxss将导入到wxss
导入到wxmlwxml
但是不能抽象出js。 因此，只能称为模板化，不能称为模块化
如下所示。
模板内路径问题：
使用模板时，建议使用绝对路径。 这适用于各个地方的帧调用模板
使用template意味着view使用了wx:for循环，但此时循环只输出一个数组。 也就是说，无论输出什么样的数据，如果不在数组中，就无法识别并输出
源代码post-item-template.wxml
template name=' postitem ' view class=' post-container ' view class=' post-author-date ' image src=' { author _ iii viewviewclass=' post-container-content ' text class=' post-ti tition textimagesrc=' { post _ image } ' class=' pop viewviewclass=' post-container-like ' view class=' post-like ' image src='/images/good.png ' class=' post ' text/viewviewclass=' post-like ' image src='/images/imagetextclass=' post-like-num ' { view _ num }/text tuss imagetextclass=' post-like-num ' { turn _ num } }/text/viewviewclass=' post-like ' image src='/images/num
. post-container { margin-top :20 px； }.post-author-date { margin-left :10 rpx； 边距-顶级： 3r px； 边距- bottom : 3r px； height: 80rpx； }.post-author{ height: 60rpx； width: 60rpx； border-radius: 50%； vertical-align :中间； }.post-date { line-height 336080 rpx； 边距-左边缘： 15px； font-size: 42rpx； }.post-image{ height: 920rpx； width: 100%； }.post-text { margin :10 rpx 010 RP X10 rpx； }.post-title { font-size 336032 rpx； 字体权重： bold； 边距-左： 15r px； 边距-顶部： 15r px； 边距- bottom : 15r px； }.post-like { margin-left :10 px； 显示： inline； }.post-like-image { height :32 rpx； width: 32rpx； vertical-align :中间； }.post-like-num { font-size 336025 rpx； 边距-左： 3r px； } post-item-template.wxss
import src=' posts-item/posts-item-template.wxml '/viewswipercatchtap=' onswipertap ' class=' swiper-container ' indicator-dots=' true ' indicator-active-color=' 1.jpg ' class=' swiper-image ' data-postid='0'/image/swiper-items wiper-itemimagesrc='2. jpg ' class=swiper-items wiper-itemimagesrc=' ./images/3si per-items wiper-itemimagesrc=' ./images/4.jpg ' class=template---view catchtap=' onposttap ' data-postid=' { { item.postid } } ' data-post name=' name ' templat id }
/* pages/posts/posts.wxss */@ import '/pages/posts/posts-item/posts-item-template.wxss '； swiper-container { width :100 %； height: 920rpx； }.swiper-image{ width: 100%； height: 920rpx； } posts.wxml
微信程序演示
版权所有，禁止转载，违者必究。
喜欢的朋友可以称赞评论哦。 你的支持是我更新的最大动力~