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

 更新时间:2018年08月12日 12:34:25   作者:Poetry''s Blog  
这篇文章主要介绍了在小程序中集成redux/immutable/thunk第三方库的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、前言

小程序给我们暴露了两个参数 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

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

相关文章

  • JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    这篇文章主要介绍了JS实现兼容各种浏览器的获取选择文本的方法,可实现鼠标拖动选择文本的同时,下方显示区同步实时显示选中内容的功能,涉及javascript响应鼠标事件及页面元素动态操作技巧,需要的朋友可以参考下
    2016-06-06
  • 微信小程序实现全国机场索引列表

    微信小程序实现全国机场索引列表

    这篇文章主要为大家详细介绍了微信小程序实现全国机场索引列表,实现MUI索引列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • dess中一个简单的多路委托的实现

    dess中一个简单的多路委托的实现

    这个SDelegate用起来可能会比较诡异,比如很多操作都要重新赋值。Dess中,SDelegate主要用于一些特定场合,如DOM事件派发。
    2010-07-07
  • 为JS扩展Array.prototype.indexOf引发的问题探讨及解决

    为JS扩展Array.prototype.indexOf引发的问题探讨及解决

    Array没有indexOf方法,这样在一个数组中查找某个元素的索引时比较麻烦,于是通过prototype原型扩展了Array.prototype.indexOf(),在对数组进行遍历的时候却出现了问题
    2013-04-04
  • 在线编辑器中换行与内容自动提取

    在线编辑器中换行与内容自动提取

    这几天在写在线编辑器,碰到个问题,当使用回车换行时不是你希望的<br>而是<p></p>对或是<div></div>对。使用google搜索,在网上找不到满意的答案。
    2009-04-04
  • 关于layui的动态图标不显示的解决方法

    关于layui的动态图标不显示的解决方法

    今天小编就为大家分享一篇关于layui的动态图标不显示的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript延迟加载之async与defer的应用

    JavaScript延迟加载之async与defer的应用

    这篇文章主要介绍了JavaScript延迟加载之async与defer的应用场景与使用区别的介绍,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • layui前端时间戳转化实例

    layui前端时间戳转化实例

    今天小编就为大家分享一篇layui前端时间戳转化实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    下面小编就为大家带来一篇js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 前端终止请求的3种方式总结(ajax、axios)

    前端终止请求的3种方式总结(ajax、axios)

    这篇文章主要给大家总结介绍了关于前端终止请求的3种方式,其中包括ajax、axios的相关资料, 取消请求在前端有时候会用到,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09

最新评论