Shulou(Shulou.com)06/01 Report--

Editor to share with you the example analysis of web mobile development knowledge points, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Call the function in the life cycle

Common lifecycle functions are onLaunch, onLoad, onReady, onShow, onHide, onUnload

OnLaunch: onLaunch will be triggered when Mini Program initialization is completed (only once globally)

OnLoad: triggered when a page is loaded, and a page will only be called once. You can get the parameters in the path of opening the current page through the parameter options.

OnReady: called when the page is rendered for the first time. A page is called only once, indicating that the page is ready and can interact with the view layer.

OnShow: triggered when the current page is displayed. For example, cut into the front desk from the background.

OnHide: triggered when the page is hidden. For example, cut into the front desk from the background.

OnUnload: triggered when the page is unloaded. For example, using wx.redirectTo () or wx.navigateBack () in API to jump to another page trigger.

2. Component event handler function

Component event handlers are used to bind events for components. There are usually two types of "bind event types" and "catch event types" for component binding events.

Bind mode does not prevent bubbling events from bubbling up, while catch can prevent bubbling events from bubbling upward.

2.1.The difference between e.target and e.currentTarget

Outer

Inner

Viewtap:function (e) {

Console.log (e.target.id + "-" + e.currentTarget.id)

}

Clicking outer outputs outer-outer, clicking inner outputs inner-outer, and the parent element is bound to the viewtap event, and the child element is not bound to the viewtap event, so

E.target points to the element that triggers the event

E.currentTarget points to the element that adds a listening event

3. Configuration of tabBar label bar

TabBar is used to implement the label bar at the bottom of the page. The main attributes are as follows, where list is an array, and each element in the array is a label button object. When you set the corresponding properties, you can jump to the corresponding tab. Among them, list has at least two elements and no more than five.

Attribute description

Bottom navigation bar color when color is not selected

When selectedColor is selected, the bottom navigation bar color

BorderStyle bottom navigation border color

BackgroundColor bottom navigation background color

List navigation configuration array

PagePath page access address

Picture path when iconPath is not selected

Picture path when selectedIconPath is selected

Text below the text navigation icon

The sample code for the label bar is as follows:

"tabBar": {

"color": "# FF000000"

"selectedColor": "# ff4c91"

"borderStyle": "white"

"backgroundColor": "# ffffff"

"list": [

{

"pagePath": "pages/index/index"

"iconPath": "images/invite.png"

"selectedIconPath": "images/invite.png"

"text": "invitation letter"

}

{

"pagePath": "pages/picture/picture"

"iconPath": "images/marry.png"

"selectedIconPath": "images/marry.png"

"text": "photo"

}

{

"pagePath": "pages/video/video"

"iconPath": "images/video.png"

"selectedIconPath": "images/video.png"

"text": "good times"

}

{

"pagePath": "pages/map/map"

"iconPath": "images/map.png"

"selectedIconPath": "images/map.png"

"text": "Wedding place"

}

{

"pagePath": "pages/guest/guest"

"iconPath": "images/guest.png"

"selectedIconPath": "images/guest.png"

"text": "Guest Information"

}

]

}

4. Conditional rendering

Wx:if, wx:elif, wx:else, which can be used to control the display and hiding of tags.

Code example

Comparison result: the first number is large

Comparison result: the second number is large

Comparison result: two numbers are equal

Note: what's the difference between using wx:if and setting the hidden property of a component to hide and show elements?

(1) wx:if is displayed by true, and hidden is displayed by false.

(2) wx:if does not render when it is hidden, while hidden still renders when it is hidden, but does not render.

(3) if you switch frequently, using wx:if will consume more resources, because he will render every time he presents it, and destroy it every time he hides it.

(4) if switching is not frequent, it is relatively better to use wx:if because it avoids rendering so much at first.

5. List rendering

On the component, use wx:for to bind a data, traverse the data, and you can render the component repeatedly using the elements in the array.

/ / the data part of index.js

Data: {

Gender: [

{name:' male', value:'0',checked:true}

{name:' female', value:'1',checked:false}

]

}

Gender:

{{item.name}}

In the rendering list, you can use item to represent the current item of the array and index to represent the subscript of the current item. Wx:key represents the unique identity of each item, and the value of value in this code is unique, or each item itself can be used as a unique identity with the reserved keyword * this identity.

In list rendering, setting wx:key can keep the original components in their own state instead of recreating them when the data is changed and re-rendered on the page, which improves the efficiency of list rendering.

6. The realization of the linkage effect of the broadcast map.

1. Swiper component

The swiper component is a slider view container, which is often used to implement broadcast pictures, and can switch tabs in the music player Mini Program.

Attributes:

Attribute type description

Whether indicator-dots Boolean displays the indication point of the page. The default is false.

Indicator-color Color indicates the color of the point

The color of the indicator point selected by indicator-active-color Color

Whether autoplay Boolean switches automatically. Default is false.

The index of the slider where current Number is currently located. The default is 0.

The item-id of the slider where the current-item-id String is currently located

Interval Number automatic switching interval (ms)

Duration Number sliding animation duration (ms)

The change event is triggered when the bindchange EventHandle current changes

Whether circular Boolean uses cohesive sliding. Default is false.

(1) realization of auto-playing carousel graph

(2) Click the tab in the upper column, locate the current current, and change the following rotation page (refer to the switching of the music player tab)

Main code snippet

Music recommendation

Player

playlist

Data and event binding part: the changeItem binding event function is used to give the value of the data-item attribute in the current view tag to item, and then use item as the attribute value of current, and you can click to convert the tab. The changeTab function is used to give the value of current to tab, and then use the trinomial expression (tab==0? 'active':') you can style the currently clicked label.

Page ({

Data: {

Item:0

Tab:0

}

ChangeItem:function (e) {

This.setData ({

Item:e.target.dataset.item

})

}

ChangeTab:function (e) {

This.setData ({

Tab:e.detail.current

})

}

})

7. Page jump mode

1 、 wx.switchTab

Wx.switchTab is used for page jumps, and can only jump to tabBar pages and close other tabBar pages

Common attribut

Attribute type description

The path of the tabBar page to which url string needs to jump (the page that needs to be defined in the tabBar field of app.json) cannot be followed by a parameter.

Callback function successfully called by API success function

Callback function that failed to be called by fail function API

The callback function at the end of the call to the complete function API (will be executed for both successes and failures)

2. Wx.navigateTo and wx.redirectTo

(1) wx.navigateTo is used to jump to a page within the application and keep the current page. After jumping to the page, click the upper-left corner to return to the previous page. It is important to note that wx.navigateTo can only jump to non-tabs. In addition, you can go back to the original page using wx.navigateTo.

(2) wx.redirectTo is used to jump to a page in the application and close the current page. It cannot return to the previous page, but can only jump to a non-tab page.

Property is the same as that of wx.switchTab, except that the url property value path of wx.navigateTo and wx.redirectTo can take parameters, such as url:detail?id=1

3 、 wx.reLaunch

Wx.reLaunch closes all pages and opens to a page within the application.

The above is all the contents of the article "sample Analysis of web Mobile Development knowledge points". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.