例子

首先显示结果

什么是

它是一个提供可预测状态管理的状态容器。

官方文档

为什么要使用

小程序其实跟APP是有点类似的，只不过前面有一个SPA，以及一些原生功能的接口。

现在的前端程序规模比较大，需要管理的东西太多了，比如页面状态、数据缓存等，引入这些状态就可以轻松管理了，而且丰富的周边工具也很吸引人。

集成小程序的模块化

微信的文档中没有说明如何使用第三方库，所以我们只能从微信小程序的模块化入手。

模块化的关键是：

module.exports = function(){}

同时，我们打开小程序开发环境的面板，点击任意一个js，可以发现：

无论我们是否在代码中，项目目录中的所有 js 文件都会被自动加载。所有模块都将使用以下代码进行设置：

define("reducers/visibilityFilter.js", function(require, module){var window={Math:Math}/*兼容babel*/,location,document,navigator,self,localStorage,history,Caches; /********************/ /******你写的代码******/ /********************/ })

这其实是一种类似于AMD的加载方式，但是和标准AMD有些不同，缺少依赖部分的声明。

(, ){}：该函数包装了模块的实现，也就是我们自己写的代码。小程序向我们暴露了两个参数和，分别用于加载模块中的其他模块和暴露模块中的方法：

module.exports = function(){}

所以只需要让第三方库代码使用这种形式就可以了。

微信小程序包构建

这里主要目标是做一个兼容微信小镇加载方式的包

下载代码到本地

git clone https://github.com/reactjs/redux.git

安装依赖项

npm install

盒

npm run build:umd && npm run build:umd

这些命令的详细信息可以在项目的.json中查看。

这些命令用于以 UMD 模式构建包。也就是说，所有代码，包括依赖库，都会打包成一个文件，并且会附带一个模块加载代码。该文件可以在 dist 目录中找到。

带有 min.js 后缀的都通过了。

微调加载方法

使用编辑器打开 dist 目录中的 .js 文件

(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && define.amd) define([], factory); else if(typeof exports === 'object') exports["Redux"] = factory(); else root["Redux"] = factory(); })(this, function() { ... })

该代码用于加载模块，函数返回所提供的组织代码和第三方依赖项。

如果我们将此文件复制到小程序中，只需让程序正常输入第三行代码即可加载它。

更改第二行代码：

if(typeof exports === 'object' && typeof module === 'object')

变成：

if(typeof module === 'object')

这样修改的原因是微信小程序环境中没有变量，所以无法正确进入这个分支，删除之后就可以正确进入了。

复制到项目目录中

比如我们将其复制到libs目录下，那么在程序中使用的时候，只需要将其当做本地模块就可以了：

var redux = require('./libs/redux.js')

通过这里的例子我们其实发现我们可以用类似封装第三方库的方法来集成任何库。

使用

我们可以利用微信小程序绑定库来简化一些代码:--,

详细的安装和使用说明可以在这里找到——

融合的-

如果不是——那么使用效果可能会减半。

因为微信小程序的开发环境是定制的，所以目前没有办法直接安装该插件。

这里我们使用--，-

安装 -

原版-使用的依赖会使用原生的，小程序不支持，所以需要改为小程序实现。

修改后的包在这里：-

只需将代码下载到项目目录并使用它即可。

安装和启动 -

npm install -g remotedev-server remotedev --hostname=localhost --port=5678

因为无法使用npm安装到本地（开头提到了，微信小程序会尝试加载项目目录下的所有js），所以这里使用全局安装。第二条命令是--，其中和端口分别指定为和5678。

融合的

const {createStore, compose} = require('./libs/redux.js'); const devTools = require('./libs/remote-redux-devtools.js').default; const reducer = require('./reducers/index.js') function configureStore() { return createStore(reducer, compose(devTools({ hostname: 'localhost', port: 5678, secure: false }))); } module.exports = configureStore;

将您正在使用的内容添加到介质中。

和port是上次启动时指定的参数。

保存之后，重启小程序，如果没有错误的话就OK了。

打开监视器

你可以在浏览器里访问:5678，这个是内置的监视器，如果正常打开的话是这样的：

左侧有一个@@INIT，代表小程序已经连接成功。

不过这里内置的监控可能无法打开，因为它的一些js包存放在国外的CDN上，偶尔会出现无法访问的情况。

这时候就可以使用了，点击下面，设置为使用本地。保存之后，刷新页面，结果应该和上图一样。

例子

详细代码示例请参考：---