This is the seventh day of my participation in the August More text Challenge. For details, see more text Challenge

Data related to

Modify the data

The Page constructor, which receives an object with a property called data, which is where the data in the Page is stored.

We want to modify the data on the page after it has been running for some time. Because it’s data-driven, we modify the data.

How to modify: Call this.setdata within one of the object’s methods to modify the data

this.setData(obj);

Obj. key: the hierarchical path to be modified

Obj. value: value corresponding to the hierarchy path

This allows you to change what is displayed on the page at the same time as you change the data

demo:

Original page:

<view>
<text>{{title}}</text>
</view>
<view>
<text>{{people.name}}</text>
</view>
Copy the code

Raw data:

data: {
title: "It's a beautiful day.".people: {
        name: "Wang Lao Wu"}},Copy the code

Render the page:

Data loss

Never say this.data.xxx = XXX;

This is because only the data is being changed, but there is no mechanism to trigger changes to the content of the page. The page is inconsistent with the data.

The event

In wechat small program, the event is divided into two types, one is bubbler event, with bind-* to add the other is not bubbler event, with catch-* to add

The bubbling event

A tap event is added to a component whose ID is Child. The event function name is Child. Requirement must be in the corresponding JS file, add the child event function

wxml:

<view id="father"> Parent <view id="child" bindtap='child'> </view> </view>Copy the code

js:

Page({
/*** page initial data */
data: {},/*** life cycle function -- listen for page loading */
 onLoad: function (options) {},child: function() {
console.log("Events of child elements")}})Copy the code

Click trigger:

Now let’s bind an event of the same type to the parent component.

No bubble event

Change the binding mode from bind- to catch-

Custom properties

Add custom properties to components with data-*. How do you get these custom properties?

Answer: Through the event fetching there is an event object in the event function from which the corresponding custom properties can be obtained.

The demo:

How do I get it? A: through the e.c. with our fabrication: urrentTarget. Dataset. Xx

The event object

To view:

ChangedTouches: Each member of the finger placement collection represents a finger

Member: Finger information

ClientX: finger at position X in the viewport

ClientY: Finger y in the viewport

PageX: the x position of the finger on the page

PageY: The y position of the finger on the page

CurrentTarget: The component object to which the event is bound has various properties

Id: indicates the ID of a component

OffsetLeft: Left position from the parent component

OffsetTop: The top position of the distance component

Dataset: A custom dataset object for a component

Detail: Finger position

Target: The component that triggers the event has the same structure as currentTarget

TimeStamp: A value in milliseconds that indicates how long it has been since the page started loading and the event was triggered

Touches: Same structure as changedTouches

Type: Indicates the type of the event

routing

Wechat small program in the route, refers to the jump between the pages

Page classification

All the pages of wechat appletops are configured in the Pages array in app.json.

However, another part is configured in the list of tabbars.

TabBar pages: Pages in pages that are also in the list of Tabbars are called tabBar pages.

Normal pages: Pages that are in pages but not in the tabBar are called normal pages.

Jump mode classification

  • The first way is to jump through components

Component name: Navigator

Properties:

Url: Indicates the destination page address

Open-type: The value depends on the type of the target page

If the target page is a tabBar page, set it to switchTab

If the target page is a normal page, set it to navigateTo

  • Jump through code

Jump way

Skip to the tabBar page by component
<navigator url="/pages/second/second" open-type="switchTab"> Go to the second page </navigator>Copy the code
Skip to a common page through a component
<navigator url="/pages/third/third" open-type="navigateTo"> Go to the third page </navigator>Copy the code
Jump to the tabBar page with code
wx.switchTab({
    url: '/pages/second/second'
})
Copy the code
Jump to the normal page through the code
wx.navigateTo({
   url: '/pages/third/third'
})
Copy the code
supplement

The above is the normal jump way, all open the target page, hide the current page. There are also ways to manipulate the current page.

Redirection mode

Components:

Redirects to three pages

Wx.redirectto ({url: “/pages/third/third”})

Back way:

Page history

The history of wechat small program is a stack structure.

Stack: first in first out, last in first out

Queue: first in first out, last in last out

In Case 1, the tabBar page is displayed

Current page: hidden

Target page: load, display, render

Case 2 navigateTo go to a common page

Current page: hidden

Target page: load, display, render

Case 3 redirectTo to normal page

Current page: Uninstall

Target page: load, display, render

Situation 4 navigateBack

Current page: Uninstall

Target page: Display