评论

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

小程序全局mixin

前言

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

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

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

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

mp-mixin

<h3>🚀 微信小程序 mixin 和 store 方案</h3>


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
点赞 1
收藏
评论

1 个评论

  • One Eight Nine Four
    One Eight Nine Four
    05-18

    只有引入,没有如何调用的demo吗

    05-18
    赞同
    回复
登录 后发表内容