Shulou(Shulou.com)05/31 Report--

This article mainly introduces WeChat Mini Programs in how to use the template template related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this WeChat Mini Programs article on how to use the template template will have a harvest, let's take a look at it.

WeChat Mini Programs template template use

Preface

WeChat Mini Programs provides the use of template, that is, the same plate can be used for code interoperability, such as the effect diagram below, you can use template.

Effect picture

I. template definition

The most important thing about a template is the name of the template, that is, "

The following is the example template code

{{date}} {{title}} {{content}} {{collection}} {{reading}}

Wxss file

.post-container {display: flex; flex-direction: column; margin-top: 20rpx; margin-bottom: 40rpx; background-color: white; border-bottom: 1px solid # ededed; border-top: 1px solid # ededed; padding-bottom: 5px;} .post-author-date {margin: 10rpx 0 20rpx 10rpx;} .post-author {width: 60rpx; height: 60rpx; vertical-align: middle;} .post-date {margin-left: 20rpx; vertical-align: middle; margin-bottom: 5px; font-size: Post-title {font-size: 34rpx; font-weight: 600; color: # 333; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;} .post-image {margin-left: 16px; width: 100%; height: 340rpx; margin: auto 0; margin-bottom: 15rpx;} .post-content {color: # 666; font-size: 28rpx; margin-bottom: 20rpx; margin-left: 20rpx; margin-right: 20rpx; letter-spacing: 2rpx; line-height: 40rpx Post-like {font-size: 13px; flex-direction: row; line-height: 16px; margin-left: 16px; color: gray;} .post-like-image {height: 16px; width: 16px; margin-right: 8px; vertical-align: middle;} .post-link-text {vertical-align: middle; margin-right: 20px;}

2. Template use

Introduce template file

Using the template file with is when using the name defined by the template data, the data in the loop is defined with "." If you express it, you can tile all the data in item, so that you don't have to write "item.xx" in template, but just write the properties in item. You want to use the wxml file of template program.

Wxss file

@ import 'post-item/post-item-template.wxss'; 's article on "how to use template templates in WeChat Mini Programs" ends here. Thank you for reading! I believe you all have a certain understanding of "how to use template templates in WeChat Mini Programs". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.