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

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!