如何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 UIcd taro-orderFoodnpm 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、java工具(utils)

common.jsx

events.jsx

6、新项目通道

index.jsx

汇总

第一版便是完成一个外卖系统的的点餐作用，可以对菜开展点餐加上或是降低。及其有关款式的展现。

后面加上redux抽身UI之中的逻辑性，更强的解耦加上互联网架构加上往上拉加载更多，页面刷新等显示屏兼容Demo详细地址

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

掌握更移动开发专业知识，热烈欢迎扫码关注：

http://weixin.qq.com/r/mDvj_xHEGkxlrVWY926K (二维码自动检索)

今日头条：Android开发设计加气站新浪微博：Android开发设计加气站微信公众号：Android开发设计加气站QQ技术交流群：389274438blog：https://YuriyPikachu.github.io简书：YuriyPikachu知乎问答：YuriyPikachucsdn：https://blog.csdn.net/pjingyinggithub：https://github.com/YuriyPikachu电子邮箱：YuriyPikachu@163.com