首个 Taro 多端统一实例 - 网易严选(小程序 + H5 + React Native)

网友投稿 1193 2022-10-12

首个 Taro 多端统一实例 - 网易严选(小程序 + H5 + React Native)

首个 Taro 多端统一实例 - 网易严选(小程序 + H5 + React Native)

taro-yanxuan

首个 Taro 多端统一实例 - 网易严选(小程序 + H5 + React Native)。

本项目基于趣店 FED 在 Taro 多端统一开发方面的实践经验,以网易严选小程序为载体,旨在探讨如何以正确的方式使用 Taro 进行多端开发,具体可查看文章 Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)。

效果预览

小程序端已支持微信小程序、支付宝小程序,但无法提供在线版,请 clone 代码本地运行。

本项目直接调用的网易严选接口,若要体验登录、购物车功能,请使用网易邮箱账号登录。

如下是 React Native 的运行截图:

本地运行

本项目直接调用的网易严选接口(网易登录接口改动,暂时无法登陆)。

# 安装依赖,或 npm iyarn# 运行小程序,编译后的文件位于项目下的 dist 文件夹# (微信 dev:weapp,支付宝 dev:alipay)npm run dev:weapp# 运行 H5npm run dev:h5# 运行 React Native,请务必查阅文档:https://nervjs.github.io/taro/docs/react-native.htmlnpm run dev:rn

项目说明

本项目的主要目的是阐述多端开发思路、技巧,力求直观、方便阅读,因此是在 taro init 的基础上开发的,没有去做太多封装。诸如是用 Redux 还是 Mobx,网络请求怎么封装比较完美并不是本项目的重点。

本项目不会去实现一个完整的网易严选,但也实现了足够多的功能、细节进行踩坑,具体涉及的踩坑点、注意事项都在代码中以注释 // TODO(Taro 还未支持的)、// NOTE(开发技巧、注意事项)注明了。

最后,有一点很遗憾,就是一开始没有保留一份 mock 数据,后面网易严选改动挺大,主要是登录逻辑也变了,导致不少功能现在没法运行,后续有空会完善 mock 功能。

License

MIT

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Aha!设计模式(18)-BUILDER(9)
下一篇:Aha!设计模式(78)-命令模式(3)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~