README.en.md

mp-mixin

🚀 WeChat Mini Program mixin and store solution

中文 | Demo | Update Log | Feedback bug/missing | Gitee

---

1. Features

1. Support mixin data, methods, life cycle and Page events
2. Support different Pages and Components to use store sharing status
3. Support global mixin and store
4. Typescript writing
5. Support QQ applet and other applets with similar api and WeChat applet
6. Small size, only 1.83kb

2. Quick use

2.1 npm installation

npm i mp-mixin

import'mp-mixin';

2.2 cdn

Click to download cdn file, copy it to your mini program project, and then import this file.

cdn address: [https://cdn.jsdelivr.net/npm/mp-mixin/mp-mixin.min.js](https://cdn.jsdelivr.net/npm/mp-mixin/mp-mixin.min .js)

2.3 Quick use

2.3.1 mixin object

Mixin is an object, the data structure is as follows

const store = wx.creteStore({});

const mixin = {
     data: {}, // optional
     methods: {}, // optional
     store: store, // optional When injecting globally, store can be a json, otherwise it must be a store object
     // The following is the unique life cycle or event of Page
     // Please refer to the applet documentation for details
     onLoad(){

     },
     onShareAppMessage(){

     },

     // The following is the unique life cycle or event of Component
     lifetimes:{
         // Please refer to the applet documentation for details
     },
     pageLifetimes:{
         // Please refer to the applet documentation for details
     }
}

WeChat Mini Program Page Document

WeChat Mini Program Component Document

2.3.2 Global mixin

Global mixin, recommended to be introduced in app.js

import'mp-mixin';
wx.mixin(mixin); // mixin object see 2.3.1

2.3.3 Page mixin

You can also introduce mixin as needed in the Page structure

Page({
    mixin: mixin, // mixin object see 2.3.1
    // ...
})

2.3.4 Component mixin

You can also introduce mixin as needed in the Component structure

Component({
    mixin: mixin, // mixin object see 2.3.1
    // ...
})

Description

• If there are the same key-value pairs, the priority is component> local mixin> global mixin
• data priority is higher than store
• The data in the mixin will be deep cloned and injected into the data in the corresponding Page, and the use of setData will not affect each other
• The store in the mixin will also be injected into the data in the Page. The difference is that if different pages introduce the same one, the setData of one page will affect the state of other pages, and the UI will be updated

3 api

After the introduction of mp-mixin, mp-mixin will mount the following three apis to the wx object

wx.mixin
wx.createStore
wx.initGlobalStore

wx.initGlobalStore is equivalent to adding the store attribute to the wx.mixin method

wx.initGlobalStore({
    // state
})

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

You can also actively introduce to use the above three APIs

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

You can manually inject into any object through the injectStaff method

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

Get mp-mixin version

wx.mpMixinVersion

// or

import {version} from 'mp-mixin';

4. Type declaration

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