应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

微信小程序技术教程:集成 Redux

发布时间:2024-01-01 00:00 浏览次数:41

示例


Redux就是什么


Redux 就是 JavaScript 状态容器,提供更多可以预测化后的状态管理。


Redux官方文档


为什么必须采用Redux


小程序摇身一变就是一个相似Hybrid App的东西,前面就是SPA,小程序提供更多一些原生功能的USB。


现在前端程序规模都比较小,页面状态,数据内存,须要管理的东西太多。导入Redux可以便利的管理这些状态。并且Redux多样的周边工具也就是很有吸引力的。


内置Redux


小程序的模块化


微信的文档并没表示如何采用第三方库,所以就可以从微信小程序的模块化抓起。


文档中提及,模块化的关键就是:module.exports = function(){}


同时,如果我们回去观测小程序开发环境的network面板,页面任何一个js,我们可以辨认出:


项目目录中的所有js文件都会自动被读取,无论我们与否在代码中require


所以的模块都会套牢上下面的代码:


define("reducers/visibilityFilter.js", function(require, module){var window={Math:Math}/*相容babel*/,location,document,navigator,self,localStorage,history,Caches;


/*******************/


/******你写下的代码******/


/********************/


})


这实际上就是相似AMD的读取方式,但是跟标准的AMD又有些相同,缺乏了倚赖部分的声明。


function(require, module){}: 这个函数包覆的就是模块的同时实现,也就是我们自己写下的代码,小程序给我们曝露了两个参数require和module,require用以在模块中读取其他模块,module用以将模块中的方法曝露过来:


module.exports = function(){}


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


构筑Redux的微信小程序包


这里主要目标就是踢一个Redux纸盒,使它可以相容微信小城的读取方式


浏览Redux的代码至本地:git clone https://github.com/reactjs/redux.git


加装倚赖:npm install


装箱:npm run build:umd && npm run build:umd


这些命令的详尽内容可以至redux项目的package.json中查阅。


这些命令就是就是采用webpack构筑UMD模式的纸盒。也就是说所有的代码,包含倚赖的库都会被装箱至一个文件中,并且自带一段模块读取代码,文件可以在dist目录下找出。


拎min.js后缀的就是minify过的。


4.微调读取方式:用编辑器关上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


我们可以采用Redux的微信小程序存取库来精简一些代码:wechat-weapp-redux,


详尽的加装和采用表明可以参考wechat-weapp-redux的README


内置Redux-devtools


如果没redux-devtools那么采用redux的效果可能将就是必须增加一倍的。


因为微信小程序的研发环境就是订制的,暂时没辨认出办法轻易加装redux-devtool的插件。


这里采用remote-redux-devtools,remotedev-server


加装remote-redux-devtools


原版的remote-redux-devtools采用的一个websocket的倚赖可以采用原生的WebSocket,小程序就是不积极支持的,所以须要换成小程序的websocket同时实现。


修正不好的黏在这里:remote-redux-devtools


把代码浏览至工程目录里面就可以用了。


加装和启动remotedev-server


npm install -g remotedev-server


remotedev --hostname=localhost --port=5678


因为没有办法用npm加装至本地(结尾提及的,微信小程序可以尝试回去读取项目目录中的所有js),所以这里采用全局加装,第二条命令就是启动remotedev-server,hostname和port分别选定为localhost和5678。


3. 内置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了


4. 关上监视器


可以在浏览器中出访localhost:5678,这就是remotedev-server自带的监视器,正常关上的话就是这样的:


左边存有一个@@INIT表明小程序的redux相连接顺利了。但是这里这个自带的监视器可能将看不清楚,因为它的一些js区锡索存有国外的cdn上的,偶尔出访没。


这个时候可以采用http://remotedev.io/local/,页面下面的setting,设置采用本地的server。留存之后创下页面,必须跟上面表明的结果一样。


示例


详尽的代码示例,可以参考:wechat-weapp-redux-todos

TAG标签:
阅读推荐