[Yugong series] wechat applet in February 2022 - Reference

Preface

1. Template import method

WXML There are two ways to reference files import and include

• import： The import template is not really used
• include： Direct introduction of page elements , Already in use

2. Comparison of templates and components

template（ Templates ）: Yes, you can. wxml Code referenced in , Is in the wxml The common wxml Type of code , It works like a component , So here's a simple explanation template And Component （ Components ） The difference between .

template（ Templates ） And Component （ Components ） The difference between ：

1.template（ Templates ）： Mainly used for display , In short, it is mainly used for embedding wxml Code for , Templates can have corresponding styles and logic , But he does not belong to the corresponding js file , Its logic depends on the referenced page .

2.Component（ Components ）： As a separate function module , It can include not only page presentation but also event logic processing of the module . Like a page ,Component Components can contain wxml wxss js json file .

in general ,template（ Templates ） and Component （ Components ） Very similar ,Component （ Components ） Compared with template（ Templates ） More complete , Close to a separate module , I have my own logical method , So there will be some differences in the use scenarios ,template（ Templates ） It's more suitable for display only , and Component （ Components ） It can be used in business or in relatively complex scenarios .

One 、import

import You can use the... Defined by the target file in this file template, Such as ：

stay item.wxml There is a definition in item Of template：

<template name="item">   <view>template text: {{msg}}</view>   <view> date  : {{time}}</view> </template>

stay index.wxml Is cited in item.wxml, You can use item Templates ：

<import src='../common/template.wxml'/>    <view class='container'>   <view wx:for='{{list}}'>    <!-- Templates use -->    <template is='item' data="{{...item}}"/>  </view> </view>

Two 、import Scope of action

import There is a concept of scope , That is to say, only import As defined in the target file template, Not import Target file import Of template.

Such as ：C import B,B import A, stay C Can be used in B Defined template, stay B Can be used in A Defined template, however C Out of commission A Defined template.

<!-- A.wxml --><template name="A">  <text> A template </text></template><!-- B.wxml --><import src="a.wxml"/><template name="B">  <text> B template </text></template><!-- C.wxml --><import src="b.wxml"/><template is="A"/>  <!-- Error! Can not use tempalte when not import A. --><template is="B"/>

3、 ... and 、include

include You can remove the target file from <template/> <wxs/> Outside the entire code into , So copy it to include Location , Such as ：

<!-- index.wxml --><include src="header.wxml"/><view> body </view><include src="footer.wxml"/><!-- header.wxml --><view> header </view><!-- footer.wxml --><view> footer </view>

Four 、 Case study

Cases with toast Prompt box as an example

1. Define templates

<template name="toast">    .......</template>

2. Use templates

<import src="tools/toast/toast.wxml"/><template is="toast" />

Every page needs to be quoted once . Now , Another one is customized popup box , Every need popup The page of , It needs to be quoted again popup.wxml. More Than This , When your small program gets bigger , More and more customized templates , Each page looks like this ：

<import src="tools/toast/toast.wxml"/><template is="toast" /><import src="tools/popup/popup.wxml"/><template is="popup" /><import src="tools/xxx/xxx.wxml"/><template is="xxx" />

If you change the path of a custom component , Then each page needs to be changed once ; Now , We can use include Properties of

<import src="tools/toast/toast.wxml"/><import src="tools/popup/popup.wxml"/><template is="wetoast"/><template is="popup"/>

<include src="template.wxml" />