Applets note

Page constructor

Page constructs pages that do not have methods attributes and are written directly in the constructor, while data is written in the data attribute.
```
Page ({data: {age: 123}, todo () {}, obj: {name: "111"}}) / / using obj enclosing obj = = 'XXX'Copy the code
```
The method and data of the page are mounted to the this of the current page. You can define some other data, but do not update the page
```
Page ({data: {age: 123}, obj: {name: "111"}}) / / using obj enclosing obj = = 'XXX'Copy the code
```
Using data or methods in WXML does not require this fetch
```
<view >{{age:123}}</view>
Copy the code
```
About the parameters received on the lifecycle, which will be mounted to this after the lifecycle function completes execution,
```
Onload (options){} // Use this.optionsCopy the code
```
1

Component constructor

Certified components

You need to configure the json file in the corresponding component directory with the property “Component “: true,

Create components

Use the Component constructor to create a custom component

Component({
	data:{},
	methods:{}
})
Copy the code

The page uses custom components

After modifying the properties in the JSON configuration file of the page, you can use qG-List as a custom component in the WXML file

"usingComponents": { "qg-list": ".. /.. /components/List/index" }Copy the code

Component attributes

Properties, equivalent to vue props, can specify data types and set default values, and can be passed using either fixed or reactive data, which is incorporated into data
```
Properties: {visible: {type: Boolean, value: true}}, =========js uses this.data.visibleCopy the code
```

Data, the internal maintenance status of the current component

Component({
	data:{
      name:1
		}
})
///
this.data.name
Copy the code

Methods Defines the internal methods of the component. It is recommended to start with an underscore to indicate the internal methods of the component
```
Component({
	methods:{
      xx(){
      }
		}
})
///
this.xxx()
Copy the code
```
Attached: Life cycle hooks for component loading, written to the root node as <2.2.3, later versions require lifeTimes
PageLifetimes: The life cycle of the page being loaded
Observers: The equivalent of vue’s watch operation, observers for changes in some data
WXML files use data or method, not this, or this.data if data
Component constructors do not support directly defining variables or methods in the outermost layer, which would be passed to undefined

Event communication between components and pages

Bind events to components

<qg-list pageTitle="111" bindmyevent="onMyEvent"></qg-list>
Copy the code

A component triggers a subscription to a page by any action
```
This.triggerevent ('myevent', 'click event')Copy the code
```
The page must have the corresponding processing event onMyEvent
```
Page({
		methods:{
			
		}
)
Copy the code
```
end

Component load timeline

We start with created and we can’t call setData
Pass props If the listening props is changed at this time, touch method observe
Lifetimes, Attached functions (components into the page tree) trigger
The parent page show,
The component then enters the ready state

behavior

Similar to vUE mixins, reusable code blocks can be removed. In Component components, mixins can be introduced in the form of behavior, which is actually equivalent to code replication. Behavior does not have its own life cycle, but is just a simple code, and there will be conflicts with components when introduced Then there is a set of merging rules built into the applet

template

It doesn’t have its own state, it just pulls the view away

To create the template template, use the