在小程序中集成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 相关文章推荐
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
微信小程序实现点赞业务
Feb 10 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 防恶意刷新实现代码
2010/05/16 PHP
php获取文件大小的方法
2014/02/26 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
smarty实现多级分类的方法
2014/12/05 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
vue+iview+less 实现换肤功能
2018/08/17 Javascript
vue观察模式浅析
2018/09/25 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
8种常用的Python工具
2020/08/05 Python
python实现邮件循环自动发件功能
2020/09/11 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
公司接待方案
2014/03/08 职场文书
走进科学观后感
2015/06/18 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
浅析Python中的套接字编程
2021/06/22 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript