如何react多端统一框架Taro开发外卖系统？

Taro框架基础知识

简介

Taro 是一套遵循 React 语法规范的多端开发解决方案。

现今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等）运行的代码。

环境搭建

1. 安装 Taro 脚手架工具
   npm install -g @tarojs/cli
2. 初始化项目
   taro init taro-orderFood
   
3. 安装 Taro UI
   cd taro-orderFood
   npm install taro-ui
4. 配置需要额外编译的源码模块
   由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项：
   h5: {
   esnextModules: [‘taro-ui’]
   }
5. 编译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
  

总结

第一版就是实现一个外卖系统的的点菜功能，可以对菜进行点菜添加或者减少。以及相关样式的展示。

后续

1. 添加redux
2. 抽离UI当中的逻辑，更好的解耦
3. 添加网络框架
4. 添加上拉加载更多，下拉刷新等
5. 屏幕适配

Demo地址

https://github.com/YuriyPikachu/taro-orderFood

了解更移动开发知识，欢迎关注公众号：

• 头条：Android开发加油站
• 微博：Android开发加油站
• 公众号：Android开发加油站
• QQ技术交流群：389274438
• 博客：https://YuriyPikachu.github.io
• 简书：YuriyPikachu
• 知乎：YuriyPikachu
• csdn：https://blog.csdn.net/pjingying
• github：https://github.com/YuriyPikachu
• 邮箱：YuriyPikachu@163.com