demand

Recently received a demand, the hope can be on my side the background configuration WeChat applet navigation bar color, but the small program does not support global changes the color of the navigation bar, only support to modify a single page navigation bar color, so I think I can in all the page’s onload function of manually on the color of the navigation bar, But then you have to change every page, which is inefficient. I checked the documents of wechat applet and did not provide the method of global mixing onload, so I wondered if I could realize the mixing function of applet.

The problem

In vue we can use mixins to mixin the global configuration and facilitate our business development. However, wechat applet does not provide similar mixin function, which increases our task amount in some global modification business scenarios. Here is a global mixin scheme that can be used in applets.

The principle of

The principle is also very simple, by modifying the Page function to achieve global mixins. Because the Page constructor is used to create the Page in the wechat applet, as follows:

Page({ data: { text: "This is page data." }, onLoad: function(options) { // Do some initialize when page load. }, onShow: Function () {// Do something when page show.}, onReady: function() {// Do something when page show.} . })Copy the code

So we can change the Page to our own custom object and mixin our global configuration in different hook functions through the following mixin method. For example, we want to execute console.log(‘ applet global mixin’) in the onload event for all pages. Here’s the reference code

The directory structure

Page. Js file

const page = Page; import app from '.. /.. /app.js'; module.exports = (options = {}) => { const { onLoad, onShow, onReady, data } = options; Const mountOptions = {data: {... data }, onLoad(... Res) {// Add the code console.log(' applet global mixin') for the pre-onload mixin here; const opts = res[0]; const $opts = {}; this.$opts = $opts; if (onLoad) { onLoad.apply(this, res); }, onShow() {// onShow before if (onShow) {onshow.apply (this); } // onShow after }, onReady() { if (onReady) { onReady.apply(this); }}}; return page(Object.assign({}, options, mountOptions)); // Call the native Page constructor};Copy the code

Write a unified global configuration mount function

Index. Js file

const page = require('./page.js'); module.exports = { mount() { Page = page; }};Copy the code

Execute the mount function, noting that it must be called before App()

app.js

// require('./mixins/global/index.js').mount(); {// omit some code}}Copy the code

The results of

In the same way, we can also add the function of Component global Mixin, which is also to rewrite the Component function. Here is only one idea, so far there is no such business scenario in the project

conclusion

App, Page and Component in wechat applets are all global objects, just like window objects in the browser environment. We can expand them to meet the development needs of business, but we should be careful to think clearly before changing them, otherwise it will leave hidden dangers for future development