HW 3 年 前
コミット
b8559875f5
共有15 個のファイルを変更した294 個の追加0 個の削除を含む
  1. 9 0
      config/dev.js
  2. 70 0
      config/index.js
  3. 18 0
      config/prod.js
  4. 24 0
      src/actions/counter.js
  5. 11 0
      src/app.config.js
  6. 30 0
      src/app.jsx
  7. 0 0
      src/app.less
  8. 2 0
      src/constants/counter.js
  9. 19 0
      src/index.html
  10. 3 0
      src/pages/index/index.config.js
  11. 48 0
      src/pages/index/index.jsx
  12. 4 0
      src/pages/index/index.less
  13. 22 0
      src/reducers/counter.js
  14. 6 0
      src/reducers/index.js
  15. 28 0
      src/store/index.js

+ 9 - 0
config/dev.js

@@ -0,0 +1,9 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {}
+}

+ 70 - 0
config/index.js

@@ -0,0 +1,70 @@
+const config = {
+  projectName: 'kede-tool-weapp',
+  date: '2021-5-6',
+  designWidth: 750,
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2
+  },
+  sourceRoot: 'src',
+  outputRoot: 'dist',
+  plugins: [],
+  defineConstants: {
+  },
+  copy: {
+    patterns: [
+    ],
+    options: {
+    }
+  },
+  framework: 'react',
+  mini: {
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {
+
+        }
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 1024 // 设定转换尺寸上限
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式,取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  h5: {
+    publicPath: '/',
+    staticDirectory: 'static',
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+        }
+      },
+      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'))
+}

+ 18 - 0
config/prod.js

@@ -0,0 +1,18 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    /**
+     * 如果h5端编译后体积过大,可以使用webpack-bundle-analyzer插件对打包体积进行分析。
+     * 参考代码如下:
+     * webpackChain (chain) {
+     *   chain.plugin('analyzer')
+     *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+     * }
+     */
+  }
+}

+ 24 - 0
src/actions/counter.js

@@ -0,0 +1,24 @@
+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)
+  }
+}

+ 11 - 0
src/app.config.js

@@ -0,0 +1,11 @@
+export default {
+  pages: [
+    'pages/index/index'
+  ],
+  window: {
+    backgroundTextStyle: 'light',
+    navigationBarBackgroundColor: '#fff',
+    navigationBarTitleText: 'WeChat',
+    navigationBarTextStyle: 'black'
+  }
+}

+ 30 - 0
src/app.jsx

@@ -0,0 +1,30 @@
+import { Component } from 'react'
+import { Provider } from 'react-redux'
+
+import configStore from './store'
+
+import './app.less'
+
+const store = configStore()
+
+class App extends Component {
+  componentDidMount () {}
+
+  componentDidShow () {}
+
+  componentDidHide () {}
+
+  componentDidCatchError () {}
+
+  // 在 App 类中的 render() 函数没有实际作用
+  // 请勿修改此函数
+  render () {
+    return (
+      <Provider store={store}>
+        {this.props.children}
+      </Provider>
+    )
+  }
+}
+
+export default App

+ 0 - 0
src/app.less


+ 2 - 0
src/constants/counter.js

@@ -0,0 +1,2 @@
+export const ADD = 'ADD'
+export const MINUS = 'MINUS'

+ 19 - 0
src/index.html

@@ -0,0 +1,19 @@
+<!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></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>

+ 3 - 0
src/pages/index/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '首页'
+}

+ 48 - 0
src/pages/index/index.jsx

@@ -0,0 +1,48 @@
+import { Component } from 'react'
+import { connect } from 'react-redux'
+import { View, Button, Text } from '@tarojs/components'
+
+import { add, minus, asyncAdd } from '../../actions/counter'
+
+import './index.less'
+
+
+@connect(({ counter }) => ({
+  counter
+}), (dispatch) => ({
+  add () {
+    dispatch(add())
+  },
+  dec () {
+    dispatch(minus())
+  },
+  asyncAdd () {
+    dispatch(asyncAdd())
+  }
+}))
+class Index extends Component {
+  componentWillReceiveProps (nextProps) {
+    console.log(this.props, nextProps)
+  }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        <Button className='add_btn' onClick={this.props.add}>+</Button>
+        <Button className='dec_btn' onClick={this.props.dec}>-</Button>
+        <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
+        <View><Text>{this.props.counter.num}</Text></View>
+        <View><Text>Hello, World</Text></View>
+      </View>
+    )
+  }
+}
+
+export default Index
+

+ 4 - 0
src/pages/index/index.less

@@ -0,0 +1,4 @@
+.index {
+  flex-direction: column;
+  width: 100%;
+}

+ 22 - 0
src/reducers/counter.js

@@ -0,0 +1,22 @@
+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
+  }
+}

+ 6 - 0
src/reducers/index.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux'
+import counter from './counter'
+
+export default combineReducers({
+  counter
+})

+ 28 - 0
src/store/index.js

@@ -0,0 +1,28 @@
+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' && process.env.TARO_ENV !== 'quickapp') {
+  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
+}