之前写过一个开源项目 RxWX,将 RxJS 移植到微信小程序(以下简称 "小程序")中。
RxWX 项目地址和介绍:https://github.com/yalishizhude/RxWX
关于 RxJS 的介绍,读者可以去看官方说明或者关注公众号 "web 学习社" 的后续文章介绍,这篇文章主要讲解 RxWX 的几个使用场景。
微信小程序 SDK 版本:1.7.0
微信开发者工具版本:1.01
演示项目下载地址:
https://github.com/yalishizhude/RxWX/tree/master/example
按照 RxWX 说明,把 Rx.js 和 RxWX.js 文件放入到 utils 目录下。
其中 Rx.js 是可运行在小程序中的 Rx.js 模块,RxWX.js 是利用 Rx.js 对小程序 API 进行的封装,封装后 API 函数将返回 Observable 对象,属性值不变。
使用时必须引入该文件,比如
- import rxwx from '../../utils/RxWX.js'
- // 原写法
- try {
- let result = wx.removeStorageSync('xx')
- console.log(result)
- } catch(e) {
- console.error('小程序API发现错误')
- }
- // 使用RxWX
- import rxwx from '../../utils/RxWX.js'
- rxwx.removeStorageSync('xx')
- .catch((e) => console.error('RxWX发现错误'))
- .subscribe((resp) => console.log(resp))
看上去好像没太大区别。别着急,接着我们来继续看看异步 API 的调用~
- // 原写法
- wx.removeStorage({
- key: 'xx',
- success: function(res) {
- console.log(res)
- },
- error: function(e) {
- console.error('小程序API发现错误')
- }
- })
- // 引用RxWX,rxwx具有wx的所有函数和值,但是调用函数返回的是Observable对象
- import rxwx from '../../utils/RxWX.js'
- rxwx.removeStorage({
- key: 'xx'
- }).
- catch((e) = >console.error('RxWX发现错误')).subscribe((resp) = >console.log(resp))
在调用同步时 RxWX 没有太大优势,但在调用异步 API 的时候以流的方式来处理结果和异常,显然优于回调。
而且代码内容和同步调用方式相比并无变化(只修改了函数名和入参)。
这种统一的操作方式可以让开发者更好的关注业务逻辑,而不需要去分辨 API 到底是异步还是同步,执行结果到底是在回调中获取还是返回值获取。
这种处理方式是不是让你想起点什么?欢迎留言讨论~
登录后获取用户信息。
- // 调用小程序原生API
- wx.login({
- success(res) {
- wx.getUserInfo({
- success(res) {
- console.log(res.userInfo)
- },
- fail(e) {
- console.error(e)
- }
- })
- },
- fail(e) {
- console.error(e)
- }
- })
- // 调用RxWX
- import rxwx from '../../utils/RxWX.js'
- rxwx.login().switchMap(() = >rxwx.getUserInfo()).
- catch(e = >console.error(e)).subscribe(res = >console.log(res.userInfo))
原生写法很容易坠入回调地狱,而利用 RxWx 的代码直观易读。
同时获取用户信息和系统信息后进行操作。
- // 调用小程序API
- let getUser = new Promise((success, fail) = >{
- wx.getUserInfo({
- success,
- fail
- })
- }) let getSystem = new Promise((success, fail) = >{
- wx.getSystemInfo({
- success,
- fail
- })
- }) Promise.all([getUser, getSystem]).then((resp) = >console.log(resp), e = >console.error(e))
- // 调用RxWX
- import rxwx,
- {
- Rx
- }
- from '../../utils/RxWX.js'
- Rx.Observable.zip(rxwx.getUserInfo(), rxwx.getSystemInfo()).
- catch(e = >console.error(e)).subscribe(resp = >console.log(resp))
应微信读者 John 的要求,特意补充了这一部分示例。
代码目录:https://github.com/yalishizhude/RxWX/tree/master/example4wepy
wepy 是一个比较火的小程序框架,采用预编译的方式,让开发者可以用 vuejs 风格的组件化方式开发小程序,同时还支持 Node.js 模块。
官网地址:https://tencent.github.io/wepy/
安装 RxWX
npm i -S rxjs-wx
当然我更推荐你使用 yarn
yarn add rxjs-wx
引入模块
- import rxwx from 'rxjs-wx'
使用 rxwx
wepy 版本:1.6.0
用 wepy new 命令初始化项目之后,我们以 app.wpy 和 index.wpy 两个文件代码为例,改成用 RxWX 实现。
首先是根组件 src/app.wpy 中的 getUserInfo 函数。
默认代码用到了 wepy 封装的小程序 APIgetUserInfo 和回调函数。
如果我们引入 RxWX 的话不再需要从 wepy 调用小程序 API 了,默认引入 RxWX 模块,带有小程序 API,Rx 属性下带有 RxJS 函数。
然后修改 src/pages/index.wpy 中的 onLoad 函数。
我们可以直接采用 RxJS 的流式写法并使用操作符。
来源: https://mp.weixin.qq.com/s/-5VnwCD7EcxdcwfO5WTlyQ