当前位置:网站首页>[Yugong series] wechat applet in February 2022 - Reference
[Yugong series] wechat applet in February 2022 - Reference
2022-06-12 22:56:00 【Hua Weiyun】
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" />边栏推荐
- Dix points de défense clés dans les exercices d'attaque et de défense détaillés
- 3.5 setup and teardown of test classes
- Flutter series part: detailed explanation of GridView layout commonly used in flutter
- 【LeetCode】209. 长度最小的子数组
- 在同花顺开户证券安全吗,买股票怎么网上开户
- 【LeetCode】33. Search rotation sort array
- OpenCV源代码编译
- JVM foundation - > what is STW?
- 证券开户有风险吗?怎么开户安全呢?
- Introduction to Quaternion
猜你喜欢

The shutter library recommends sizer to help you easily create a responsive UI

Design a MySQL table for message queue to store message data

基于51单片机的酒精检测仪

The annual salary of 500000 is one line, and the annual salary of 1million is another line

Colab tutorial (super detailed version) and colab pro/colab pro+ usage evaluation

OpenCV源代码编译

【Web技术】1348- 聊聊水印实现的几种方式

The programmer dedicated to promoting VIM has left. Father of vim: I will dedicate version 9.0 to him

iShot

度量学习(Metric Learning)【AMSoftmax、Arcface】
随机推荐
iShot
42岁大厂高管,给30岁-39岁人提个醒:这6个让你变强的习惯,要尽快养成
[Part 8] semaphore source code analysis and application details [key points]
【建议收藏】通俗易懂图解网络知识-第一篇
细数攻防演练中十大关键防守点
同花顺股票账户开户安全吗
人脸检测:MTCNN
Database daily question --- day 10: combine two tables
ShardingSphere-proxy-5.0.0部署之分表实现(一)
Avoid using asp Net core 3.0 to inject services for startup classes
ImageView grayed, reflected, rounded, watermarked
C # reading table data in word
【LeetCode】69. Square root of X
認識的幾比特清華同學都離職了……
3.5 setup and teardown of test classes
【LeetCode】5. Longest Palindromic Substring
[leetcode] the k-largest element in the array
在同花顺开户安全么 ,证券开户怎么开户流程
lua 日期时间
Research Report on market supply and demand and strategy of China's digital camera lens industry