🎉 init

.editorconfig

+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

+{
+  "extends": ["taro"],
+  "rules": {
+    "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }]
+  },
+  "parser": "babel-eslint"
+}

.gitignore

+/dist
+.temp/
+.rn_temp/
+node_modules/
+package-lock.json
+.idea
+.vscode/
+*.log
+.DS_Store
+npm-debug.log
+npm-debug.log.*
+selenium-debug.log
+.vscode

LICENSE

+MIT License
+
+Copyright (c) 2018 bowen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

+# 前言
+
+**Taro** 是一套遵循 [React](https://reactjs.org/) 语法规范的 **多端开发** 解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
+
+使用 **Taro**，我们可以只书写一套代码，再通过 **Taro** 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、React-Native 等）运行的代码。
+
+该项目基于Taro，构建了一个女装租赁平台，涉及了一个电商平台完整的业务逻辑和功能点，如果这个项目能驾驭的了，相信大部分公司的其他React项目也就不在话下。
+
+如遇网络不佳，请移步[国内镜像加速节点](https://gitee.com/easytuan/taro-msparis)
+
+# 效果演示
+
+暂无
+
+# 技术栈
+
+React + taro + dva
+
+## 项目运行
+
+```
+
+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
+
+# pages模版快速生成
+npm run tep `文件名`
+
+```
+
+## 项目说明
+
+**git分支说明：**
+  init：框架整体结构，不涉及任何业务逻辑
+  master：项目的稳定版本
+  feature：项目开发分支
+
+
+# 目标功能
+
+暂定
+
+# 业务介绍
+
+目录结构
+
+    ├── .temp                  // H5编译结果目录
+    ├── .rn_temp               // RN编译结果目录
+    ├── dist                   // 小程序编译结果目录
+    ├── config                 // Taro配置目录
+    │   ├── dev.js                 // 开发时配置
+    │   ├── index.js               // 默认配置
+    │   └── prod.js                // 打包时配置
+    ├── screenshots            // 项目截图，和项目开发无关
+    ├── 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 `文件名`
+
+# 说明
+
+>  如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^
+
+>  或者您可以 "follow" 一下，我会不断开源更多的有趣的项目
+
+>  如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍
+
+
+# 捐助
+
+如有帮助，欢迎打赏
+
+<img src="screenshots/wechat.jpg" width="200px" /> <img src="screenshots/alipay.jpg" width="200px" />
+
+# License
+
+[MIT](LICENSE)

config/dev.js

+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+  },
+  weapp: {},
+  h5: {
+    devServer: {
+      host: '0.0.0.0', // 如需局域网（如手机）访问，请更换为0.0.0.0
+      port: 8088,
+      https: false
+    }
+  }
+}

config/index.js

+const config = {
+  projectName: 'taro-ordering',
+  date: '2018-9-27',
+  // 设计稿尺寸
+  designWidth: 750,
+  sourceRoot: 'src',
+  outputRoot: 'dist',
+  // 通用插件配置
+  plugins: {
+    babel: {
+      sourceMap: true,
+      presets: [
+        'env'
+      ],
+      plugins: [
+        'transform-class-properties',
+        'transform-decorators-legacy',
+        'transform-object-rest-spread'
+      ]
+    },
+  },
+  // 全局变量设置
+  defineConstants: {},
+  // 小程序端专用配置
+  weapp: {
+    module: {
+      postcss: {
+        autoprefixer: {
+          enable: true
+        },
+        // 小程序端样式引用本地资源内联配置
+        url: {
+          enable: true,
+          limit: 10240
+        }
+      }
+    }
+  },
+  // H5 端专用配置
+  h5: {
+    publicPath: '/',
+    staticDirectory: 'static',
+    module: {
+      postcss: {
+        autoprefixer: {
+          enable: true
+        }
+      }
+    }
+  }
+}
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === 'development') {
+    return merge({}, config, require('./dev'))
+  }
+  return merge({}, config, require('./prod'))
+}

config/prod.js

+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+  },
+  weapp: {},
+  h5: {}
+}

package.json

+{
+	"name": "taro-ordering",
+	"version": "1.0.0",
+	"private": true,
+	"description": "A taro project",
+	"main": "index.js",
+	"scripts": {
+		"dev:weapp": "npm run build:weapp -- --watch",
+		"dev:h5": "npm run build:h5 -- --watch",
+		"dev:rn": "npm run build:rn -- --watch",
+		"build:weapp": "taro build --type weapp",
+		"build:h5": "taro build --type h5",
+		"build:rn": "taro build --type rn",
+		"tep": "node template"
+	},
+	"author": "",
+	"license": "MIT",
+	"dependencies": {
+		"@tarojs/async-await": "1.0.7",
+		"@tarojs/components": "1.0.7",
+		"@tarojs/redux": "1.0.7",
+		"@tarojs/redux-h5": "1.0.7",
+		"@tarojs/rn-runner": "1.0.7",
+		"@tarojs/router": "1.0.7",
+		"@tarojs/taro": "1.0.7",
+		"@tarojs/taro-h5": "1.0.7",
+		"@tarojs/taro-weapp": "1.0.7",
+		"dva-core": "^1.4.0",
+		"dva-loading": "^2.0.5",
+		"nervjs": "^1.3.0",
+		"redux": "^4.0.0",
+		"redux-logger": "^3.0.6",
+		"redux-thunk": "^2.3.0",
+		"taro-ui": "^1.3.5"
+	},
+	"devDependencies": {
+		"@tarojs/plugin-babel": "1.0.7",
+		"@tarojs/plugin-csso": "1.0.7",
+		"@tarojs/plugin-sass": "1.0.7",
+		"@tarojs/plugin-uglifyjs": "1.0.7",
+		"@tarojs/webpack-runner": "1.0.7",
+		"@types/react": "^16.4.8",
+		"@types/webpack-env": "^1.13.6",
+		"babel-eslint": "^8.2.3",
+		"babel-plugin-transform-class-properties": "^6.24.1",
+		"babel-plugin-transform-decorators-legacy": "^1.3.4",
+		"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
+		"babel-plugin-transform-object-rest-spread": "^6.26.0",
+		"babel-preset-env": "^1.6.1",
+		"eslint": "^4.19.1",
+		"eslint-config-taro": "1.0.7",
+		"eslint-plugin-import": "^2.12.0",
+		"eslint-plugin-react": "^7.8.2",
+		"eslint-plugin-taro": "1.0.7"
+	}
+}

project.config.json

+{
+  "miniprogramRoot": "./dist",
+  "projectname": "taro-msparis",
+  "description": "",
+  "appid": "wxd2a161b3c8752b6f",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

src/app.js

+import '@tarojs/async-await'
+import Taro, { Component } from '@tarojs/taro'
+import Home from './pages/home'
+import dva from './utils/dva'
+import models from './models'
+import { Provider } from '@tarojs/redux'
+
+import './styles/base.scss'
+
+
+const dvaApp = dva.createApp({
+  initialState: {},
+  models: models,
+});
+const store = dvaApp.getStore();
+
+class App extends Component {
+
+  config = {
+    pages: [
+      'pages/home/index',
+      'pages/cart/index',
+      'pages/user/index',
+    ],
+    window: {
+      backgroundTextStyle: 'dark',
+      navigationBarBackgroundColor: '#346b30',
+      navigationBarTitleText: '点餐小程序',
+      navigationBarTextStyle: 'white'
+    },
+    tabBar: {
+      list: [{
+        pagePath: "pages/home/index",
+        text: "首页",
+        iconPath: "./images/tab/icon-home.png",
+        selectedIconPath: "./images/tab/icon-home-selected.png"
+      }, {
+        pagePath: "pages/cart/index",
+        text: "订单",
+        iconPath: "./images/tab/icon-order.png",
+        selectedIconPath: "./images/tab/icon-order-selected.png"
+      },{
+        pagePath: "pages/user/index",
+        text: "更多",
+        iconPath: "./images/tab/icon-mine.png",
+        selectedIconPath: "./images/tab/icon-mine-selected.png"
+      }],
+      color: '#fff',
+      selectedColor: '#fff',
+      backgroundColor: '#346b30',
+      borderStyle: '#ccc'
+    }
+  }
+
+  componentDidMount() {
+
+  }
+
+  render() {
+    return (<Provider store={store}>
+      <Home/>
+    </Provider>);
+  }
+}
+
+Taro.render(<App/>, document.getElementById('app'))

src/components/Loading/Loading.js

+import { Component } from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import './loading.scss'
+
+export default class Loading extends Component {
+  render() {
+    return (
+      <View className="loading">
+        <View className="loading-chrysanthemum"></View>
+      </View>
+    )
+  }
+}

src/components/Loading/loading.scss

+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.loading-chrysanthemum {
+  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=') no-repeat;
+  background-size: cover;
+  width: 80px;
+  height: 80px;
+  -webkit-animation: loading 1s steps(12, end) infinite;
+  animation: loading 1s steps(12, end) infinite;
+}
+
+@-webkit-keyframes loading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+@keyframes loading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}

src/config/index.js

+// 请求连接前缀
+export const baseUrl = 'https://api.sxl.cn';
+
+// 输出日志信息
+export const noConsole = false;

src/index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <title>Taro</title>
+  <script>
+    !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
+  </script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/models/index.js

+import cart from '../pages/cart/model'
+import home from '../pages/home/model'
+import user from '../pages/user/model'
+import products from '../pages/productTabs/model'
+
+export default [
+  cart,
+  home,
+  user,
+  products,
+]

src/pages/cart/index.js

+import Taro, { Component } from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { connect } from '@tarojs/redux';
+import './index.scss';
+
+@connect(({cart}) => ({
+  ...cart,
+}))
+export default class Cart extends Component {
+  config = {
+    navigationBarTitleText: 'cart',
+  };
+
+  componentDidMount = () => {
+
+  };
+
+  render() {
+    return (
+      <View className="cart-page">
+        cart
+      </View>
+    )
+  }
+}

src/pages/cart/index.scss

+@import "../../styles/mixin";
+
+.cart-page {
+  @include wh(100%, 100%);
+}

src/pages/cart/model.js

+import * as cartApi from './service';
+
+export default {
+  namespace: 'cart',
+  state: {
+
+  },
+
+  effects: {
+    * effectsDemo(_, { call, put }) {
+      const { status, data } = yield call(cartApi.demo, {});
+      if (status === 'ok') {
+        yield put({ type: 'save',
+          payload: {
+            topData: data,
+          } });
+      }
+    },
+  },
+
+  reducers: {
+    save(state, { payload }) {
+      return { ...state, ...payload };
+    },
+  },
+
+};

src/pages/cart/service.js

+import Request from '../../utils/request';
+
+export const demo = data => Request({
+  url: '路径',
+  method: 'POST',
+  data,
+});

src/pages/home/index.js

+import Taro, { Component } from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { connect } from '@tarojs/redux';
+import { AtAvatar } from 'taro-ui'
+import ProductTabs from '../productTabs/productTabs'
+import './index.scss';
+
+@connect(({home}) => ({
+  ...home,
+}))
+export default class Index extends Component {
+  config = {
+    navigationBarTitleText: '菜单',
+  }
+
+  componentDidMount = () => {
+    this.props.dispatch({
+      type: 'home/load',
+    })
+  }
+
+  render() {
+    const { settings } = this.props
+    const storeFronts = settings.storefronts && settings.storefronts[0] || {}
+    return (
+      <View className="home-page">
+        <View className="store">
+          <View className="store-inner">
+            <View className="logo-wrap">
+              <AtAvatar className="logo" circle image="https://user-assets.sxlcdn.com/images/450112/Fp6dr7TBVawyKJqTTG40X_bVZ_Nd.jpg?imageMogr2/strip/auto-orient/thumbnail/2000x3000%3E/quality/90!/interlace/1/format/jpg" />
+            </View>
+            <View className="info">
+              <View className="name">{storeFronts.name}</View>
+              <View className="take-out-settings">外卖服务起送价10元 · 配送费2元 </View>
+            </View>
+          </View>
+        </View>
+        <ProductTabs />
+      </View>
+    )
+  }
+}
+

src/pages/home/index.scss

+@import "../../styles/mixin";
+
+.home-page {
+  @include wh(100%, 100%);
+
+  .store {
+    padding-top: 30px;
+    padding-bottom: 22px;
+    border-bottom: 1px solid #e8e8e8;
+
+    .store-inner {
+      display: flex;
+      .logo-wrap {
+        width: 200px;
+        text-align: center;
+        display:flex;
+        justify-content:center;
+        .logo {
+          width: 92px;
+          height: 92px;
+          border-radius: 50%;
+        }
+      }
+      .info {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .name {
+          font-weight: bold;
+          color: #000;
+          font-size: 34px;
+          padding-bottom: 6px;
+        }
+
+        .take-out-settings {
+          font-size: 26px;
+          color: #6d6d6d;
+        }
+      }
+    }
+  }
+}

src/pages/home/model.js

+import * as homeApi from './service';
+
+export default {
+  namespace: 'home',
+  state: {
+    settings: {},
+  },
+  effects: {
+    * load(_, {
+      call,
+      put
+    }) {
+      const { data } = yield call(homeApi.settings, {
+        siteId: '11536422',
+      })
+      yield put({
+        type: 'saveSettings',
+        payload: {
+          settings: data,
+        }
+      })
+    },
+  },
+  reducers: {
+    saveSettings(state, {
+      payload
+    }) {
+      return { ...state,
+        ...payload
+      };
+    },
+  },
+};

src/pages/home/service.js

+import Request from '../../utils/request';
+
+export const settings = data => Request({
+  url: `/r/v1/sites/${data.siteId}/restaurant/settings`,
+  method: 'GET',
+});

src/pages/productTabs/model.js

+import * as api from './service'
+
+export default {
+  namespace: 'products',
+  state: {
+    categories: [],
+    categoryId: null,
+    products: [],
+  },
+  effects: {
+    * categories(_, {
+      call,
+      put,
+    }) {
+      const { data } = yield call(api.categories, {
+        siteId: '11536422',
+      })
+      yield put({
+        type: 'save',
+        payload: {
+          categories: data
+        },
+      })
+      yield put({
+        type: 'save',
+        payload: {
+          categoryId: data && data.length && data[0].id,
+        },
+      })
+      yield put({
+        type: 'products',
+      })
+    },
+    * products(_, {
+      call,
+      put,
+      select,
+    }) {
+      const { categoryId } = yield select(state => state.products)
+      const { data } = yield call(api.products, {
+        storefrontsId: '14171',
+        categoryId,
+        from: 0,
+        per: 999,
+      })
+      yield put({
+        type: 'save',
+        payload: {
+          products: data.products
+        }
+      })
+    }
+  },
+  reducers: {
+    save (state, {
+      payload,
+    }) {
+      return {
+        ...state,
+        ...payload,
+      }
+    },
+  }
+}

src/pages/productTabs/productTabs.js

+import Taro, { Component } from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { AtTabs, AtTabsPane } from 'taro-ui'
+import { connect } from '@tarojs/redux'
+
+import Loading from '../../components/Loading/Loading'
+
+@connect(({ products, loading }) => ({
+  ...products,
+  ...loading,
+}))
+export default class ProductTabs extends Component {
+  handleClick (value) {
+    const { categories } = this.props
+    this.props.dispatch({
+      type: 'products/save',
+      payload: {
+        categoryId: categories[value].id,
+      }
+    })
+    this.props.dispatch({
+      type: 'products/products'
+    })
+    this.setState({
+      current: value,
+    })
+  }
+  componentDidMount() {
+    const { dispatch } = this.props
+    dispatch({
+      type: 'products/categories'
+    })
+  }
+
+  getTitle() {
+    const { categories } = this.props
+    const names = categories.map(category => {
+      return {
+        title: category.name,
+      }
+    })
+    return names
+  }
+
+  render () {
+    const { categories, categoryId, global } = this.props
+    const { current } = this.state
+    const tabList = this.getTitle()
+    return (
+      <AtTabs
+        current={current}
+        scroll
+        height='400px'
+        tabDirection='vertical'
+        tabList={tabList}
+        onClick={this.handleClick.bind(this)}>
+          {
+            global ?
+            (<Loading />) :
+            categories.map(category => {
+              return (
+                <AtTabsPane tabDirection='vertical' current={current} index={category.id} key={category.id}>
+                  <View style='font-size:18px;text-align:center;height:200px;'>标签页${category.id}的内容</View>
+                </AtTabsPane>
+              )
+            })
+          }
+        </AtTabs>
+    )
+  }
+}

src/pages/productTabs/service.js

+import Request from '../../utils/request';
+
+export const categories = data => Request({
+  url: `/r/v1/sites/${data.siteId}/restaurant/categories`,
+  method: 'GET',
+})
+
+export const products = data => {
+  const { storefrontsId, ...otherParams } = data
+  return Request({
+    url: `/r/v1/restaurant/storefronts/${storefrontsId}/products`,
+    method: 'GET',
+    data: otherParams,
+  })
+}

src/pages/user/index.js

+import Taro, { Component } from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { connect } from '@tarojs/redux';
+import './index.scss';
+
+@connect(({user}) => ({
+  ...user,
+}))
+export default class User extends Component {
+  config = {
+    navigationBarTitleText: 'user',
+  };
+
+  componentDidMount = () => {
+
+  };
+
+  render() {
+    return (
+      <View className="user-page">
+        user
+      </View>
+    )
+  }
+}

src/pages/user/index.scss

+@import "../../styles/mixin";
+
+.user-page {
+  @include wh(100%, 100%);
+}

src/pages/user/model.js

+import * as userApi from './service';
+
+export default {
+  namespace: 'user',
+  state: {
+
+  },
+
+  effects: {
+    * effectsDemo(_, { call, put }) {
+      const { status, data } = yield call(userApi.demo, {});
+      if (status === 'ok') {
+        yield put({ type: 'save',
+          payload: {
+            topData: data,
+          } });
+      }
+    },
+  },
+
+  reducers: {
+    save(state, { payload }) {
+      return { ...state, ...payload };
+    },
+  },
+
+};

src/pages/user/service.js

+import Request from '../../utils/request';
+
+export const demo = data => Request({
+  url: '路径',
+  method: 'POST',
+  data,
+});

src/styles/base.scss

+@import "./mixin";
+@import "./iconfont";
+
+page, body {
+  font-size: 32px;
+  height: 100%;
+  background-color: $bg-color-base;
+  color: $color-dark;
+  box-sizing: border-box;
+}
+image {
+  height: auto;
+}
+//******常用类******/
+.clearfix:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.clearfix {
+  zoom: 1;
+
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+.hide {
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.position-center {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  margin: auto;
+}

src/styles/iconfont.scss

+@font-face {
+	font-family: "iconfont_1520482582531";
+	src: url('https://static-rs.msparis.com/iconfont/fonts/iconfont_1520482582531.eot');
+	src: url('https://static-rs.msparis.com/iconfont/fonts/iconfont_1520482582531.eot?#iefix') format('eot'),
+		url('https://static-rs.msparis.com/iconfont/fonts/iconfont_1520482582531.ttf') format('truetype');
+}
+
+.iconfont {
+	font-family: "iconfont_1520482582531" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+.icon-10day:before {
+	content: "\E001";
+}
+
+.icon-15day:before {
+	content: "\E002";
+}
+
+.icon-4day:before {
+	content: "\E003";
+}
+
+.icon-5day:before {
+	content: "\E004";
+}
+
+.icon-7day:before {
+	content: "\E005";
+}
+
+.icon-addcolour:before {
+	content: "\E006";
+}
+
+.icon-arrowbuttombig:before {
+	content: "\E007";
+}
+
+.icon-arrowbuttomsmallcolour:before {
+	content: "\E008";
+}
+
+.icon-arrowbuttomsmall:before {
+	content: "\E009";
+}
+
+.icon-arrowsright:before {
+	content: "\E00A";
+}
+
+.icon-bagfill:before {
+	content: "\E00B";
+}
+
+.icon-bag:before {
+	content: "\E00C";
+}
+
+.icon-calendarright:before {
+	content: "\E00D";
+}
+
+.icon-circleround:before {
+	content: "\E00E";
+}
+
+.icon-clothefill:before {
+	content: "\E00F";
+}
+
+.icon-clothe:before {
+	content: "\E010";
+}
+
+.icon-coathangerfill:before {
+	content: "\E011";
+}
+
+.icon-coathanger:before {
+	content: "\E012";
+}
+
+.icon-correctrigh:before {
+	content: "\E013";
+}
+
+.icon-correctroundadd:before {
+	content: "\E014";
+}
+
+.icon-correctroundrightcolour:before {
+	content: "\E015";
+}
+
+.icon-correctroundright:before {
+	content: "\E016";
+}
+
+.icon-customerservice:before {
+	content: "\E017";
+}
+
+.icon-cyclecolour:before {
+	content: "\E018";
+}
+
+.icon-diamondgray:before {
+	content: "\E019";
+}
+
+.icon-doublearrowright:before {
+	content: "\E01A";
+}
+
+.icon-eyegray:before {
+	content: "\E01B";
+}
+
+.icon-focuscolour:before {
+	content: "\E01C";
+}
+
+.icon-focusgray:before {
+	content: "\E01D";
+}
+
+.icon-heartcolour:before {
+	content: "\E01E";
+}
+
+.icon-heartgray:before {
+	content: "\E01F";
+}
+
+.icon-heart:before {
+	content: "\E020";
+}
+
+.icon-homefill:before {
+	content: "\E021";
+}
+
+.icon-home:before {
+	content: "\E022";
+}
+
+.icon-loveexpresscolour:before {
+	content: "\E023";
+}
+
+.icon-numbercolour:before {
+	content: "\E024";
+}
+
+.icon-personmyfill:before {
+	content: "\E025";
+}
+
+.icon-personmy:before {
+	content: "\E026";
+}
+
+.icon-querycolour:before {
+	content: "\E027";
+}
+
+.icon-seacher:before {
+	content: "\E028";
+}
+
+.icon-tagcolour:before {
+	content: "\E029";
+}
+
+.icon-triangularcolour:before {
+	content: "\E02A";
+}
+
+.icon-triangulargray:before {
+	content: "\E02B";
+}
+
+.icon-xinxingshixin:before {
+	content: "\E02C";
+}
+
+.icon-xinxingkongxin:before {
+	content: "\E02D";
+}
+
+.icon-wodeshixin:before {
+	content: "\E02E";
+}
+
+.icon-wodekongxin:before {
+	content: "\E02F";
+}
+
+.icon-shoutidai:before {
+	content: "\E030";
+}
+
+.icon-xingxingshixin:before {
+	content: "\E031";
+}
+
+.icon-xingxingkongxin:before {
+	content: "\E032";
+}
+
+.icon-yifushixin:before {
+	content: "\E033";
+}
+
+.icon-yifukongxin:before {
+	content: "\E034";
+}
+
+.icon-yidaishixin:before {
+	content: "\E035";
+}
+
+.icon-yidaikongxin:before {
+	content: "\E036";
+}
+
+.icon-dingdanshixin:before {
+	content: "\E037";
+}
+
+.icon-dingdankongxin:before {
+	content: "\E038";
+}

src/styles/mixin.scss

+/* colors
+-------------------------- */
+$color-primary : #D87182 !default;
+$color-dark : #333 !default;
+$color-dark2 : #666 !default;
+$color-light: #888 !default;
+
+/* button-colors
+-------------------------- */
+$btn-active: #F26D83 !default;
+$btn-disabled: #CCC !default;
+
+$btn-disabled-1: mix(#fff, $btn-active, 70%) !default;
+/* 53a8ff */
+
+/* background-colors
+-------------------------- */
+$bg-color-base: #fff !default;
+$bg-color-light : #f9f9f9 !default; //页面浅灰背景&图片浅灰背景
+$bg-color-danger: #F9EFEF !default; //页面浅红背景&按钮边框
+$bg-color-panel: #EC5D75 !default;
+
+/* tag-colors
+-------------------------- */
+$tag-primary:#D87182 !default;
+$tag-dark:#555 !default;
+
+
+/* methods
+-------------------------- */
+// 背景图片地址和大小
+@mixin bg($url) {
+  background-image: url($url);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+// 定位上下左右居中
+@mixin center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+// 定位上下居中
+@mixin ct {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+// 定位左右居中
+@mixin cl {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+// 宽高
+@mixin wh($width, $height) {
+  width: $width;
+  height: $height;
+}
+
+// 字体大小，颜色
+@mixin sc($size, $color) {
+  font-size: $size;
+  color: $color;
+}

src/utils/dva.js

+import { create } from 'dva-core';
+import { createLogger } from 'redux-logger';
+import createLoading from 'dva-loading';
+
+let app;
+let store;
+let dispatch;
+
+function createApp(opt) {
+  // redux日志
+  // opt.onAction = [createLogger()];
+  app = create(opt);
+  app.use(createLoading({}));
+
+  if (!global.registered) opt.models.forEach(model => app.model(model));
+  global.registered = true;
+  app.start();
+
+  store = app._store;
+  app.getStore = () => store;
+
+  dispatch = store.dispatch;
+
+  app.dispatch = dispatch;
+  return app;
+}
+
+export default {
+  createApp,
+  getDispatch() {
+    return app.dispatch;
+  }
+}

src/utils/request.js

+import Taro from '@tarojs/taro';
+import { baseUrl, noConsole } from '../config';
+
+export default (options = { method: 'GET', data: {} }) => {
+  if (!noConsole) {
+    console.log(`${new Date().toLocaleString()}【 M=${options.url} 】P=${JSON.stringify(options.data)}`);
+  }
+  return Taro.request({
+    url: baseUrl + options.url,
+    data: options.data,
+    header: {
+      'Content-Type': 'application/json',
+    },
+    method: options.method.toUpperCase(),
+  }).then((res) => {
+    const { statusCode, data } = res;
+    if (statusCode >= 200 && statusCode < 300) {
+      if (!noConsole) {
+        console.log(`${new Date().toLocaleString()}【 M=${options.url} 】【接口响应：】`,res.data);
+      }
+      if (data.status !== 200) {
+        Taro.showToast({
+          title: `${res.data.meta.devMessage}~` || res.data.status,
+          icon: 'none',
+          mask: true,
+        });
+      }
+      return data;
+    } else {
+      throw new Error(`网络请求错误，状态码${statusCode}`);
+    }
+  })
+}

template.js

+/**
+ * pages模版快速生成脚本,执行命令 npm run tep `文件名`
+ */
+
+const fs = require('fs');
+
+const dirName = process.argv[2];
+
+if (!dirName) {
+  console.log('文件夹名称不能为空！');
+  console.log('示例：npm run tep test');
+  process.exit(0);
+}
+
+// 页面模版
+const indexTep = `import Taro, { Component } from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { connect } from '@tarojs/redux';
+import './index.scss';
+
+@connect(({${dirName}}) => ({
+  ...${dirName},
+}))
+export default class ${titleCase(dirName)} extends Component {
+  config = {
+    navigationBarTitleText: '${dirName}',
+  };
+
+  componentDidMount = () => {
+
+  };
+
+  render() {
+    return (
+      <View className="${dirName}-page">
+        ${dirName}
+      </View>
+    )
+  }
+}
+`;
+
+// scss文件模版
+const scssTep = `@import "../../styles/mixin";
+
+.${dirName}-page {
+  @include wh(100%, 100%);
+}
+`;
+
+// model文件模版
+const modelTep = `import * as ${dirName}Api from './service';
+
+export default {
+  namespace: '${dirName}',
+  state: {
+
+  },
+
+  effects: {
+    * effectsDemo(_, { call, put }) {
+      const { status, data } = yield call(${dirName}Api.demo, {});
+      if (status === 'ok') {
+        yield put({ type: 'save',
+          payload: {
+            topData: data,
+          } });
+      }
+    },
+  },
+
+  reducers: {
+    save(state, { payload }) {
+      return { ...state, ...payload };
+    },
+  },
+
+};
+`;
+
+
+// service页面模版
+const serviceTep = `import Request from '../../utils/request';
+
+export const demo = data => Request({
+  url: '路径',
+  method: 'POST',
+  data,
+});
+`;
+
+
+
+fs.mkdirSync(`./src/pages/${dirName}`); // mkdir $1
+process.chdir(`./src/pages/${dirName}`); // cd $1
+
+fs.writeFileSync('index.js', indexTep);
+fs.writeFileSync('index.scss', scssTep);
+fs.writeFileSync('model.js', modelTep);
+fs.writeFileSync('service.js', serviceTep);
+
+console.log(`模版${dirName}已创建,请手动增加models`);
+
+function titleCase(str) {
+  const array = str.toLowerCase().split(' ');
+  for (let i = 0; i < array.length; i++) {
+    array[i] = array[i][0].toUpperCase() + array[i].substring(1, array[i].length);
+  }
+  const string = array.join(' ');
+  return string;
+}
+
+process.exit(0);