微信小程序如何实现数据共享与方法共享详解.docxVIP

全局数据共享Mobox

原生小程序开发中我们可以通过mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。二者为外部依赖，我们需要npm或yarn去安装构建相关依赖，才能正常使用.

npm安装及其注意事项

小程序对npm的支持与限制

在小程序中已经支持使用npm安装第三方包，从而来提高小程序的开发效率。

.但是小程序中使用npm包有如下5个限制：

o只支持纯js包，不支持自定义组件，不支持依赖于Node.js内置库的包

o必须有入口文件，即需要保证package.json中的main字段是指向一个正确的入口，如果package.json中没有main字段，则以npm包根目录下的index.js作为入口文件。

o测试、构建相关的依赖请放入devDependencies字段中避免被一起打包到小程序包中，这一点和小程序npm包的要求相同。

o不支持依赖c++插件的包

o小程序环境比较特殊，一些全局变量（如window对象）和构造器（如Function构造器）是无法使用的。

npm依赖包的安装与使用

初始化小程序生成package.json

npminit

npminit-y

安装npm包

在小程序package.json所在的目录中执行命令安装npm包：

npminstallpageName

npminstallpageName

此处要求参与构建npm的package.json需要在project.config.js定义的miniprogramRoot之内。构建npm

点击开发者工具中的菜单栏：工具--构建npm

勾选“使用npm模块”选项：

构建完成后即可使用npm包。js中引入npm包：

constmyPackage=require(packag

constmyPackage=require(packageName)

constpackageOther=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相关的包：

npmi-Smobx-miniprogrammobx-miniprogram-bindin

npmi-Smobx-miniprogrammobx-miniprogram-bindings

注意：MobX相关的包安装完毕之后，记得删除miniprogram_npm目录后，重新构建npm。

2.创建MobX的Store实例

```

```

import{observable,action}frommobx-miniprogram

exportconststore=obser

exportconststore=observable({

!--1、数据部分--

num1:1,

num2:2,

!--2、计算属性--getsum(){

returnthis.num1+this.num2},

!--3、actions方法，用来修改store中的数据--

updateNum1:action(function(step){th