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

This article mainly introduces "how to expand Page page objects in Mini Program development" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, I hope that this "how to expand Page page objects in Mini Program development" article can help you solve the problem.

Mini Program registers a page by calling the Page function:

/ / index.jsPage ({data: {text: "This is page data."}, onLoad: function (options) {/ / Do some initialize when page load. }, / / Event handler. ViewTap: function () {this.setData ({text: 'Set some data for updating view.'}, function () {/ / this is setData callback})) copy the code

Here, Page acts as a constructor. Page initializes the page object (instance), and then merge the properties in the configuration parameters to the page object.

Suppose you encapsulate a http module that is responsible for making requests. If you want to reference this module directly through this.http in the page object, you need to extend the page object. To extend an object, a common practice in JavaScript is to extend the prototype property of the constructor, which is an implementation of many plug-ins in Vue:

Import axios from 'axios'Vue.prototype.axios = axios// this.axios.get (api). Then (callback) copy the code in the vue component

Unfortunately, this method doesn't work in Mini Program. Page is not an ordinary constructor, and many other things are done at the bottom, and there is no way to extend page objects directly through Page.prototype.

We can change our thinking and expand the configuration objects passed into Page. Since you always have to call the Page registration page, you can define a function that processes the received configuration object parameters before passing them to Page.

/ / wxPage.jsimport http from'.. / utils/http'const wxPage = function (config) {config.http = http return Page (config)} export default wxPage copy code

Use this wxPage when registering the page:

Import Page from'. / wxPage'Page ({data: {text: "This is page data."}, onLoad: function (options) {console.log (this.http) / / print the http module variable this.http.get (api). Then (callback) / / directly call the http method},}) copy the code to modify the Page function directly

In order to enhance the page object, it is not easy to introduce wxPage for every page that is needed. More often, we are maintaining an old project and need to extend each existing page object, so we can modify the Page directly:

Const originalPage = Page / / Save the original PagePage = function (config) {/ / overwrite the Page variable config.http = http return originalPage (config)} copy the code

Generally speaking, the time to modify Page is at the time of App onLoad. In this way, the original page can get http directly through this.http without modification.

By extending the Page page object to achieve common requirements 1. Add general logic to the lifecycle approach

Sometimes we want to execute some general logic during the onLoad phase of page registration, such as embedding, typing log, etc., and then we can overwrite the onLoad method in the configuration object:

Const originalPage = PagePage = function (config) {const {onLoad} = config config.onLoad = function (onLoadOptions) {/ / hit log, bury the point. Console.log ('this log' will be typed on every page) if (typeof onLoad =' function') {onLoad.call (this, onLoadOptions)}} return originalPage (config)} copy code 2. Get the previous page object

The page jump in Mini Program forms a page stack, and each page object is stored in the stack, which can be obtained by the getCurrentPages method. You can get the page stack when the page onLoad, and then take out the penultimate object, which is the page object of the previous page on the current page:

/ / put it on. Const {onLoad} = config config.onLoad = function (onLoadOptions) {const pages = getCurrentPages () this.__previousPage = pages [pages.length-2] / / assign the page object on the previous page to this.__previousPage if (typeof onLoad = = 'function') {onLoad.call (this, onLoadOptions)} return originalPage (config) copy code

In this way, the data and all the methods of the previous page object can be obtained by referencing this.__previousPage in the page object, so that in some scenarios where only two pages interact, the current page directly calls the method of the previous page object (equivalent to a callback) and then returns, which is more convenient than managing the data of the previous page through the global status.

3. Jump to the page and pass the data to the next page

Don't say much about this, just look at the code:

/ / connect config.navigateTo = function (url, params) {/ / to implement a navigateTo method Parameters include jump url and the parameter to be passed this.__params = params wx.navigateTo ({url})} config.onLoad = function (onLoadOptions) {const pages = getCurrentPages () this.__previousPage = pages [pages.length-2] / / assign the page object of the previous page to this.__previousPage if (this.__previousPage) {onLoadOptions.params = this.__previousPage.__params / / get the _ _ of the previous page Options delete this.__previousPage.__params} if (typeof onLoad = = 'function') {onLoad.call (this) assigned by params to the onLoad function OnLoadOptions)} / A Page Jump B Page this.navigateTo ('urlToB', {foo:' bar'}) / / onLoadPage of page B ({onLoad (options) {console.log (options.params) / / {foo: 'bar'}) copy code about "how to extend Page page objects in Mini Program development" ends here Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.