Wechat applet rewrites the page function to realize global logging

summary

In the last article 《 The implementation of wechat applet is similar to Vue Global routing for , Implement logging 》 in , By rewriting wx.navigateTo,wx.switchTab,wx.navigateBack These three methods implement functions similar to global routing , However, there are still some limitations after rewriting these three methods , Unable to intercept bottom tab Click event of and return event of physical return key of Android phone .

If you don't need to intercept before jumping , So there is a better solution , rewrite Page function .

Solution

newly build myPage.js file , The code is as follows ：

let data
//  here data from app.js In the middle of , In order to obtain data Some parameters of 
function init(_data) {
  data = _data
  //  rewrite page function , Add Alibaba cloud monitoring and logging 
  let oldPage = Page
  Page = function(obj) {
    //  rewrite onShow Method , Save the old with a variable onShow function 
    let oldOnShow = obj.onShow
    obj.onShow = function() {
      enterPageLog()
      //  It can't be written here oldOnShow(), Otherwise no this,this.setData And so on undefined. there this stay Page Only when the constructor is instantiated will it be specified 
      //  stay Page When the constructor is instantiated , The applet will change the current Page Prototype chain of objects （__proto__） Add many methods , for example setData. Current obj No, setData
      //  The above paragraph is my guess 
      oldOnShow.call(this)
    }
    //  rewrite onHide Method , Save the old with a variable onHide function 
    let oldOnHide = obj.onHide
    obj.onHide = function() {
      leavePageLog()
      //  It can't be written here oldOnHide(), Otherwise no this,this.setData And so on undefined. there this stay Page Only when the object is instantiated will it be specified 
      oldOnHide.call(this)
    }
    return oldPage(Monitor.hookPage(obj))
  }
}

Enclose this string of code in a js In file , And then in app.js Introduction in , stay app.js Of onLaunch Method init Method .

import myPage from '/utils/myPage'
App({
  data: {},
  onLaunch: function() {
    //  rewrite page function 
    myPage.init(this.data)
  },
  ...
})

In the above code ,

enterPageLog() and leavePageLog() To keep a log , In this way, public logging is realized , There is no need to write duplicate logging code on each page .

Monitor.hookPage(obj) It is Alibaba cloud's front-end monitoring , The official plan is in every Page The parameter transfer object of the function contains a layer , as follows ：

Page(Monitor.hookPage(options));

rewrite Page after , It is not necessary to be in every Page Add this string to all objects .

Key code interpretation

let oldOnShow = obj.onShow
obj.onShow = function() {
  enterPageLog()
  oldOnShow.call(this)
}

rewrite onShow function , Finish the customization , Call old onShow Function time , Can not write oldOnShow(). If written as oldOnShow(), An error will be reported at run time ,this.setData、this.createSelectorQuery And so on undefined.

The reason is that app Of onLaunch In the method , Pass in Page The object of the function has not yet setData Other methods , That's the code above onShow Medium this, That is to say obj. stay Page When the constructor is instantiated , The applet will change the current Page The prototype chain of functions （prototype） Add many methods , for example setData. You can view this one 《 From the source code, wechat applet startup process 》 Understand the process of applet starting and loading each object .

Use here oldOnShow.call(this)  To delay the assignment this, This this Only in Page It is only specified when instantiating , That is to say Page Many methods are added after instantiation this. This avoids the present Page No, setData、createSelectorQuery And so on .call The principle and usage of can be found in this article 《 In depth understanding of JavaScript Medium Call、Apply、This》.

Conclusion

This is just a simple logging function , By rewriting Page, Other public functions can also be realized , Including adding public functions 、 Parameters 、 event , Authority judgment, etc .

JS Language features can override many native or systematic methods , Reasonable rewriting can achieve many common functions , Reduce development .