WeChat mini-app template details and instance code, mini-app template

Source: Internet
Author: User

Detailed description of mini-program template and instance code, mini-program template

Detailed description of the mini-program template

For example, when I was working on a small program of China Enterprise Business School, the structure of the course search result page and the course list page were exactly the same, so it was very suitable to use templates to build pages. Implement a definition and use it everywhere.


Template

I. Define a template

1. Create a new template folder to manage all templates in the project;
2. Create a courseList. wxml file to define the template;
3. Use the name attribute as the Template name. Then, define the code snippet in <template/>.

Note:

A. You can see that multiple templates can be defined in a. wxml file, which can be distinguished by name;

B. The data in the template is all attributes after expansion.

<template name="courseLeft">  <navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}">    <view class="item mr26">      <image src="{{imagePath}}" mode="aspectFill"></image>      <view class="course-title">        <text class="title">{{courseName}}</text>        <text class="author">- {{teacherName}}</text>      </view>      <view class="course-info clearfix">        <view class="fl"><text class="play">{{playCount}}</text></view>        <view class="fr"><text class="grade">{{score}}</text></view>      </view>      <view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view>    </view>  </navigator></template><template name="courseRight">  <navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}">    <view class="item">      <image src="{{imagePath}}" mode="aspectFill"></image>      <view class="course-title">        <text class="title">{{courseName}}</text>        <text class="author">- {{teacherName}}</text>      </view>      <view class="course-info clearfix">        <text class="play fl">{{playCount}}</text>        <text class="grade fr">{{score}}</text>      </view>      <view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view>    </view>  </navigator></template>

Ii. Use templates

1. Use the is attribute to declare the template to be used

<import src="../../templates/courseList.wxml"/>

2. Pass in the data required by the template. Generally, list rendering is used.

<block wx:for="{{courseList}}">  <template is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}" data="{{...item}}"></template></block>

Note:

A. The expression can be used to determine which template is = "{index % 2 = 0? 'Courseleft ': 'courseright '}}"

You can also use wx: if to determine. Index is the subscript of the current array item.

<template wx:if="{{index%2 === 0}}" is="courseLeft" data="{{...item}}"></template><template wx:else is="courseRight" data="{{...item}}"></template>

B. data is the data to be rendered by the template. data = "{{... item }}" is written as ES6, and item is wx: for the current item ,... is the expansion operator. In the template, {item. courseName} is directly {courseName }}.

Iii. template Style

1. Create a courseList. wxss file when creating a template, and control the style in the same way as CSS.

2. import in the page. wxss file where the template needs to be used, or directly introduce it in app. wxss. This requires only one import, and other files will not be introduced.

@import url("../template/courseList.wxss");

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.