微信小程序模板,微信小程序template模板的使用-即速应用

微信小程序模板,微信小程序template模板的使用

浏览量：940 时间：2019-12-09 来源：cccrush_

模板WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。当项目需要多次使用同一个布局和样式的时候，就可以考虑使用template（模板）来减少冗余代码。
如何定义以及使用模板
wxml模块：
新建template文件夹，新建wxml。wxml文件由template标签包裹，并设置template标签名字属性方便调用。使用时在对应wxml文件通过import引用。templatename="postitem"viewclass='post-container'viewclass='post-author-date'imageclass='post-author'src='/images/xml.jpg'/imagetextclass='post-date'{{item.date}}/text/viewtextclass='post-title'{{item.title}}/textimagewx:if="{{!boolean_show}}"class='post-image'src="{{item.image}}"/imagetextclass='post-content'{{item.content}}/textviewclass='post-like'imageclass='post-like-image'src="{{item.img.view_img}}"/imagetextclass='post-like-font'{{item.view_num}}/textimageclass='post-like-image'src="{{item.img.collect_img}}"/imagetextclass='post-like-font'{{item.collect_num}}/text/view/view/template
引用template模板的语句实际上只有下面一句，后面加上data属性是为了遍历数组得到数组中的每一个元素对象的每个内容
templateis="postitem"/
importsrc="文件路径"/!-在需要调用处，通过名字属性调用--blockwx:for="{{post_key}}"wx:for-item="item"!--将postId作为一个属性存放到view标签中,自定义属性data开头--viewcatchtap='onPostTap'data-postId="{{item.postId}}"templateis="postitem"data="{{item}}"//view/block
wxss模块：
1.在template文件夹下新建wxss文件。
2.写入wxss内容。
3.使用时在对应wxml文件通过@import引用。
.post-container{/弹性盒子模型/display:flex;flex-direction:column;margin-top:20rpx;margin-bottom:40rpx;background-color:#fff;/上下边界/border-bottom:1pxsolid#ededed;border-top:1pxsolid#ededed;/页边距/padding-bottom:5px;}
引用语句只有一句，不需要通过import引用
@import"文件路径";
下面的wxss文件中就已经引用了template文件夹下的wxss文件的内容了，比如上面的.post-container
@import"文件路径";swiper{width:100%;height:600rpx;}swiperimage{width:100%;height:600rpx;}

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。