Wechat applet 5 - foundation strengthening (not finished)

( One ) Custom components

1. Components

1.1 Create components

• Right click in the root directory of the project , establish components->test Folder
• In the new components->test folder , Right mouse button , Click on " newly build components"
• Type the name of the component and press enter , Four files corresponding to the component will be automatically generated , The suffixes are .js.json.wxml and .wxss

1.2 Refer to the component

The reference methods of components are divided into " Partial quote " and " Global references "

• Partial quote ： Components can only be used in the currently referenced page .
• Global references ： Components can be used in every applet page

1.2.1  Local reference component

On page .json How components are referenced in the configuration file , be called " Partial quote "

On page .json In file , Introduce in the form of key value pairs , The key is the name after the component reference , Value is the storage path of the component

1.2.2  Global reference component

stay app.json How components are referenced in the global configuration file , be called " Global references "

1.2.3 Global references VS Partial quote

According to the frequency and range of components , Choose the right way to quote

1.2.4  Differences between components and pages

On the surface , Components and pages are made up of .js .json .wxml and .wxss These four documents make up , however , Components and pages .js And .json The files are obviously different ：

• Component's .json Declaration required in document "component"：true attribute
• Component's .json What is called in the file is Component() function
• The event handler function of the component needs to be defined to methods node in

2. Custom components - style

2.1 Component style isolation

By default , The style of a custom component is only valid for the current component , Will not affect... Outside the component ui structure

2.2 Notes on component style isolation

• app.wxss The global style in is not valid for the component
• Only class The selector will have the effect of style isolation ,id Selectors , Attribute selector , Label selectors are not affected by style isolation

Suggest ： It is recommended to use... In components and pages referencing components class Selectors , Do not use id, attribute , tag chooser

2.3 Modify component style isolation options

By default , The style isolation feature of custom components can prevent the interference between internal and external styles of components , But sometimes , External connection is required to control the style inside the component , here , Can pass styleIsolation Modify style isolation options for components , Two ways ：

1:  2:

2.4 styleIsolation Optional values for

3. Custom components - data 、 Methods and properties

3.1 data data

In applet components . Private data for component template rendering , Need to define to data In nodes

3.2 methods Method

In applet components , Event handler and Custom method Need to define to methods node in  

Be careful ： Custom methods are based on _ start , Used to distinguish between methods and event handlers

3.3 properties attribute ： Declare attribute nodes

In applet components ,properties Is the external attribute of the component , It is used to receive the data transferred from the outside to the component

  In custom attributes , You can declare some available attribute nodes by declaration

There are two ways to declare ： One is to declare attributes completely , The other is to simplify the way of declaring attributes ,

Simplified method ： The type of the value corresponding to the attribute name max:Number , min:String , mid : Boolean; Cannot specify default

Complete way ： Point to configuration object ,type The data type used to specify the attribute value of the custom instruction ,value Specify the default value of the attribute value , Subsequently specify the value of the attribute , The specified value overrides the default value .

4. Custom components - Data listener

4.1 What is a data listener

The data listener is used for Listen and respond to any attribute changes , To perform specific operations . His function is similar to vue Medium watch The listener . In applet components , The basic syntax format of the data listener is as follows ：

  Make a statement observes Configuration object , You can listen for changes in fields , When listening for changes in multiple fields , Use commas between different fields , You can arbitrarily monitor the changes of multiple fields in a listener

4.2 Basic usage of data listener

Component's UI structure ：

  Component's .js File code ：

  stay js Document Zhonghua , Statement n1,n2 as well as sum Data nodes , Definition n1,n2 Click event function of two buttons ,sum The value of and needs to be monitored n1,n2 Changes to automatically evaluate , You can listen inside the monitor at the same time n1 and n2

( Two ) Use npm package

( 3、 ... and ) Global data sharing

( Four ) to subcontract