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