如何react多端统一框架Taro开发外卖系统？
Taro框架基础知识
简介
Taro 是一套遵循 React 语法规范的多端开发解决方案。
现今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等）运行的代码。
环境搭建
- 安装 Taro 脚手架工具 npm install -g @tarojs/cli
- 初始化项目
taro init taro-orderFood
- 安装 Taro UI cd taro-orderFood npm install taro-ui
- 配置需要额外编译的源码模块
由于引用
node_modules的模块，默认不会编译，所以需要额外给 H5 配置esnextModules，在 taro 项目的config/index.js中新增如下配置项： h5: { esnextModules: [‘taro-ui’] } - 编译dev环境代码 WEB： num run dev:h5 微信小程序：num run dev:weapp 支付宝小程序：num run dev:swan 百度小程序：num run dev:alipay 等等
外卖系统开发
视觉设计稿
拆分设计稿
1、头部(components/head)
- 导航栏(Top)，有两个文件。
top.jsx
top.less
- 店铺介绍(head)
head.jsx
head.less
- 活动(activity)
activity.jsx
activity.less
2、中间部分(components/food)
-
菜品 food.jsx
food.less
-
分类 category.jsx
category.less
-
菜品列表 foodlist.jsx
foodlist.less
3、底部部分(components/bottom)
-
bottom.jsx
bottom.less
4、加菜按钮(components/addfood)
-
addfood.jsx
addfood.less
5、工具类(utils)
-
common.jsx
events.jsx
6、项目入口
- index.jsx
总结
第一版就是实现一个外卖系统的的点菜功能，可以对菜进行点菜添加或者减少。以及相关样式的展示。
后续
- 添加redux
- 抽离UI当中的逻辑，更好的解耦
- 添加网络框架
- 添加上拉加载更多，下拉刷新等
- 屏幕适配
Demo地址
https://github.com/YuriyPikachu/taro-orderFood
- 博客：https://YuriyPikachu.github.io
- github：https://github.com/YuriyPikachu
- QQ技术交流群：389274438
- csdn：https://blog.csdn.net/pjingying
- 知乎：YuriyPikachu
- 简书：YuriyPikachu
- 微博：Android开发加油站
- 邮箱：YuriyPikachu@163.com
- 公众号：Android开发加油站 欢迎关注：
- 头条：Android开发加油站
