盒子
盒子
文章目录󰁋
  1. 一、前言
  2. 二、构建Redux的微信小程序包
  3. 三、集成Redux-devtools
  4. 四、小程序中集成immutable
  5. 五、小程序集成redux、immutable模板

在小程序中集成redux/immutable/thunk第三方库

一、前言

小程序给我们暴露了两个参数requiremodulerequire用来在模块中加载其他模块,module用来将模块中的方法暴露出去

1
module.exports = function(){}

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

二、构建Redux的微信小程序包

打一个Redux包,让它可以兼容微信小城的加载方式

1
2
3
4
5
6
7
git clone https://github.com/reactjs/redux.git

npm install

# 详细内容可以到redux项目的package.json中查看
# 这些命令是是使用webpack构建UMD模式的包。也就是说所有的代码,包括依赖的库都会被打包到一个文件中,并且自带一段模块加载代码,文件可以在dist目录下找到
npm run build:umd && npm run build:umd

用编辑器打开dist目录下的redux.js文件

1
2
3
4
5
6
7
8
9
10
11
12
(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() {
...
})
  • 这段代码是用来加载模块的,里面的factory函数的返回的内容是用webpack提供的loader组织起来的redux的代码和第三方依赖。
  • 如果我们把这个文件拷贝到小程序中,只需要让程序能正常进入第三行代码,就能把Redux加载进来
  • 将第二行代码:if(typeof exports === 'object' && typeof module === 'object') 修改成:if(typeof module === 'object')
  • 这样修改的原因是,在微信小程序的环境中是没有exports变量的,所以就没办法正确进入这个分支,删除之后就可以正确进入
  • 我们拷贝到libs目录下,那么我们在程序中使用时,只要当做是一个本地模块去require就可以了 var redux = require('./libs/redux.js')
  • 我们可以通过类似的方法,使用Webpack打包第三方库,就可以集成任何库了

三、集成Redux-devtools

因为微信小程序的开发环境是定制的,暂时没有发现办法直接安装redux-devtool的插件

安装remote-redux-devtools

安装和启动remotedev-server

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

因为没办法用npm安装到本地(微信小程序会尝试去加载项目目录中的所有js),所以这里使用全局安装,第二条命令是启动remotedev-serverhostnameport分别指定为localhost5678

集成devtool

store下集成devtool

1
2
3
4
5
6
7
8
9
10
11
12
13
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;

devtool使用reduxcompose加到store中去。hostnameport是指定为之前启动remotedev-server启动时候指定的参数。保存之后重启一下小程序,如果没有报错的话就OK了

  • 可以在浏览器中访问localhost:5678

四、小程序中集成immutable

ImmutableFacebook 开发的不可变数据集合。不可变数据一旦创建就不能被修改,是的应用开发更简单,允许使用函数式编程技术,比如惰性评估。微信小程序无法直接使用Immutable.js,下面就来说说微信小程序如何使用第三方库Immutable.js

Immutable使用了UMD模块化规范

1
2
3
4
5
6
7
8
9
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.Immutable = factory());
}(this, function () { 'use strict';var SLICE$0 = Array.prototype.slice;

....

}));

修改Immutable代码,注释原有模块导出语句,使用module.exports = factory() 强制导出

1
2
3
4
5
6
7
8
9
10
(function(global, factory) {
/*
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.Immutable = factory());
*/

module.exports = factory();

}(this, function() {

导入修改好的immutable到小程序中即可 https://github.com/poetries/wx-redux-immutable-template/blob/master/wx-redux-immutable-template/public/libs/immutable.js

五、小程序集成redux、immutable模板

https://github.com/poetries/wx-redux-immutable-template

支持一下
扫一扫,支持poetries