Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

WXML provides templates in which snippets of code can be defined and then invoked in different places.

preface

You will reap

👉 applet template how to use

👉 Applet template data and event handling

👉 applets template some considerations and optimization

Basic use of templates

Creating a template File

Create a template folder inside the page. You can use the new Page widget to quickly create the file

Note: only WXML and WXSS files are used when calling templates. JS files in templates are not used. The logic in the template is handled in the calling file.

Files can be created according to your own project design and are not fixed in this way

Define the template

Define the code snippet inside
, using the name attribute as the name of the template.

<template name="msgItem"> <view> <text class="info"> </text> </view> </template>Copy the code

Use the template

To use templates in WXML, there are two steps

1) Declaration, key import label

2) Use the key IS attribute

<! -- index.wxml --> <! --> <import SRC =".. /template/template.wxml"/> <! <template is="msgItem"/>Copy the code

The is name is the same as the template name

The template WXSS

If the template has its own WXSS, such as our template. WXSS file, it needs to be imported in the file calling the template (such as index.wxss in the example), otherwise it won’t take effect

/**index.wxss**/ @import ".. /template/template.wxss";Copy the code

Conclusion:

  • WXSS imports WXSS
  • WXML is imported into WXML
  • Js is invalid

Template data passing

[Called WXML] passes values to the template via data

<! -- index.wxml --> <template is="msgItem" data="{{... item}}"/>Copy the code

Item is defined in the calling JS

<! -- index.js --> Page({data: {item: {title: 'template', MSG: 'this is a template',}}})Copy the code

Use directly in templates

<! -- template.wxml --> <template name="msgItem"> <view> <text class="info"> {{title}}: {{msg}} </text> </view> </template>Copy the code

Event handling in template files

The template uses events in the js file that calls the template.

  • Define in your owntemplate.jsIt doesn’t go into effect

<! --template.wxml--> <template name="msgItem"> <view> <text class="info" bindtap="handleTap"> {{title}}: {{msg}} </text> </view> </template>Copy the code
<! -- index.js --> handleTap() {console.log('template click')},Copy the code

Optimize template events

If it is a common template method, the method must be written in every file called, there will be a lot of repeated code, we can improve as follows. (Although the template template cannot use its own js, we can write the method in the template.js file and then import it in the template file.)

Define methods uniformly in any JS file

<! -- template.js --> const template = {handleTap() {console.log('template click')}} export default template;Copy the code

Import it where it needs to be used

// index.js import template from '.. /template/template'; Page({ handleTap:template.handleTap })Copy the code

About data passing in JS files

In template.js you can retrieve the entire data from the index.js file

The template template and Component are similarities and differences

The same

  • All for the reuse of code
  • They cannot be rendered independently and must be attached to the page

The difference between

Template template: Lightweight, mainly for presentation. There are no configuration files (.json) and business logic files (.js), so variable references and business logic events in the template need to be defined in the [page that references the template] file.

Component: Has its own business logic and consists of four files, similar to page, but different from JS and JSON files.

choose

  • If it’s just for presentation, use template.

  • If there are many business logic interactions involved, use the Component component.

Scope of import

Import has the concept of scope, that is, only the template defined in the target file is imported, not the template imported from the target file.

C import B import A //C can use B, B can use A, but C can not use ACopy the code

References:

Wechat applet template template

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 Mini-program custom Component super full utility guide

Vant 👉 applet in Weapp nanny level tutorial and installation process of problem solving

👉 the most complete CSS shadow summary

👉 Best practices for clean JavaScript coding