小程序全局mixin方法

發(fā)表時(shí)間：2021-1-4

發(fā)布人：葵宇科技

瀏覽次數(shù)：146

需求

最近接到一個(gè)需求，希望我這邊可以后臺(tái)配置微信小程序的導(dǎo)航欄顏色，但是目前小程序還不支持全局修改導(dǎo)航欄的顏色，只支持修改單個(gè)頁(yè)面的導(dǎo)航欄顏色，所以我就想著能不能在所有的頁(yè)面的onload函數(shù)中手動(dòng)設(shè)置一下導(dǎo)航欄的顏色，但是這樣一來(lái)就需要改每個(gè)頁(yè)面，效率太低。我查了微信小程序的文檔也沒(méi)有提供全局混入onload的方法，所以想著能否實(shí)現(xiàn)一下小程序的混入功能。

問(wèn)題

在vue當(dāng)中我們可以使用mixin來(lái)混入全局的配置，方便我們進(jìn)行業(yè)務(wù)開(kāi)發(fā)。但是微信小程序并未提供類似的mixin功能，使得在某些全局修改的業(yè)務(wù)場(chǎng)景下，增加了我們的任務(wù)量。下面介紹一種可以小程序中使用的全局mixin方案。

原理

原理也很簡(jiǎn)單，通過(guò)修改Page函數(shù)來(lái)實(shí)現(xiàn)全局的mixin。因?yàn)槲⑿判〕绦蛑袆?chuàng)建頁(yè)面是使用Page構(gòu)造函數(shù)來(lái)創(chuàng)建的,如下：

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 ready.
  }
  //省略部分代碼 ... ...
})
復(fù)制代碼

那么我們可以將Page改為我們自定義的對(duì)象，通過(guò)下面的混入的方式，實(shí)現(xiàn)在不同的鉤子函數(shù)中mixin我們的全局的配置。例如：我們想要在所有頁(yè)面的onload事件中執(zhí)行代碼console.log('小程序全局mixin')，以下為參考代碼

目錄結(jié)構(gòu)

page.js 文件

const page = Page;
import app from '../../app.js';

module.exports = (options = {}) => {
  const { onLoad, onShow, onReady, data } = options; // 解構(gòu)傳入的page數(shù)據(jù)
  const mountOptions = {
    data: {
      ...data
    },
    onLoad(...res) {
      // 在這里添加 onLoad 前mixin的代碼 
      console.log('小程序全局mixin');
      
      const opts = res[0];
      const $opts = {};
      this.$opts = $opts;
      if (onLoad) {
        onLoad.apply(this, res);
      }

      // 在這里添加 onLoad 后mixin的代碼 
    },
    onShow() {
      // onShow before
      if (onShow) {
        onShow.apply(this);
      }
      // onShow after
    },
    onReady() {
      if (onReady) {
        onReady.apply(this);
      }
    },
  };

  return page(Object.assign({}, options, mountOptions)); // 調(diào)用原生的Page構(gòu)造函數(shù)
};

復(fù)制代碼

編寫統(tǒng)一的全局配置掛載函數(shù)

index.js 文件

const page = require('./page.js');

module.exports = {
  mount() {
    Page = page;
  },
};

復(fù)制代碼

執(zhí)行掛載函數(shù)，注意必須要在App()之前調(diào)用

app.js

//省略部分代碼

require('./mixins/global/index.js').mount(); // 就是上面的index.js文件位置

App({

    //省略部分代碼

}）

復(fù)制代碼

結(jié)果

同樣的道理我們還可以添加組件全局Mixin的功能，同樣也是要改寫Component函數(shù)，這里只給一個(gè)思路，目前項(xiàng)目中還沒(méi)有這樣的業(yè)務(wù)場(chǎng)景

總結(jié)

微信小程序中App、Page和Component都是全局的對(duì)象，就像是瀏覽器環(huán)境中的window對(duì)象，我們可以對(duì)其進(jìn)行擴(kuò)展來(lái)滿足業(yè)務(wù)的開(kāi)發(fā)需求，但是要謹(jǐn)慎考慮清楚再改，不然會(huì)為日后的開(kāi)發(fā)留下隱患