微信小程序集成Redux

利用微信小程序框架与API提供的能力,这“轮子”转起来还挺顺滑,既然是轮子,也固然有它鞭长莫及的地方。

背景

回顾刚刚完成的一个简单小程序,使用框架自带的路由功能,并没有满足开发要求。TabBar自定义的能力受限于简单的icon和url配置,深度UI与功能定制成了奢求,如果用普通组件自定义一个TabBar,需要嵌入每个页面中,在做入栈出栈时,这种TabBar很不符合基本的用户体验。

所以,目前的解决方法,我将首页设计成一个单页模式(SPA)并让两个“页面”使用同一个Fixed TabBar,并利用swiper组件将两个页面放在swiper-item中,禁用自动播放,由TabBar中的导航按钮控制swiper切换,效果还是如丝般柔顺。结构如下:

<swiper>
  <swiper-item>
    页面A内容
  </swiper-item>
  <swiper-item>
    页面B内容
  </swiper-item>
</swiper>
<view class='navigatorBar'>
  <button>页面A</button>
  <button>页面B</button>
</view>

既然是SPA模式,需要有它的路由机制,此时想到了一个合适工具,那就是react-router。既然要做SPA,就不得不考虑状态管理。那么入手redux最合适不过。
说干就干。

从模块化入手

微信小程序可以通过require()方法引入模块,模块只有通过 module.exports 或者 exports 才能对外暴露接口。这种方式,已经可以兼容很多第三方库。

进一步探究,发现每个页面JS文件存在诸如下面的定义,

define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,fetch,XMLHttpRequest,WebSocket,webkit,WeixinJSCore,Reporter,print,WeixinJSBridge){
  'use strict';
  // 代码
});

这种近似AMD的加载方式(官方并没有说自己采用AMD标准),暴露了两个参数require
和module,require用来在模块中加载其他模块,module用来将模块中的方法暴露出去:
module.exports = function(){}

集成redux

第一步:redux打包

git clone https://github.com/reactjs/redux.git
cd redux
cnpm install
npm run build:umd

使用webpack构建UMD模式的包已将依赖打包到一个文件中。

围观打好的 dist/redux.js 文件

(function (global, factory) {
        typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
        typeof define === 'function' && define.amd ? define(['exports'], factory) :
        (factory((global.Redux = {})));
}(this, (function (exports) {
  'use strict';

  //...... redux ......

  exports.createStore = createStore;
  exports.combineReducers = combineReducers;
  exports.bindActionCreators = bindActionCreators;
  exports.applyMiddleware = applyMiddleware;
  exports.compose = compose;

  Object.defineProperty(exports, '__esModule', { value: true });

})));

factory函数返回的内容是用webpack提供的loader组织起来的redux的代码和第三方依赖。

将这个文件拷贝到小程序中,只需要让程序能正常进入第三行代码,就能把Redux加载进来。

将第二行代码:
typeof exports === ‘object’ && typeof module !== ‘undefined’ ? factory(exports) :
typeof define === ‘function’ && define.amd ? define([‘exports’], factory) :
(factory((global.Redux = {})));

修改成:
typeof exports === ‘object’ ? factory(exports) :
typeof define === ‘function’ && define.amd ? define([‘exports’], factory) :
(factory((global.Redux = {})));

在工程中新建一个目录,比如libs,然后用require()引入即可

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

参考

微信小程序007

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信小程序集成Redux》有2个想法

  1. 用swiper模拟实现左右滑切换,页面内容一多 卡得不要不要的。

    现在我使用web-view组件遇到一个兼容性问题,部分iPhone没法正常加载h5页面,即使同iPhone型号 同iOS系统版本 同微信版本 也是有的行 有的不行,完全没有个思路。不知道你使用web-view组件的时候有没有遇到类似的问题?

    1. swiper模拟页面切换,我目前实现的内容是两个长列表,没有卡顿。在切换进行的时候,没有请求和加载,每个列表项有缩略图(尺寸不大于200×200)、少量文本构成,两个列表都是无限加载,测试过各填充1000条数据,在iPhone 6 或同级别机型(CPU、内存)上正常,老一点的还真没试过,无法保证。

      web-view 等我试试告诉你,感觉很坑啊~ 一般微信刚出来的玩意得手动hack,hack不了的就等下个版本更新。