Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize Alipay Mini Program from manual burying to automatic burying?

2025-02-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly explains how Alipay Mini Program is realized from manual burial to automatic burial. Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Alipay Mini Program from manual burial to automatic burial how to achieve" it!

Manual burying point

Now the Mini Program burial site needs to be manually added to trigger the event.

/ / axml this is just a display of view//js track (e) {... Business code / / embedding point code app.sentEventCustom ("click", this, this.query, e.target.dataset.ilog);}

There will be the following questions:

The business code and the buried code are written together, affecting the reading experience of the code.

The buried code is scattered everywhere, so it is not convenient to manage. For example, when the operation wants to add and delete burial sites, unified management will be more convenient.

Scenes that need to be buried.

1. Ordinary click event

/ / axml this is just a display of view//js track (e) {/ / embedding code report ()}

When the drop-down refresh occurs, the click is not triggered. You can choose to bury the event.

/ * * @ description: drop-down refresh * @ param {*} * @ return {*} * / onPullDownRefresh () {/ / embedding code report ()}

Pay attention to the promise event.

/ / js async onAuthPhone () {await app.getUserPhone () / / embedding point code report ()}

Summary: we need to trigger the burial point when the page element is clicked, and also to be able to trigger the burying point after the event is executed.

Automatic burying point 1. Listen for whether the element is clicked through event bubbling

Solution 1: bind the catchTap event to the outermost layer of the axml to obtain the ilog information of the clicked element

Disadvantages: the target element captured is the innermost layer, which does not necessarily add ilog

Scheme 2: add the style class' .ilog'to the elements that need to send the burying point, and when clicking, the outermost catchTap obtains the XMagi Y axis value of the clicked position, and at the same time obtains the location of the '.ilog' element through queryselectAll to determine whether the clicked position is within the '.ilog'. If so, send the buried point information. As shown below:

2. Extended Page method

Since the outermost binding catchTap event method needs to be defined in Page for wxml to call, if each page is written manually, it can be automatically extended by rewriting Page. The code is as follows

/ / record the original Page method const originPage = Page;// rewrite Page method Page = (page) = > {/ / inject three methods into the page object page.elementTracker = function () {} page.methodTracker = function () {} page.isClickTrackArea = function () {} return originPage (page); 3. Bury the page function.

In some scenarios, we not only click on the page elements, but also bury the page function. For example, when the user drops down and refreshes, we can wrap the original method and insert the embedding code, which is similar to the second point.

Const originPage = Page;// rewrite Page method Page = (page) = > {/ / insert burial point into onShow method const originMethod = page ['onShow']; page [' onShow'] = function () {report () / / record burial point return originMethod ();} return originPage (page);}; 4. Set burial point through configuration table

The above describes how to bury the page elements and functions. Let's talk about how to manage the buried point information to solve the code intrusion problem. The buried point information can be declared in the form of a configuration table, and can be dynamically configured later. Send it to the client after the server has been configured.

Const tracks = {path: 'pages/film/detail', elementTracks: [{element:' .buy-now', / / declare the element dataKeys: ['film.filmId'], / / declare that the filmId field under the film object under Data needs to be obtained},], methodTracks: [{method:' toBannerDetail' / / declare the function dataKeys to be listened to: ['imgUrls'], / / declare that the imgUrls data under Data needs to be obtained},],} At this point, I believe that everyone on the "Mini Program from manual burial to automatic burial of how to achieve" have a deeper understanding, might as well to actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report