Content analysis of WeChat applet Page constructor and life cycle function (with code)

The content of this article is about the content analysis of the WeChat applet Page constructor and life cycle function (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

1. Bind public methods to Page

Single binding

const oldPage = Page
Page = function(app) {
  // 注意公共函数的名字不要重复，否则覆盖
  app.util = function() {}
  
  return oldPage(app)
}

Multiple binding, file binding

const util = require('./util.js');  // 需要绑定的函数由util文件exports出来
const oldPage = Page
Page = function(app) {
  let newPage = Object.assign({}, util, app)
  
  return oldPage(newPage)
}

2. Extension and modify the life cycle function

const oldPage = Page
Page = function(app) {
  app.onLoad = function(options) { // 这里必须使用function, 不可以使用箭头函数， 否则this指向错误
      console.log("扩展onLoad");
  
      // onLoad函数在是当前page实例上下文中执行，所以当前的this为当前page实例
      // 如果不使用call来硬绑定，而是直接app.onLoad()，那么onLoad里的this将为app这个对象
      // 即我们正常在page.js里Page(app) 括号里面我们自己写的page对象
      if(typeof app.onLoad === 'function') {
          app.onLoad.call(this, options); 
      }
  }
  
  return oldPage(app)
}

ps. If you want to know more about js’s knowledge about this in a more systematic way, you can click here

3. Use

When I write it myself, I encapsulate the customized content into a js file, and then reference this file in app.js

require('./init.js'); //引用即可
App({
  onLaunch: function (options) {
  }

})

Related recommendations:

Life cycle and parameter transfer of WeChat applet

WeChat applet Page() function detailed explanation

Detailed explanation of the life cycle of the page in WeChat Mini Program Development Series (4)

The above is the detailed content of Content analysis of WeChat applet Page constructor and life cycle function (with code). For more information, please follow other related articles on the PHP Chinese website!