[](#%E5%89%8D%E8%A8%80)前言

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

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、React-Native 等）运行的代码。

该项目基于Taro，构建了一个时装衣橱的项目演示，涉及了一个电商平台完整的业务逻辑和功能点，如果这个项目能驾驭的了，相信大部分公司的其他React项目也就不在话下。

如遇网络不佳，请移步国内镜像加速节点

[](#%E6%95%88%E6%9E%9C%E6%BC%94%E7%A4%BA)效果演示

查看demo请戳这里（请用chrome手机模式预览）

[](#h5%E7%89%88--%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%89%88)H5版 && 微信小程序版

[](#%E6%8A%80%E6%9C%AF%E6%A0%88)技术栈

React + Taro + Dva

[](#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C)项目运行

git clone git@github.com:EasyTuan/taro-msparis.git

# 国内镜像加速节点:git@gitee.com:easytuan/taro-msparis.git

cd taro-msparis

npm install

# 开发时时监听编译小程序
npm run dev:weapp

# 开发时时监听编译H5
npm run dev:h5

# pages模版快速生成
npm run tep 文件名

[](#%E9%A1%B9%E7%9B%AE%E8%AF%B4%E6%98%8E)项目说明

git分支说明：

init：框架整体结构，不涉及任何业务逻辑

master：项目的稳定版本

feature：项目开发分支

[](#%E7%9B%AE%E6%A0%87%E5%8A%9F%E8%83%BD)目标功能

美衣列表 -- 完成
美衣详情 -- 完成
登录、注册 -- 完成
个人中心 -- 完成
优惠券 -- 完成
衣袋（购物车） -- 完成
下单 -- 开发中
收货地址 -- 开发中
会员中心 -- 开发中

[](#%E4%B8%9A%E5%8A%A1%E4%BB%8B%E7%BB%8D)业务介绍

目录结构

├── .temp // H5编译结果目录
├── .rn_temp // RN编译结果目录
├── dist // 小程序编译结果目录
├── config // Taro配置目录
│ ├── dev.js // 开发时配置
│ ├── index.js // 默认配置
│ └── prod.js // 打包时配置
├── screenshots // 项目截图，和项目开发无关
├── site // H5静态文件（打包文件）
├── src // 源码目录
│ ├── components // 组件
│ ├── config // 项目开发配置
│ ├── images // 图片文件
│ ├── models // redux models
│ ├── pages // 页面文件目录
│ │ └── home
│ │ ├── index.js // 页面逻辑
│ │ ├── index.scss // 页面样式
│ │ ├── model.js // 页面models
│ │ └── service.js // 页面api
│ ├── styles // 样式文件
│ ├── utils // 常用工具类
│ ├── app.js // 入口文件
│ └── index.html
├── package.json
└── template.js // pages模版快速生成脚本,执行命令 npm run tep 文件名