1 Star 0 Fork 0

theajack / ts-miniapp

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

mp-mixin 的调试和demo页面

mp-mixin

stars forks version downloads issue

author license Size TopLang Dependent test

🚀 微信小程序 mixin 和 store 方案

English | 更新日志 | 反馈错误/缺漏 | Gitee


1. 特性

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

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 store = wx.creteStore({});

const mixin = {
    data: {}, // 可选
    methods: {}, // 可选
    store: store, // 可选 当全局注入时,store可以是一个json, 否则 必须是 store对象
    // 以下为Page独有的生命周期或事件
    // 详情请参考小程序文档 
    onLoad(){

    },
    onShareAppMessage(){

    },

    // 以下为Component独有的生命周期或事件
    lifetimes:{
        // 详情请参考小程序文档 
    },
    pageLifetimes:{
        // 详情请参考小程序文档
    }
}

微信小程序Page文档

微信小程序Component文档

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
    // ...
})

2.3.4 Component mixin

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

Component({
    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);

获取 mp-mixin version

wx.mpMixinVersion

// 或者

import {version} from 'mp-mixin';

4. 类型声明

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

空文件

简介

Wechat miniapp demo with typescript (mp-mixin dev env) 展开 收起
TypeScript 等 2 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/theajack/ts-miniapp.git
git@gitee.com:theajack/ts-miniapp.git
theajack
ts-miniapp
ts-miniapp
master

搜索帮助