h5扫雷红包系统源码免公众号_如何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

1. 安装 Taro UI
   cd taro-orderFood
   npm install taro-ui
2. 配置需要额外编译的源码模块
   由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项：
   h5: {
   esnextModules: ['taro-ui']
   }
3. 编译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

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

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

• 头条：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