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


Posted in Javascript onAugust 12, 2018

一、前言

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

module.exports = function(){}

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

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

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

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 文件

(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

原版的 remote-redux-devtools 使用的一个 websocket 的依赖会使用原生的 WebSocket ,小程序是不支持的,所以需要改成小程序的 websocket 实现,修改好的代码 https://github.com/poetries/wx-redux-immutable-template/blob/master/wx-redux-immutable-template/public/libs/remote-redux-devtools.js

把代码下载到工程目录里面就可以用了

安装和启动remotedev-server

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

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

集成devtool

在 store 下集成 devtool

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 使用 redux 的 compose 加到 store 中去。 hostname 和 port 是指定为之前启动 remotedev-server 启动时候指定的参数。保存之后重启一下小程序,如果没有报错的话就OK了

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

四、小程序中集成immutable

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

Immutable使用了UMD模块化规范

(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() 强制导出

(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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
js实现旋转木马效果
Mar 17 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
JS如何生成动态列表
Sep 22 Javascript
Vue实现左右菜单联动实现代码
Aug 12 #Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 #Javascript
vue实现商品加减计算总价的实例代码
Aug 12 #Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 #Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 #Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 #Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 #Javascript
You might like
PHP 模拟$_PUT实现代码
2010/03/15 PHP
PHP中::、->、self、$this几种操作符的区别介绍
2013/04/24 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php中filter_input函数用法分析
2014/11/15 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
python编程羊车门问题代码示例
2017/10/25 Python
Windows下安装Scrapy
2018/10/17 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
法律进社区活动总结
2015/05/07 职场文书
幸福来敲门观后感
2015/06/04 职场文书
2016年公司新年寄语
2015/08/17 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
高三数学教学反思
2016/02/18 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server