Remember to solve a small program live plug-in page routing problem

background

Routing buried point scheme

OnAppRoute for route switching track, wx.onAppShow and wx.onAppHide for opening/closing/returning pages for the first time.

When used in business, it is found that there is a gap of several times between the data of the plug-in page and the official data of wechat:

platform PV UV
WeChat 774 115
Their own 214 45

To solve

Experimental problem finding

According to the experiment, it is concluded that there are problems in plug-in page burying point:

  1. Directly open the live broadcast plug-in page
    1. Failed to report routing events. Procedure
    2. Subsequent routing events cannot be reported
  2. Other pages Enter the live broadcast plug-in page (normal)
  3. Open other non-plug-in pages directly (normal)

Doubt/explanation (because knowledge of the existence of a problem is gradual, not all problems are known at once, so are doubts raised)

  1. Due to the live broadcast and network conditions, some data cannot be reported (some data based on the live broadcast page should be blamed 🐶)
  2. Open the page directly this situation has its own buried point cannot support
  3. Plug-in pages are different from normal pages

Propose solutions:

  1. Solve the problems existing in its own buried points (unknown cost upper solution)

  2. Use third party burying points: Friendly Alliance, Aladdin… See if they can support plug-in page routing event reporting (low cost buried data in third party)

  3. Live broadcast plug-in provides components, according to these components to achieve their own live page (high development cost)

1 and 2 can be done at the same time, 3 is really an option

Access to the third party buried point, after the test to see the data, direct good guy, do not support plug-in page routing events report

Solve the problems existing in their own burial points:

  1. The routing event fails to be reported when the live broadcast plug-in page is directly opened

    Wrap App function

    // App
const originalApp = App

App = function(this: any, obj: Object) {
  xProxy(obj, 'onLaunch', captureOnLoad)
  return originalApp.apply(this.arguments)}Copy the code

  2. Route events after the live broadcast plug-in page is opened cannot be reported

    1. Real machine test to find the cause -> see if there is an error message

    2. Read the documentation and guess what is the limit of the plug-in’s API call

    3. Test the plugin page registered wx. OnAppRoute/wx. OnAppRouteDone wx. OnAppShow and wx. Although onAppHide didn’t complain, but subsequent won’t trigger

      Solution: Wrap the Page (without affecting the plug-in Page) and re-initialize the route report when the startup Page is the plug-in Page

      let needReInit = false

function captureOnLoad(args: any) {
  if (args.path && isPluginPage(args.path)) {
    needReInit = true
    // The route needs to be reported by itself}}function xProxy(target: any, method: string, customMethod: Function) {
  const originMethod = target[method]
  // eslint-disable-next-line no-constant-condition
  if (originMethod || 1) {
    target[method] = function() {
      originMethod && originMethod.apply(this.arguments)
      customMethod.apply(this.arguments)}}}function onPageLoad(this: any) {
  if (needReInit) {
		// reinitialize the event listener
    X.retrack()
    needReInit = false
    // The route needs to be reported by itself}}// App
const originalApp = App

App = function(this: any, obj: Object) {
  xProxy(obj, 'onLaunch', captureOnLoad)
  return originalApp.apply(this.arguments)}// Page
const originalPage = Page

Page = function(this: any, obj: Object) {
  xProxy(obj, 'onLoad', onPageLoad)
  return originalPage.apply(this.arguments)}Copy the code

The test release

npm run test && npm run deploy
error ...
Copy the code

  • Stability of live broadcast and stable regression of other core processes

  • Directly open the live plug-in page to report routing events

  • The route event reporting function is displayed on the live broadcast plug-in page

rollover

The subsequent routing events were not reported. Obviously, the demo in the buried site project was fine, but the car was turned over in the business project.

Compare the differences between the demo and the business project, only the Taro version of the problem, demo is Taro 3, the business project is Taro 2.

Check Taro 2.x’s code for pages/components and discover that all Taro 2.x components and pages are wrapped in Component

component.js#L46

create-component.js#L396

I’m fucking straight up, man!

Ok, wrap Component again:

function onComponentPageShow(this: any) {
  // Determine if it is a page
  if (needReInit && this.$component.$componentType === 'PAGE') {
  	// reinitialize the page burying point
    X.retrack()
    needReInit = false
    // The route needs to be reported by itself}}// Component
const originalComponent = Component

Component = function(this: any, obj: any) {
  obj.pageLifetimes = obj.pageLifetimes || {}
  xProxy(obj.pageLifetimes, 'show', onComponentPageShow)
  return originalComponent.apply(this.arguments)}Copy the code

This time it will work!

Verification of real data:

platform PV UV
WeChat 579 112
Their own 431 113

PV gap causes and correction ideas:

Cause: The buried routing point is not reported when the live broadcast page is opened repeatedly (after opening, cut the background and come back)

Wx. onAppShow and wx.onAppHide switch to App onShow and onHide

Conclusion:

  1. The plug-in page is different from the normal page:
    1. Limitations of plug-in call API launch page is plug-in page need to consider re-registration
    2. Plug-in pagePageWith the globalPageIs isolated, third party based packagingPageIt is impossible to get the routing burials of plug-ins (must be usedwx.onAppRoute)
  2. The Taro 2 page is usedComponentImplementation of the