简单化互动交流-小程序基础教程:集成 Redux

2021-04-17 13:49| 发布者: | 查看: |

--------

简单化互动交流

-------为何要应用Redux

小程序俨然是一个相近Hybrid App的物品,前面是SPA,小程序出示一些原生态作用的插口。

如今前端开发程序经营规模都比较大,网页页面情况,数据信息缓存文件,需要管理方法的物品太多。引入Redux能够便捷的管理方法这些情况。而且Redux丰富多彩的周边专用工具也是很有吸引住力的。

集成化Redux 小程序的控制模块化

手机微信的文本文档并沒有指出怎样应用第三方库,因此只能从手机微信小程序的控制模块化下手。

文本文档中提到,控制模块化的重要是:module.exports = function(){}

work面板,点一下任何一个js,大家能够发现:


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包,让它能够适配手机微信小城的载入方法


这些指令是是应用webpack搭建UMD方式的包。也就是说全部的编码,包含依靠的库都会被装包到一个文档中,而且自带一段控制模块载入编码,文档能够在dist文件目录下找到。


这段编码是用来载入控制模块的,里边的factory涵数的回到的內容是用webpack出示的loader机构起来的redux的编码和第三方依靠。


假如大家把这个文档复制到小程序中,只需要让程序能一切正常进到第三行编码,就可以把Redux载入进来。


这样改动的缘故是,在手机微信小程序的自然环境中是沒有exports自变量的,因此就没方法正确进到这个支系,删掉以后便可以正确进到了


复制进工程项目文件目录
例如,大家复制到libs文件目录下,那末大家在程序中应用时,要是作为是一个当地控制模块去require便可以了:


根据这里的示例,实际上大家发现,大家能够根据相近的方式,应用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应用的一个websocket的依靠会应用原生态的WebSocket,小程序是不适用的,因此需要改成小程序的websocket完成。


          由于没方法用npm安裝到当地(开始提到的,手机微信小程序会尝试去载入新项目文件目录中的全部js),因此这里应用全局性安裝,第二条指令是起动remotedev-server,hostname和port各自特定为localhost和5678。      3.  集成化devtool
module.exports = configureStore; pose加到store中去。hostname和port是特定为之前起动remotedev-server起动情况下特定的主要参数。储存以后重新启动一下小程序,假如沒有出错的话就OK了

      4.  开启监控器

          能够在访问器中浏览localhost:5678,这是remotedev-server自带的监控器,一切正常开启的话是这样的:

          左侧有一个@@INIT表明小程序的redux联接取得成功了。可是这里这个自带的监控器将会打不开,由于它的一些js包是存在海外的cdn上的,有时候浏览不到。

这个情况下能够应用local/,点一下下面的setting,设定应用当地的server。储存以后更新网页页面,应当跟上面显示信息的結果一样。

详尽的编码示例,能够参照:wechat-weapp-redux-todos

---------

简单化互动交流

------------
<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部