Gathering detailed insights and metrics for mobx-miniprogram-bindings
Installations
npm install mobx-miniprogram-bindingsDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.12.2
NPM Version
10.5.0
Score
71.7
Supply Chain
98.2
Quality
82.4
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
7
Unable to fetch Contributors
Languages
2
TypeScript
JavaScript
TypeScript (94.6%)
JavaScript (5.4%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
wechat-miniprogram
Download Statistics
Total Downloads
35,253
Last Day
16
Last Week
125
Last Month
499
Last Year
6,257
GitHub Statistics
MIT License
218 Stars
62 Commits
22 Forks
11 Watchers
2 Branches
7 Contributors
Updated on Mar 11, 2025
Bundle Size
6.30 kB
Minified
2.01 kB
Minified + Gzipped
Maintainers
2
Package Meta Information
Latest Version
5.0.0
Package Id
mobx-miniprogram-bindings@5.0.0
Unpacked Size
54.49 kB
Size
13.55 kB
File Count
13
NPM Version
10.5.0
Node Version
20.12.2
Published on
Nov 13, 2024
Total Downloads
Cumulative downloads
Total Downloads
35,253
Last Day
-15.8%
16
Compared to previous day
Last Week
26.3%
125
Compared to previous week
Last Month
54%
499
Compared to previous month
Last Year
-29%
6,257
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Dev Dependencies
34
@babel/runtime@swc/core@types/jest@types/node@typescript-eslint/eslint-plugin@typescript-eslint/parsercolorsesbuildeslinteslint-config-airbnb-baseeslint-config-prettiereslint-plugin-importeslint-plugin-nodeeslint-plugin-prettiereslint-plugin-promiseglass-easelglass-easel-miniprogram-adapterglass-easel-template-compilergulpgulp-cleangulp-esbuildgulp-swcgulp-typescriptgulp-watchhuskyjestjest-environment-jsdomminiprogram-api-typingsminiprogram-computedmobx-miniprogramprettierts-jestts-nodetypescript
小程序的 MobX 绑定辅助库
小程序的 MobX 绑定辅助库。
此 behavior 依赖开发者工具的 npm 构建。具体详情可查阅 官方 npm 文档 。
使用方法
需要小程序基础库版本 >= 2.11.0 的环境。
具体的示例完整代码，可以参考 examples 。
- 安装
mobx-miniprogram和mobx-miniprogram-bindings：
1npm install --save mobx-miniprogram mobx-miniprogram-bindings
- 创建 MobX Store。
1// store.js 2import { observable, action } from 'mobx-miniprogram' 3 4// 创建 store 时可以采用任何 mobx 的接口风格 5// 这里以传统的 observable 风格为例 6 7export const store = observable({ 8 // 数据字段 9 numA: 1, 10 numB: 2, 11 12 // 计算属性 13 get sum() { 14 return this.numA + this.numB 15 }, 16 17 // actions 18 update: action(function () { 19 const sum = this.sum 20 this.numA = this.numB 21 this.numB = sum 22 }), 23})
- 在 Page 或 Component 构造器中使用：
1import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' 2import { store } from './store' 3 4Component({ 5 behaviors: [storeBindingsBehavior], // 添加这个 behavior 6 data: { 7 someData: '...', 8 }, 9 storeBindings: { 10 store, 11 fields: { 12 numA: () => store.numA, 13 numB: (store) => store.numB, 14 sum: 'sum', 15 }, 16 actions: { 17 buttonTap: 'update', 18 }, 19 }, 20 methods: { 21 myMethod() { 22 this.data.sum // 来自于 MobX store 的字段 23 }, 24 }, 25})
TypeScript 接口
在 TypeScript 下，可以使用 ComponentWithStore 接口。它会自动处理一些类型问题。注意：
- 使用这个接口时，不要在 behaviors 中额外引入
storeBindingsBehavior； fields和actions末尾需要加上as const以便更好的类型推导；storeBindings如果是一个数组，也要在数组后加上as const。
1import { ComponentWithStore } from 'mobx-miniprogram-bindings'
2
3ComponentWithStore({
4 data: {
5 someData: '...',
6 },
7 storeBindings: {
8 store,
9 fields: ['numA', 'numB', 'sum'] as const,
10 actions: {
11 buttonTap: 'update',
12 } as const,
13 },
14})BehaviorWithStore 接口类似。
1import { BehaviorWithStore } from 'mobx-miniprogram-bindings' 2 3export const testBehavior = BehaviorWithStore({ 4 storeBindings: { 5 store, 6 fields: ['numA', 'numB', 'sum'] as const, 7 actions: ['update'] as const, 8 }, 9})
目前 TypeScript 接口定义依赖于 miniprogram-api-typings ^4.0.0 。
（如使用老版本的 api-typings ，请使用本项目的 v4 或 v3 版本。）
glass-easel Chaining API 接口
使用 glass-easel Chaining API 时，使用 initStoreBindings 更友好。
1import { initStoreBindings } from 'mobx-miniprogram-bindings' 2 3Component() 4 .init((ctx) => { 5 const { listener } = ctx 6 initStoreBindings(ctx, { 7 store, 8 fields: ['numA', 'numB', 'sum'], 9 }) 10 const buttonTap = listener(() => { 11 store.update() 12 }) 13 return { buttonTap } 14 }) 15 .register()
具体接口说明
将页面、自定义组件和 store 绑定有两种方式： behavior 绑定 和 手工绑定 。
behavior 绑定
behavior 绑定 适用于 Component 构造器。做法：使用 storeBindingsBehavior 这个 behavior 和 storeBindings 定义段。
1import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' 2 3Component({ 4 behaviors: [storeBindingsBehavior], 5 storeBindings: { 6 /* 绑定配置（见下文） */ 7 }, 8})
也可以把 storeBindings 设置为一个数组，这样可以同时绑定多个 store ：
1import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' 2 3Component({ 4 behaviors: [storeBindingsBehavior], 5 storeBindings: [ 6 { 7 /* 绑定配置 1 */ 8 }, 9 { 10 /* 绑定配置 2 */ 11 }, 12 ], 13})
手工绑定
手工绑定 更加灵活，适用于 store 需要在 onLoad （自定义组件 attached ）时才能确定的情况。
做法：使用 createStoreBindings 创建绑定，它会返回一个包含清理函数的对象用于取消绑定。
注意：在页面 onUnload （自定义组件 detached ）时一定要调用清理函数，否则将导致内存泄漏！
1import { createStoreBindings } from 'mobx-miniprogram-bindings' 2 3Page({ 4 onLoad() { 5 this.storeBindings = createStoreBindings(this, { 6 /* 绑定配置（见下文） */ 7 }) 8 }, 9 onUnload() { 10 this.storeBindings.destroyStoreBindings() 11 }, 12})
绑定配置
无论使用哪种绑定方式，都必须提供一个绑定配置对象。这个对象包含的字段如下：
| 字段名 | 类型 | 含义 |
|---|---|---|
| store | 一个 MobX observable | 默认的 MobX store |
| fields | 数组或者对象 | 用于指定需要绑定的 data 字段 |
| actions | 数组或者对象 | 用于指定需要映射的 actions |
fields
fields 有三种形式：
- 数组形式：指定 data 中哪些字段来源于
store。例如['numA', 'numB', 'sum']。 - 映射形式：指定 data 中哪些字段来源于
store以及它们在store中对应的名字。例如{ a: 'numA', b: 'numB' }，此时this.data.a === store.numAthis.data.b === store.numB。 - 函数形式：指定 data 中每个字段的计算方法。例如
{ a: () => store.numA, b: () => anotherStore.numB }，此时this.data.a === store.numAthis.data.b === anotherStore.numB。
上述三种形式中，映射形式和函数形式可以在一个配置中同时使用。
如果仅使用了函数形式，那么 store 字段可以为空，否则 store 字段必填。
actions
actions 可以用于将 store 中的一些 actions 放入页面或自定义组件的 this 下，来方便触发一些 actions 。有两种形式：
- 数组形式：例如
['update']，此时this.update === store.update。 - 映射形式：例如
{ buttonTap: 'update' }，此时this.buttonTap === store.update。
只要 actions 不为空，则 store 字段必填。
注意事项
延迟更新与立刻更新
为了提升性能，在 store 中的字段被更新后，并不会立刻同步更新到 this.data 上，而是等到下个 wx.nextTick 调用时才更新。（这样可以显著减少 setData 的调用次数。）
如果需要立刻更新，可以调用：
this.updateStoreBindings()（在 behavior 绑定 中）this.storeBindings.updateStoreBindings()（在 手工绑定 中）
与 miniprogram-computed 一起使用
与 miniprogram-computed 时，在 behaviors 列表中 computedBehavior 必须在后面：
1Component({ 2 behaviors: [storeBindingsBehavior, computedBehavior], 3 /* ... */ 4})
关于部分更新
如果只是更新对象中的一部分（子字段），是不会引发界面变化的！例如：
1Component({ 2 behaviors: [storeBindingsBehavior], 3 storeBindings: { 4 store, 5 fields: ['someObject'], 6 }, 7})
如果尝试在 store 中：
1this.someObject.someField = 'xxx'
这样是不会触发界面更新的。请考虑改成：
1this.someObject = Object.assign({}, this.someObject, { someField: 'xxx' })
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
1 commit(s) and 5 issue activity found in the last 90 days -- score normalized to 5
Reason
Found 4/15 approved changesets -- score normalized to 2
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 19 are checked with a SAST tool
Score
4.5
/10
Last Scanned on 2025-03-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More