⼩程序如何实现数据共享与⽅法共享详解
⽬录
全局数据共享 Mobox
npm安装及其注意事项
⼩程序对 npm 的⽀持与限制
npm 依赖包的安装与使⽤
Mobox
组件⽅法共享 behaviors
1. 什么是 behaviors
2. behaviors 的⼯作⽅式
3. 创建 behavior
4. 导⼊并使⽤ behavior
5. behavior 中所有可⽤的节点
6. 同名字段的覆盖和组合规则
总结
全局数据共享 Mobox
原⽣⼩程序开发中我们可以通过 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。⼆者为外部依赖，我们需要npm或yarn去安装构建相关依赖，才能正常使⽤.
npm安装及其注意事项
⼩程序对 npm 的⽀持与限制
在⼩程序中已经⽀持使⽤ npm 安装第三⽅包，从⽽来提⾼⼩程序的开发效率。
但是⼩程序中使⽤npm 包有如下5个限制：
只⽀持纯 js 包，不⽀持⾃定义组件，不⽀持依赖于 Node.js 内置库的包
必须有⼊⼝⽂件，即需要保证 package.json 中的 main 字段是指向⼀个正确的⼊⼝，如果 package.json 中没有
main 字段，则以 npm 包根⽬录下的 index.js 作为⼊⼝⽂件。
测试、构建相关的依赖请放⼊ devDependencies 字段中避免被⼀起打包到⼩程序包中，这⼀点和⼩程序 npm 包
的要求相同。
不⽀持依赖 c++ 插件的包
⼩程序环境⽐较特殊，⼀些全局变量（如 window 对象）和构造器（如 Function 构造器）是⽆法使⽤的。
npm 依赖包的安装与使⽤写文章的小程序
初始化⼩程序⽣成package.json
npm init -y
安装 npm 包
在⼩程序 package.json 所在的⽬录中执⾏命令安装 npm 包：
npm install pageName
此处要求参与构建 npm 的 package.json 需要在 fig.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"
}
Mobox
1. 全局数据共享
共享数据是指多个进程都可以访问的数据，⽽全局变量是⼀个进程内的多个单元可共享的数据。
解决组件之间数据共享的问题。
开发中常⽤的全局数据共享⽅案有：Vuex、Redux、MobX、hooks等。
2. ⼩程序中的全局数据共享⽅案
mobx-miniprogram：⽤来创建 Store 实例对象
mobx-miniprogram-bindings：⽤来把 Store 中的共享数据或⽅法，绑定到组件或页⾯中使⽤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 中的成员绑定到组件中
通过storeBindingsBehavior实现⾃动绑定
store：指定要绑定的store
fields：置顶绑定的数据字段
绑定字段⽅式⼀：numA:()=>store.num1
绑定字段⽅式⼆：numA:(store)=>store.num1
绑定字段⽅式三：numA:'num1'
actions：指定要绑定的⽅法
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
1. 什么是 behaviors
behaviors 是⼩程序中，⽤于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”。
2. behaviors 的⼯作⽅式
每个 behavior 可以包含⼀组属性、数据、⽣命周期函数和⽅法。组件引⽤它时，它的属性、数据和⽅法会被合并到组件中。
每个组件可以引⽤多个 behavior，behavior 也可以引⽤其它 behavior。
3. 创建 behavior
调⽤ Behavior(Object object) ⽅法即可创建⼀个共享的 behavior 实例对象，供所有的组件使⽤：
/*
调⽤Behavior()⽅法，创建对象实例
使⽤ports讲behevior 实例对象共享出去
*/
// 属性节点
properties: {},
// 私有数据节点
data: {},
// 事件处理函数和⾃定义⽅法节点
methods: {}
})
4. 导⼊并使⽤ behavior
在组件中，使⽤ require() ⽅法导⼊需要的 behavior，挂载后即可访问 behavior 中的数据或⽅法，⽰例代码// components/test5/test5.js
const myBehavior = require('../../behaviors/my-behavior')
Component({
behaviors: [myBehavior],
/**

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。