微信小程序全局mixin 全局stroe 全局状态管理 全局公共组件 方案 mp-mixin js库 劫持生命周期

前言

由于微信小程序没有顶层组件与原生mixin方案，在做一些全局公共组件时十分棘手，也没有办法跨组件维持状态

所以笔者将我平时用到的一个方案封装成了一个js库 mp-mixin , 分享给大家，希望能够有帮助，以下为github地址与文档

该库原理大致就是劫持Page构造器和组件setData等api来实现状态注入与跨组件状态同步

当然，对于使用uni-app taro等框架的，可以忽略这个问题，不存在这个问题哈，这些框架支持全局组件或mixin

mp-mixin

🚀 微信小程序 mixin 和 store 方案

---

1. 特性

1. 支持 mixin data、methods、生命周期及Page事件
2. 支持不同Page 使用 store 共用状态
3. 支持全局 mixin 和 store
4. typescript编写
5. 支持QQ小程序 以及其他api和微信小程序相似的小程序

2. 快速使用

2.1 npm 安装

npm i mp-mixin

import 'mp-mixin';

2.2 cdn

点击下载 cdn 文件，复制到您的小程序项目中，然后 import 这个文件就可以

cdn地址: https://cdn.jsdelivr.net/npm/mp-mixin/mp-mixin.min.js

2.3 快速使用

2.3.1 mixin 对象

mixin 是一个对象，数据结构如下

const mixin = {
    data: {}, // 可选
    methods: {}, // 可选
    store: wx.creteStore({}), // 可选 当全局注入时，store可以是一个json， 否则 必须是 store对象
    // 以下为Page生命周期或事件
    onLoad(){

    },
    onShareAppMessage(){

    }
}

2.3.2 全局mixin

全局mixin, 推荐在 app.js 中引入

import 'mp-mixin';
wx.mixin(mixin); // mixin 对象 见 2.3.1

2.3.3 Page mixin

也可以在Page构造中按需引入 mixin

Page({
    mixin: mixin, // mixin 对象 见 2.3.1
    // ...
})

说明

• 如有相同的键值对，优先级为 组件 > 局部mixin > 全局mixin
• data 优先级 高于 store
• mixin 中的 data 会被深克隆分别注入对应的Page中的data，使用setData互不影响
• mixin 中的 store也会被注入Page中的data，区别是如果不同Page引入的是同一个，则一个页面setData会影响其他页面的 状态，且UI会更新

3 api

引入 mp-mixin 之后，mp-mixin 会将一下三个 api 挂载到 wx 对象上

wx.mixin
wx.createStore
wx.initGlobalStore

wx.initGlobalStore 等价于在 wx.mixin 方法中加入 store属性

wx.initGlobalStore({
    // state
})

wx.mixin({
    store: {
        // state
    }
})

您也可以主动引入来使用上述三个API

import {globalMixin, createStore, initGlobalStore} from 'mp-mixin'
// ...

您可以通过 injectStaff 方法手动注入到任何对象上

import {injectStaff} from 'mp-mixin'
injectStaff(anyObject);

4. 类型声明

1. type.d.ts
2. index.d.ts