pwa的demo

ruanjiayou · Jun 24, 2019 · 877b2f8 · 877b2f8
1 parent ec55ec2
commit 877b2f8
Show file tree

Hide file tree

Showing 26 changed files with 572 additions and 0 deletions.
diff --git a/pwa/demo/.env b/pwa/demo/.env
@@ -0,0 +1 @@
+# PUBLIC_URL=/
diff --git a/pwa/demo/.gitignore b/pwa/demo/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+build/
+.storybook/
+converage/
+**/npm-debug.log
diff --git a/pwa/demo/jsconfig.json b/pwa/demo/jsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "rootDir": "src",
+    "baseUrl": "src"
+  },
+  "include": [
+    "src",
+    "node_modules"
+  ]
+}
diff --git a/pwa/demo/package.json b/pwa/demo/package.json
@@ -0,0 +1,69 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "description": "pwa react demo",
+  "main": "index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "build-dev": "PUBLC_URL=/ react-scripts build",
+    "test": "react-scripts test"
+  },
+  "babel": {
+    "presets": [
+      "es2015"
+    ],
+    "plugins": [
+      "add-module-exports",
+      "babel-plugin-bulk-import",
+      [
+        "import",
+        {
+          "libraryName": "antd-mobile",
+          "style": false
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@csstools/normalize.css": "^10.1.0",
+    "antd-mobile": "^2.2.14",
+    "axios": "^0.19.0",
+    "date-fns": "^1.30.1",
+    "lodash": "^4.17.11",
+    "mobx": "^5.10.1",
+    "mobx-react-lite": "^1.4.0",
+    "mobx-state-tree": "^3.14.0",
+    "qs": "^6.7.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
+    "react-scripts": "^3.0.1",
+    "react-use": "^9.7.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-decorators": "^7.4.4",
+    "babel-plugin-import": "^1.12.0",
+    "mockjs": "^1.0.1-beta3"
+  },
+  "keywords": [
+    "pwa",
+    "react",
+    "demo"
+  ],
+  "author": "ruanjiayou",
+  "license": "ISC",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/pwa/demo/public/index.html b/pwa/demo/public/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover;">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="demo">
+  <meta name="" content="">
+  <title>demo</title>
+  <link rel="shortcut icon" href="/favicon.ico">
+  <!-- 兼容iOS: pwa显示桌面图标 -->
+  <link rel="apple-touch-icon" size="180xx180" href="/logo.png">
+  <link rel="manifest" href="/manifest.json">
+  <style>
+    html,
+    body,
+    #root {
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <noscript>请允许执行JavaScript</noscript>
+  <div id="root">
+
+  </div>
+</body>
+
+</html>
diff --git a/pwa/demo/public/manifest.json b/pwa/demo/public/manifest.json
@@ -0,0 +1,16 @@
+{
+  "name": "demo",
+  "short_name": "demo",
+  "lang": "zh-cn",
+  "icons": [
+    {
+      "src": "",
+      "sizes": "32x32",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#3E4EB8",
+  "theme_color": "#2F3BA2"
+}
diff --git a/pwa/demo/readme.md b/pwa/demo/readme.md
@@ -0,0 +1,6 @@
+# PWA学习实战
+
+- git clone
+- cd pwa
+- npm i
+- npm start
diff --git a/pwa/demo/src/app.js b/pwa/demo/src/app.js
@@ -0,0 +1,16 @@
+import React, { useCallback, useState, Fragment } from 'react';
+import { Observer } from 'mobx-react-lite';
+import 'antd-mobile/dist/antd-mobile.css';
+import RouterRoot from './routers';
+
+function App() {
+  return <Fragment>
+    <Observer>
+      {() => {
+        return <RouterRoot></RouterRoot>
+      }}
+    </Observer>
+  </Fragment>
+}
+
+export default App;
diff --git a/pwa/demo/src/components/Auth/Login/index.css b/pwa/demo/src/components/Auth/Login/index.css
@@ -0,0 +1,3 @@
+.d-login-box > div {
+  margin-top: -10%;
+}
diff --git a/pwa/demo/src/components/Auth/Login/index.js b/pwa/demo/src/components/Auth/Login/index.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Observer, useLocalStore } from 'mobx-react-lite';
+import { useContext } from '../../../contexts/routerContext';
+import { InputItem, List, Button, Toast } from 'antd-mobile';
+
+import services from '../../../services';
+import storage from '../../../utils/storage';
+
+import './index.css';
+import '../../common.css';
+
+async function login(router, store) {
+  if (store.username && store.password) {
+    store.isLoading = true;
+    let res = await services.login(store);
+    store.isLoading = false;
+    if (!res) {
+      return Toast.info('请求失败!');
+    }
+    if (res.code !== 0) {
+      return Toast.info(res.message);
+    } else {
+      storage.setValue('access-token', res.data.token);
+      router.history.push({
+        pathname: '/'
+      });
+    }
+  } else {
+    Toast.info('请输入账号密码!');
+  }
+}
+
+export default function ({ self }) {
+  let router = useContext();
+  let store = useLocalStore(() => ({
+    isLoading: false,
+    username: '',
+    password: ''
+  }));
+  return <Observer>
+    {() => {
+      return <div className="dd-common-centerXY">
+        <List>
+          <List.Item>
+            <InputItem
+              type="text"
+              placeholder="用户名"
+              style={{ border: '0 none' }}
+              defaultValue={store.username}
+              onBlur={value => store.username = value}
+            >
+              用户名
+            </InputItem>
+          </List.Item>
+          <List.Item>
+            <InputItem
+              type="password"
+              placeholder="密码"
+              defaultValue=""
+              style={{ border: '0 none' }}
+              onBlur={value => store.password = value}
+            >
+              密码
+            </InputItem>
+          </List.Item>
+          <List.Item>
+            <Button loading={store.isLoading} disabled={store.isLoading} type="primary" onClick={() => login(router, store)}>登录</Button>
+          </List.Item>
+        </List>
+      </div>
+    }}
+  </Observer>
+}
diff --git a/pwa/demo/src/components/Home/index.js b/pwa/demo/src/components/Home/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import '../common.css'
+
+export default ({ self }) => {
+    return <div className="dd-common-centerXY">Hello World!</div>
+};
diff --git a/pwa/demo/src/components/common.css b/pwa/demo/src/components/common.css
@@ -0,0 +1,6 @@
+.dd-common-centerXY {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/pwa/demo/src/config.js b/pwa/demo/src/config.js
@@ -0,0 +1,13 @@
+export default {
+  isDebug() {
+    return process.env.NODE_ENV !== 'production';
+  },
+  config: {
+    production: {
+      host: 'http://localhost:3000/v1',
+    },
+    dev: {
+      host: 'http://pwa.jiayou.com',
+    }
+  }
+};
diff --git a/pwa/demo/src/contexts/routerContext/index.js b/pwa/demo/src/contexts/routerContext/index.js
@@ -0,0 +1,99 @@
+import React, { useContext as useReactContext, useState } from 'react';
+import RouterModel from '../../models/router';
+/**
+ * back()
+ * push()
+ * replace()
+ */
+const Context = React.createContext(null);
+const routerState = RouterModel.create({});
+
+/**
+ * 使用:
+ * 创建上下文
+ * import createProvider from this
+ * const [router, routerContext]=createProvider(history,location);
+ * <routerContext.Provider value={router}>
+ *   ...
+ * </routerContext.Provider>
+ * 使用上下文
+ * import useContext from this
+ * let router = useContext();
+ * router.goto(...);
+ */
+export function useProvider(history, location) {
+  let [state] = useState(() => {
+    let route = {
+      history,
+      routerState,
+      get params() {
+        return {}
+      },
+      back() {
+        const { userClick, login } = history.location.state || {};
+        if (login) {
+          // 登录跳转进来的页面
+          route.backToRoot();
+        } else if (userClick) {
+          // 正常操作进入
+          route.goBack();
+        } else {
+          // 可能是直接通过URL进来的
+          route.backToRoot();
+        }
+      },
+      backToRoot(params, state) {
+        const { pathname, search } = getBackToRootLocation(params);
+        history.push({
+          pathname,
+          search,
+          state: {
+            login: true,
+            userClick: true,
+            ...state
+          }
+        });
+      },
+      gotoLoginTarget() {
+        // target 存于全局store中
+        // 因为某种原因被强制跳到login,登录后返回原来的位置
+        // getStore => 如果有则跳转,否则到首页
+        // TODO:
+      },
+      pushView({ viewName, params, state }) {
+        state = state || {};
+        state.userClick = true;
+        let { pathname, search } = getLocation();
+        history.push({
+          pathname,
+          search,
+          state
+        });
+      },
+      replaceView({ viewName, params, state }) {
+        state = state || {};
+        state.userClick = true;
+        let { pathname, search } = getLocation();
+        history.replace({
+          pathname,
+          search,
+          state
+        });
+      }
+    };
+    return route;
+  });
+  return [state, Context];
+}
+
+export function useContext() {
+  return useReactContext(Context);
+}
+
+function getLocation() {
+
+}
+
+function getBackToRootLocation() {
+
+}
diff --git a/pwa/demo/src/global-state.js b/pwa/demo/src/global-state.js
@@ -0,0 +1,9 @@
+import userInfoModel from './models/userInfo';
+
+const userInfo = userInfoModel.create({});
+const target = {};
+
+export default {
+  target,
+  userInfo,
+};