原生小程序开发中我们可以通过 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。二者为外部依赖,我们需要npm或yarn去安装构建相关依赖,才能正常使用.
在小程序中已经支持使用 npm 安装第三方包,从而来提高小程序的开发效率。
初始化小程序生成package.json
npm init -y
安装 npm 包
在小程序 package.json 所在的目录中执行命令安装 npm 包:
npm install pageName
此处要求参与构建 npm 的 package.json 需要在 project.config.js 定义的 miniprogramRoot 之内。
构建 npm
点击开发者工具中的菜单栏:工具 --> 构建 npm
勾选“使用 npm 模块”选项:
构建完成后即可使用 npm 包。
js 中引入 npm 包:
const myPackage = require('packageName') const packageOther = require('packageName/other')
使用 npm 包中的自定义组件:
{ "usingComponents": { "myPackage": "packageName", "package-other": "packageName/other" } }
1. 全局数据共享
2. 小程序中的全局数据共享方案
3. 使用mobx
安装 MobX 相关的包
在项目中运行如下的命令,安装 MobX 相关的包:
npm i -S mobx-miniprogram mobx-miniprogram-bindings
注意:MobX 相关的包安装完毕之后,记得删除 miniprogram_npm 目录后,重新构建 npm。
2. 创建 MobX 的 Store 实例
``` import {observable ,action} from 'mobx-miniprogram' export const store=observable({ <!-- 1、数据部分 --> num1:1, num2:2, <!-- 2、计算属性 --> get sum(){ return this.num1+this.num2 }, <!-- 3、actions方法,用来修改store中的数据 --> updateNum1:action(function(step){ this.num1+=tep }) }) ```
将 Store 中的成员绑定到页面中
import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from '../../store/store' Page({ data: { }, onLoad: function (options) { this.storeBindings = createStoreBindings(this, { store, fields: ['num1', 'num2', 'sum'], actions: ['updateNum1'] }) }, btnHandler1(e) { this.updateNum1(e.target.dataset.step) }, onUnload: function () { this.storeBindings.detroyStoreBindings() } })
将 Store 中的成员绑定到组件中
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' import { store } from '../../store/store' Component({ behaviors: [storeBindingsBehavior], storeBindings: { // 数据源 store, fields: { numA: 'num1', numB: 'num2', sum: 'sum' }, actions: { updateNum2: 'updateNum2' } }, })
behaviors 是小程序中,用于实现组件间代码共享的特性,类似于 Vue.js 中的 “mixins”。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被
合并到组件中。
每个组件可以引用多个 behavior,behavior 也可以引用其它 behavior。
调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象,供所有的组件使用:
/* 调用Behavior()方法,创建对象实例 使用module.exports讲behevior 实例对象共享出去 */ module.exports = Behavior({ // 属性节点 properties: {}, // 私有数据节点 data: {}, // 事件处理函数和自定义方法节点 methods: {} })
在组件中,使用 require() 方法导入需要的 behavior,挂载后即可访问 behavior 中的数据或方法,示例代码
// components/test5/test5.js const myBehavior = require('../../behaviors/my-behavior') Component({ behaviors: [myBehavior], /** * 组件的属性列表 */ properties: { count: Number }, })
可用的节点 | 类型 | 是否必填 | 描述 |
---|---|---|---|
properties | Object Map | 否 | 同组件的属性 |
data | Object | 否 | 同组件的数据 |
methods | Object | 否 | 同自定义组件的方法 |
behaviors | String Array | 否 | 引入其它的 behavior |
created | Function | 否 | 生命周期函数 |
attached | Function | 否 | 生命周期函数 |
ready | Function | 否 | 生命周期函数 |
moved | Function | 否 | 生命周期函数 |
detached | Function | 否 | 生命周期函数 |
组件和它引用的 behavior 中可以包含同名的字段,此时可以参考如下 3 种同名时的处理规则:
① 同名的数据字段 (data)
② 同名的属性 (properties) 或方法 (methods)
③ 同名的生命周期函数
如果有同名的数据字段 (data):
如果有同名的属性 (properties) 或方法 (methods):
生命周期函数不会相互覆盖,而是在对应触发时机被逐个调用: