Shulou(Shulou.com)06/01 Report--

This article editor for you a detailed introduction of "WeChat Mini Programs's template template how to use", the content is detailed, the steps are clear, the details are handled properly, I hope this "WeChat Mini Programs's template template how to use" article can help you solve your doubts, the following follows the editor's ideas slowly in depth, together to learn new knowledge.

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'; read here, this article "how to use WeChat Mini Programs's template template" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself. If you want to know more about related articles, 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.