添加页面

.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",
+  "plugins": ["typescript"]
+}

.gitignore

+dist/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store

config/dev.js

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

config/index.js

+const config = {
+  projectName: 'wx-school-app-public',
+  date: '2019-4-12',
+  designWidth: 750,
+  deviceRatio: {
+    '640': 2.34 / 2,
+    '750': 1,
+    '828': 1.81 / 2
+  },
+  sourceRoot: 'src',
+  outputRoot: 'dist',
+  plugins: {
+    babel: {
+      sourceMap: true,
+      presets: [
+        ['env', {
+          modules: false
+        }]
+      ],
+      plugins: [
+        'transform-decorators-legacy',
+        'transform-class-properties',
+        'transform-object-rest-spread'
+      ]
+    }
+  },
+  defineConstants: {
+  },
+  copy: {
+    patterns: [
+    ],
+    options: {
+    }
+  },
+  weapp: {
+    module: {
+      postcss: {
+        autoprefixer: {
+          enable: true,
+          config: {
+            browsers: [
+              'last 3 versions',
+              'Android >= 4.1',
+              'ios >= 8'
+            ]
+          }
+        },
+        pxtransform: {
+          enable: true,
+          config: {
+
+          }
+        },
+        url: {
+          enable: true,
+          config: {
+            limit: 10240 // 设定转换尺寸上限
+          }
+        },
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+          config: {
+            namingPattern: 'module', // 转换模式，取值为 global/module
+            generateScopedName: '[name]__[local]___[hash:base64:5]'
+          }
+        }
+      }
+    }
+  },
+  h5: {
+    publicPath: '/',
+    staticDirectory: 'static',
+    module: {
+      postcss: {
+        autoprefixer: {
+          enable: true,
+          config: {
+            browsers: [
+              'last 3 versions',
+              'Android >= 4.1',
+              'ios >= 8'
+            ]
+          }
+        },
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+          config: {
+            namingPattern: 'module', // 转换模式，取值为 global/module
+            generateScopedName: '[name]__[local]___[hash:base64:5]'
+          }
+        }
+      }
+    }
+  }
+}
+
+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: {}
+}

global.d.ts

+declare module "*.png";
+declare module "*.gif";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.svg";
+declare module "*.css";
+declare module "*.less";
+declare module "*.scss";
+declare module "*.sass";
+declare module "*.styl";

package.json

+{
+  "name": "wx-school-app-public",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@tarojs/async-await": "1.2.13",
+    "@tarojs/components": "1.2.13",
+    "@tarojs/redux": "1.2.13",
+    "@tarojs/redux-h5": "1.2.13",
+    "@tarojs/router": "1.2.13",
+    "@tarojs/taro": "1.2.13",
+    "@tarojs/taro-alipay": "1.2.13",
+    "@tarojs/taro-h5": "1.2.13",
+    "@tarojs/taro-swan": "1.2.13",
+    "@tarojs/taro-tt": "1.2.13",
+    "@tarojs/taro-weapp": "1.2.13",
+    "nervjs": "^1.3.9",
+    "nerv-devtools": "^1.3.9",
+    "redux": "^4.0.0",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^16.4.8",
+    "@types/webpack-env": "^1.13.6",
+    "@tarojs/plugin-babel": "1.2.13",
+    "@tarojs/plugin-csso": "1.2.13",
+    "@tarojs/plugin-sass": "1.2.13",
+    "@tarojs/plugin-uglifyjs": "1.2.13",
+    "@tarojs/webpack-runner": "1.2.13",
+    "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",
+    "babel-eslint": "^8.2.3",
+    "eslint": "^4.19.1",
+    "eslint-config-taro": "1.2.13",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-taro": "1.2.13",
+    "eslint-plugin-typescript": "^0.12.0",
+    "typescript": "^3.0.1"
+  }
+}

project.config.json

+{
+  "miniprogramRoot": "./dist",
+  "projectname": "wx-school-app-public",
+  "description": "",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

src/actions/counter.ts

+import {
+  ADD,
+  MINUS
+} from '../constants/counter'
+
+export const add = () => {
+  return {
+    type: ADD
+  }
+}
+export const minus = () => {
+  return {
+    type: MINUS
+  }
+}
+
+// 异步的action
+export function asyncAdd () {
+  return dispatch => {
+    setTimeout(() => {
+      dispatch(add())
+    }, 2000)
+  }
+}

src/app.scss

+button {
+  height: 90px;
+  line-height: 90px;
+  font-size: 32px;
+  background-color: #6180f4;
+  color: #fff;
+}

src/app.tsx

+import '@tarojs/async-await';
+import Taro, { Component, Config } from '@tarojs/taro';
+import { Provider } from '@tarojs/redux';
+
+import Index from './pages/index';
+
+import configStore from './store';
+
+import './app.scss';
+
+// 如果需要在 h5 环境中开启 React Devtools
+// 取消以下注释：
+// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
+//   require('nerv-devtools')
+// }
+
+const store = configStore();
+
+class App extends Component {
+  /**
+   * 指定config的类型声明为: Taro.Config
+   *
+   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
+   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
+   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
+   */
+  config: Config = {
+    pages: [
+      'pages/pay/pay',
+      'pages/index/index',
+    ],
+    window: {
+      backgroundTextStyle: 'light',
+      navigationBarBackgroundColor: '#fff',
+      navigationBarTitleText: 'WeChat',
+      navigationBarTextStyle: 'black',
+    },
+  };
+
+  // 在 App 类中的 render() 函数没有实际作用
+  // 请勿修改此函数
+  render() {
+    return (
+      <Provider store={store}>
+        <Index />
+      </Provider>
+    );
+  }
+}
+
+Taro.render(<App />, document.getElementById('app'));

src/constants/counter.ts

+export const ADD = 'ADD'
+export const MINUS = 'MINUS'

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/pages/index/index.scss

+.index {
+  .scan-icon {
+    width: 460px;
+    height: 460px;
+    margin: 238px auto 168px;
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .scan-text {
+    text-align: center;
+    font-size: 28px;
+    line-height: 52px;
+  }
+}

src/pages/index/index.tsx

+import { ComponentClass } from 'react';
+import Taro, { Component, Config } from '@tarojs/taro';
+import { View, Image, Text } from '@tarojs/components';
+import { connect } from '@tarojs/redux';
+
+import { add, minus, asyncAdd } from '../../actions/counter';
+import scanIcon from '../../images/icon_s@2x.png';
+
+import './index.scss';
+
+// #region 书写注意
+//
+// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
+// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
+// 这样才能完成类型检查和 IDE 的自动提示
+// 使用函数模式则无此限制
+// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
+//
+// #endregion
+
+type PageStateProps = {
+  counter: {
+    num: number;
+  };
+};
+
+type PageDispatchProps = {
+  add: () => void;
+  dec: () => void;
+  asyncAdd: () => any;
+};
+
+type PageOwnProps = {};
+
+type PageState = {};
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps;
+
+interface Index {
+  props: IProps;
+}
+
+@connect(
+  ({ counter }) => ({
+    counter,
+  }),
+  dispatch => ({
+    add() {
+      dispatch(add());
+    },
+    dec() {
+      dispatch(minus());
+    },
+    asyncAdd() {
+      dispatch(asyncAdd());
+    },
+  }),
+)
+class Index extends Component {
+  /**
+   * 指定config的类型声明为: Taro.Config
+   *
+   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
+   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
+   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
+   */
+  config: Config = {
+    navigationBarTitleText: '多彩自助服务',
+  };
+
+  clickHandle() {
+    Taro.navigateTo({
+      url: '/pages/pay/pay',
+    });
+  }
+
+  render() {
+    return (
+      <View className='index'>
+        <View className='scan-icon' onClick={this.clickHandle}>
+          <Image src={scanIcon} />
+        </View>
+        <View className='scan-text'>马上扫一扫</View>
+        <View className='scan-text'>使用多彩自助服务</View>
+      </View>
+    );
+  }
+}
+
+// #region 导出注意
+//
+// 经过上面的声明后需要将导出的 Taro.Component 子类修改为子类本身的 props 属性
+// 这样在使用这个子类时 Ts 才不会提示缺少 JSX 类型参数错误
+//
+// #endregion
+
+export default Index as ComponentClass<PageOwnProps, PageState>;

src/pages/pay/pay.scss

+.Pay {
+  .Pay-info {
+    padding: 40px 32px;
+    font-size: 28px;
+    color: #333;
+    padding-bottom: 30px;
+    border-bottom: 1px dotted #e1e1e1;
+    .Pay-info-item {
+      line-height: 60px;
+      display: flex;
+      justify-content: space-between;
+      .Pay-info-rate {
+        line-height: 40px;
+      }
+    }
+  }
+  .Pay-tip {
+    margin: 38px 32px 30px;
+    color: #ff4b4b;
+    font-size: 24px;
+    line-height: 34px;
+  }
+  .Pay-money {
+    display: flex;
+    flex-wrap: wrap;
+    width: 714px;
+    margin: 0 auto;
+    .Pay-money-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      width: 218px;
+      height: 160px;
+      font-size: 28px;
+      border-radius: 24px;
+      border: 1px solid #ccc;
+      margin-bottom: 16px;
+      margin-right: 16px;
+      &.seleted {
+        border-color: #6180f4;
+        color: #6180f4;
+      }
+    }
+  }
+  .Pay-btn {
+    margin: 20px 32px 0;
+  }
+}

src/pages/pay/pay.tsx

+import { Component, Config } from '@tarojs/taro';
+import { ComponentClass } from 'react';
+import { View, Text, Button, Input } from '@tarojs/components';
+
+class Pay extends Component {
+  config: Config = {
+    navigationBarTitleText: '支付金额',
+  };
+  render() {
+    return (
+      <View className='Pay'>
+        <View className='Pay-info'>
+          <View className='Pay-info-item'>
+            <Text>服务类型</Text>
+            <Text>饮水</Text>
+          </View>
+          <View className='Pay-info-item'>
+            <Text>设备编号</Text>
+            <Text>SN100089078</Text>
+          </View>
+          <View className='Pay-info-item'>
+            <Text>设备位置</Text>
+            <Text>天信苑A幢1栋2302门口</Text>
+          </View>
+          <View className='Pay-info-item'>
+            <Text>适用费率</Text>
+            <View className='Pay-info-rate'>
+              <View>
+                <Text>冷水</Text>
+                <Text>0.02元/100ml</Text>
+              </View>
+              <View>
+                <Text>热水</Text>
+                <Text>0.02元/100ml</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View className='Pay-tip'>
+          温馨提示：如本次预付款未全部使用，系统将在使用结束后半小时内自动退还剩余金额，请留意查收！
+        </View>
+        <View className='Pay-money'>
+          <View className='Pay-money-item seleted'>0.50元</View>
+          <View className='Pay-money-item'>1.00元</View>
+          <View className='Pay-money-item'>2.00元</View>
+          <View className='Pay-money-item'>5.00元</View>
+          <Input className='Pay-money-item' placeholder='输入>0.5数额' />
+        </View>
+        <Button className='Pay-btn'>确定支付</Button>
+      </View>
+    );
+  }
+}
+
+export default Pay as ComponentClass;

src/reducers/counter.ts

+import { ADD, MINUS } from '../constants/counter'
+
+const INITIAL_STATE = {
+  num: 0
+}
+
+export default function counter (state = INITIAL_STATE, action) {
+  switch (action.type) {
+    case ADD:
+      return {
+        ...state,
+        num: state.num + 1
+      }
+     case MINUS:
+       return {
+         ...state,
+         num: state.num - 1
+       }
+     default:
+       return state
+  }
+}

src/reducers/index.ts

+import { combineReducers } from 'redux'
+import counter from './counter'
+
+export default combineReducers({
+  counter
+})

src/store/index.ts

+import { createStore, applyMiddleware, compose } from 'redux'
+import thunkMiddleware from 'redux-thunk'
+import rootReducer from '../reducers'
+
+const composeEnhancers =
+  typeof window === 'object' &&
+  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
+    }) : compose
+
+const middlewares = [
+  thunkMiddleware
+]
+
+if (process.env.NODE_ENV === 'development') {
+  middlewares.push(require('redux-logger').createLogger())
+}
+
+const enhancer = composeEnhancers(
+  applyMiddleware(...middlewares),
+  // other store enhancers if any
+)
+
+export default function configStore () {
+  const store = createStore(rootReducer, enhancer)
+  return store
+}

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "outDir": "lib",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "jsx": "preserve",
+    "jsxFactory": "Taro.createElement",
+    "allowJs": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ],
+  "compileOnSave": false
+}