preface

The first technical tweet of 2021 comes from improvements discovered during codeReview yesterday.

The origin of

Requirements: every time you enter the home page, you need to judge the user’s identity, if the conditions are met, the window will pop up, if not, do nothing. Status: Encapsulated user identity components, with identity determination, popup display and other logic, the caller needs to get the component instance in onShow & call instance methods; Cons: the caller needs to fetch the component instance at onShow & call the instance method. Suppose I have 100 pages that need to import this component, then 100 pages need to write this?

Follow the “lazy” principle and look for solutions

Improvements: Component has pageLifetimes, the Component’s page lifecycle Api, which is perfect for callers to manually invoke.

Next, we will do a simple analysis around the life cycle of wechat small program.

1.1 Small program App life cycle

Let’s start with the last summary:The following will be combined with Demo to make a simple demonstration:

// app.js // register applets, accept an Object argument, specify applets life cycle callback, etc. App({// Applets initialization is complete, global only trigger once: function (options) { console.log('app >>> onLaunch, options:', options); }, // onShow: function(options){console.log('app >>> onShow, options:', options); }, // Function (){console.log('app >>> onHide'); }})Copy the code

When starting the small program, the following information can be printed in wechat Developer Tools -> console:

Summary: App(Object Object)

App(Object Object) Registration applet. Accepts an Object parameter that specifies the life cycle callback of the applet, etc. Life cycle application scenario: ①. OnLaunch “reset” operation: clear storage cache information… Initializing data: Obtain device information and store it in globalData or Storage… others… OnShow version update: UpdateManager management update, implementation of small program has a new version, the client actively trigger download, improve the experience; others…

1.2 Page life cycle
// Page js Page({// triggered when the Page loads. A page will only be called once. You can get the onLoad parameter from the path to the current page: function (options) { console.log('page >>> onLoad, options:', options); }, // triggered when the first rendering of the page is complete. A page is called only once, indicating that the page is ready to interact with the view layer. onReady: function () { console.log('page >>> onReady, options:'); }, // onShow: function () {console.log('page >>> onShow, options:'); }, // triggered when the page hides/cuts to the background. Such as Wx. NavigateTo or bottom TAB switch to other pages, small programs into the background, etc. onHide: function(){ console.log('page >>> onHide, options:'); }, // triggered when the page is uninstalled. As wx.redirectTo or wx.navigateBack to other pages. onUnload(){ console.log('page >>> onUnload, options:'); }})Copy the code

Look at the initialization entry, wechat Developer Tools -> console printed information as follows:

Summary: Page(Object Object)

Register a Page in the applet. Accepts an Object parameter that specifies the page’s initial data, lifecycle callbacks, event handlers, and so on. Life cycle application scenarios: 1. OnLoad: page parameters can be obtained using the options property. Initialize page data: can send requests; others… ②. OnShow: involves the page display must go logical decision: eg>>> the origin of the introduction of the beginning of the article, like this logic closely related to the user identity, the best real-time decision. OnHide: eg: The e-commerce product page is buried, the relevant parameter information needs to be reported when the page is displayed/hidden, so as to facilitate the analysis of user behavior. If you want to get the method or data for an instance of component A in Page, you can get the instance object ARef in the onReady callback to ensure that the instance is initialized & can be shared with multiple places

// Page wxml <v-tips id="v_tips"><vtips> // Page js onReady: Function () {this.vtips = this.selectComponent('#v_tips'); }, // use onTabItem: function(){this.vtips && this.vtips.xxx (); }Copy the code
1.3 Component life cycle

Scenario: Page contains login and register2 child components.

Start the small program, wechat developer tools -> console printed information as follows:Analyze the relationship between different life cycles based on graphs:

How is the life cycle triggered when you click on a page? See the picture below:

conclusion

Detached () triggers onUnload + detached() of the page component if it involves page destruction. Trigger the hide() of the onHide + component of the page if only the page is hidden;

The last

Personally based on the understanding of the life cycle, made a simple analysis, if there is wrong place, but also ask you to comment area more correct.