taro-dva整合

前言

小程序的开发体验和现在的前端开发完全是两个时代的事。

在之前的小程序开发中,我曾尝试使用 webpack 打包js 的方式,整合 dvajs 到小程序内,进行状态管理和异步逻辑的编写。然后把状态订阅到小程序的Page.data 上的方式进行开发,实现逻辑部分兼容微信小程序和支付宝小程序,然后体验并不好!

直到我遇到 taro, taro 是一个多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信小程序、H5、React Native 等的应用。

连接地址:https://taro.aotu.io

由于我们的前段项目基本上都使用 dvajs
来整合 redux、redux-saga 进行项目开发。
因此需要实现dvajs和 redux 的整合

使用建议

在使用taro 前,我建议一定要看完官方文档,并大致浏览issues

taro这种框架不能完美的实现react 全部特性,也不可能完全完美兼容前端的各种库,因此使用是我建议避免使用太多特性,以及严格按照官方文档来办,尽量绕过各种坑,而不是去填平他

对于react的各种ui库,建议谨慎引入,首先是不兼容,其次是在小程序里面,我一直建议尽量使用腾讯提供的组件,来达到更好的体验和性能以及包大小。

必要时不如劝产品经理和美术人员修改直接的方案反而更合适

必要时可以使用taro-ui这种针对性的ui库。

整合 taro和dvajs

整合dvajs,首先需要解决redux 依赖

1
2
3
$ yarn add redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger
# 或者使用 npm
$ npm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger

然后引入异步编程依赖

1
2
3
$ yarn add @tarojs/async-await
# 或者使用 npm
$ npm install --save @tarojs/async-await

我们可以阅读tarojs/async-await 的相关实现发现,
小程序环境和一般的web rn 环境的区别,在引入其他一些不兼容的库是可以参考

然后在app.js第一行插入

1
2
// src/app.js
import '@tarojs/async-await'

剩下的整合可以参考下面这个例子,这个例子实现了一个简单的仿知乎页面。相关代码在src
/dva.js内。

注意在发布时候最好关闭 redux-logger,避免性能问题!

连接地址:https://github.com/zuoge85/taro-dva

小草(zuoge85@gmail.com) wechat
扫一扫关注公众号