Skip to content

F
fe-app-h5
Commit 81bf0869 by 万亚飞
Options

fix bug

parent e954181a
Showing with 90 additions and 69 deletions
.gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
/.idea /.idea
# dependencies
/node_modules /node_modules
# production
/build /build
# misc
.DS_Store .DS_Store
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
......
README.md
# React-webpack ------基于antd-mobile等库的一套移动端完美脚手架配置 # React-webpack ------基于 antd-mobile 等库的一套移动端完美脚手架配置
# 包管理器使用 yarn,下载后 yarn init ,然后 yarn 即可获取所有依赖
## 超越京东的优化程度 首屏的load事件触发不到0.4s - 项目是移动端 react antd-mobile better-scorll material-design redux react-redux 的结合
React 的最新配置
# 包管理器使用yarn,下载后 yarn init ,然后 yarn 即可获取所有依赖
* 项目是移动端react antd-mobile better-scorll material-design redux react-redux 的结合
React的最新配置
* 实现需求：
* 识别JSX文件
* 识别箭头函数、识别async函数
* 支持Ant-Design-mobile的按需加载
* 支持babel-polyfill按需加载、better-scroll
* 支持预请求，服务端渲染的懒加载
* 支持预渲染，SSR，服务端渲染首屏，首屏load事件仅需要0.4秒不到的时间
* tree shaking 摇树优化 删除掉无用代码
* PWA功能，热刷新，安装后立即接管浏览器 离线后仍让可以访问网站 还可以在手机上添加网站到桌面使用
* CSS模块化，不怕命名冲突
* 小图片的base64处理
* 文件后缀省掉jsx js json等
* 实现React懒加载，按需加载 ， 代码分割 并且支持服务端渲染
* 支持less sass stylus等预处理
* code spliting 优化首屏加载时间 不让一个文件体积过大
* 提取公共代码，打包成一个chunk
* 每个chunk有对应的chunkhash,每个文件有对应的contenthash,方便浏览器区别缓存
* 图片压缩
* CSS压缩
* 增加CSS前缀 兼容各种浏览器
* 对于各种不同文件打包输出指定文件夹下
* 缓存babel的编译结果，加快编译速度
* 每个入口文件，对应一个chunk，打包出来后对应一个文件 也是code spliting
* 删除HTML文件的注释等无用内容
* 每次编译删除旧的打包代码
* 将CSS文件单独抽取出来
* 让babel不仅缓存编译结果，还在第一次编译后开启多线程编译，极大加快构建速度
* 等等....
config/webpack.dev.js
...@@ -108,6 +108,7 @@ module.exports = { ...@@ -108,6 +108,7 @@ module.exports = {
mode: 'development', mode: 'development',
devServer: { devServer: {
contentBase: '../build', contentBase: '../build',
host: '0.0.0.0',
open: true, open: true,
port: 5000, port: 5000,
hot: true hot: true
......
dist/index.html
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="dns-prefetch" href="http://192.168.48.140"><link rel="dns-prefetch" href="http://192.168.48.140:8080"><title>Document</title><link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"><link href="vendors~app.b1ea6b3e.css" rel="stylesheet"><link href="app.5d542828.css" rel="stylesheet"><link as="script" href="app.195e856e.js" rel="preload"><link as="style" href="app.5d542828.css" rel="preload"><link as="script" href="runtime~app.558836ef.js" rel="preload"><link as="script" href="runtime~vendor.2d1aae0e.js" rel="preload"><link as="script" href="vendor.291365be.js" rel="preload"><link as="script" href="vendors~app.8ec15845.js" rel="preload"><link as="style" href="vendors~app.b1ea6b3e.css" rel="preload"></head><body><div id="root"></div><script type="text/javascript" src="runtime~app.558836ef.js"></script><script type="text/javascript" src="vendors~app.8ec15845.js"></script><script type="text/javascript" src="app.195e856e.js"></script><script type="text/javascript" src="runtime~vendor.2d1aae0e.js"></script><script type="text/javascript" src="vendor.291365be.js"></script></body><script>window.onload=function(){var n=document.createElement("style"),e=document.documentElement.clientWidth/16;n.innerHTML="html{font-size:"+e+"px !important}",document.body.appendChild(n)}</script></html> <!doctype html>
\ No newline at end of file <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="dns-prefetch" href="http://192.168.48.140">
<link rel="dns-prefetch" href="http://192.168.48.140:8080">
<title>Document</title>
<link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
<link href="vendors~app.b1ea6b3e.css" rel="stylesheet">
<link href="app.5d542828.css" rel="stylesheet">
<link as="script" href="app.195e856e.js" rel="preload">
<link as="style" href="app.5d542828.css" rel="preload">
<link as="script" href="runtime~app.558836ef.js" rel="preload">
<link as="script" href="runtime~vendor.2d1aae0e.js" rel="preload">
<link as="script" href="vendor.291365be.js" rel="preload">
<link as="script" href="vendors~app.8ec15845.js" rel="preload">
<link as="style" href="vendors~app.b1ea6b3e.css" rel="preload">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="runtime~app.558836ef.js"></script>
<script type="text/javascript" src="vendors~app.8ec15845.js"></script>
<script type="text/javascript" src="app.195e856e.js"></script>
<script type="text/javascript" src="runtime~vendor.2d1aae0e.js"></script>
<script type="text/javascript" src="vendor.291365be.js"></script>
</body>
<script>
window.onload = function () {
var n = document.createElement("style"), e = document.documentElement.clientWidth / 16; n.innerHTML = "html{font-size:" + e + "px !important}", document.body.appendChild(n)
}</script>
</html>
\ No newline at end of file
public/index.html
...@@ -5,10 +5,12 @@ ...@@ -5,10 +5,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="dns-prefetch" href='http://192.168.48.140'> <meta name="keywords" content="健康,健康心理测试,健康在线心理测试,健康免费心理测试,健康心理测试题,健康心理测试小游戏,健康心理测试工具" />
<link rel="dns-prefetch" href='http://192.168.48.140:8080'> <meta name="description" content="壹点灵心理测试频道为您提供专业，贴心的免费健康心理测试题库，和免费的健康心理测试小游戏，动动手指，立刻免费在线健康心理测试。" />
<title>Document</title> <!-- <link rel="dns-prefetch" href='http://192.168.48.140'>
<link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"> <link rel="dns-prefetch" href='http://192.168.48.140:8080'> -->
<title>壹点零</title>
<!-- <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"> -->
</head> </head>
<body> <body>
......
src/App.jsx
...@@ -26,8 +26,9 @@ class App extends React.Component { ...@@ -26,8 +26,9 @@ class App extends React.Component {
storage.setSS('urlQuery', this.analysisQuery()); storage.setSS('urlQuery', this.analysisQuery());
} }
} }
componentDidMount() {}
analysisQuery() { analysisQuery() {
let search = this.props.location.search; let search = location.search;
if (!search) return ''; if (!search) return '';
search = search.substr(1).split('&'); search = search.substr(1).split('&');
let obj = {}; let obj = {};
......
src/pages/user/JobList.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Modal, Toast } from 'antd-mobile'; import { Modal, Toast } from 'antd-mobile';
import classNames from 'classnames'; import classNames from 'classnames';
import Layout from '../../Components/static/Layout/Layout'; import Layout from '../../Components/static/Layout/Layout';
...@@ -6,31 +7,28 @@ import TrainItem from '../../Components/page/user/TrainItem'; ...@@ -6,31 +7,28 @@ import TrainItem from '../../Components/page/user/TrainItem';
import TabBar from '../../Components/page/user/TabBar'; import TabBar from '../../Components/page/user/TabBar';
import { MATERIAL_ARR } from '../../static/js/constant'; import { MATERIAL_ARR } from '../../static/js/constant';
import app from '../../static/js/native';
import fetch from '../../api/fetch'; import fetch from '../../api/fetch';
import { getParameterByName } from '../../utils/common'; import { getParameterByName } from '../../utils/common';
import '@/static/styles/user/train-list.less'; import '@/static/styles/user/train-list.less';
function AddView(props) { function AddView(props) {
console.log(props);
return ( return (
<div className="bottom-operate"> <div className="bottom-operate">
{ <Link className="am-button am-button-primary" to={`/user/job/add?index=${props.tabIndex}`}>
//<Link prefetch as={`/new/user/job/add?index=${props.tabIndex}`} href={`/User/addMaterial`}> 添加{MATERIAL_ARR[props.tabIndex]}
} </Link>
<button className="am-button am-button-primary">添加{MATERIAL_ARR[props.tabIndex]}</button>
{
//</Link>
//<Link prefetch as={`/new/user/job/add?index=${props.tabIndex}`} href={`/User/addMaterial`}>
}
</div> </div>
); );
} }
function NoDataView(props) { function NoDataView(props) {
return ( return (
<div className="add-train"> <Link className="add-train" to={`/user/job/add?index=${props.tabIndex}`}>
<i className="y-icon-add" /> <i className="y-icon-add" />
<span>添加{MATERIAL_ARR[props.tabIndex]}</span> <span>添加{MATERIAL_ARR[props.tabIndex]}</span>
</div> </Link>
); );
} }
function ListItemView(props) { function ListItemView(props) {
...@@ -71,6 +69,8 @@ class JobList extends Component { ...@@ -71,6 +69,8 @@ class JobList extends Component {
}); });
} }
componentDidMount() { componentDidMount() {
app().downRefresh(true);
app().notRefresh(true);
this.initData(); this.initData();
} }
initData = () => { initData = () => {
......
src/pages/user/TrainList.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Modal, Toast } from 'antd-mobile'; import { Modal, Toast } from 'antd-mobile';
import Layout from '../../Components/static/Layout/Layout'; import Layout from '../../Components/static/Layout/Layout';
import TrainItem from '../../Components/page/user/TrainItem'; import TrainItem from '../../Components/page/user/TrainItem';
...@@ -72,9 +74,9 @@ class TrainList extends Component { ...@@ -72,9 +74,9 @@ class TrainList extends Component {
</ul> </ul>
<div className="bottom-operate"> <div className="bottom-operate">
<a href="/new/user/train/add" className="am-button am-button-primary"> <Link to="/user/train/add" className="am-button am-button-primary">
添加受训背景 添加受训背景
</a> </Link>
</div> </div>
<Modal <Modal
...@@ -100,10 +102,10 @@ class TrainList extends Component { ...@@ -100,10 +102,10 @@ class TrainList extends Component {
/> />
</div> </div>
) : ( ) : (
<a href="/new/user/train/add" className="add-train"> <Link to="/user/train/add" className="add-train">
<i className="y-icon-add" /> <i className="y-icon-add" />
<span>添加受训背景</span> <span>添加受训背景</span>
</a> </Link>
)} )}
</div> </div>
</Layout> </Layout>
......
src/pages/user/addMaterial.js
...@@ -6,6 +6,7 @@ import { getParam, getImgNaturalDimensions } from '../../utils/tools'; ...@@ -6,6 +6,7 @@ import { getParam, getImgNaturalDimensions } from '../../utils/tools';
import UpLoad from '../../Components/common/Upload/Upload'; import UpLoad from '../../Components/common/Upload/Upload';
import { getParameterByName } from '../../utils/common'; import { getParameterByName } from '../../utils/common';
import app from '../../static/js/native';
import classNames from 'classnames'; import classNames from 'classnames';
import fetch from '../../api/fetch'; import fetch from '../../api/fetch';
import '@/static/styles/user/add-material.less'; import '@/static/styles/user/add-material.less';
...@@ -25,6 +26,8 @@ class AddMaterial extends Component { ...@@ -25,6 +26,8 @@ class AddMaterial extends Component {
}; };
componentWillMount() {} componentWillMount() {}
componentDidMount() { componentDidMount() {
app().downRefresh(false);
app().notRefresh(false);
const id = getParam(location.href); const id = getParam(location.href);
const index = getParameterByName('index') * 1; //修改类型 const index = getParameterByName('index') * 1; //修改类型
const modifyId = getParameterByName('modifyId'); const modifyId = getParameterByName('modifyId');
......
src/static/styles/base.less
...@@ -3,9 +3,21 @@ ...@@ -3,9 +3,21 @@
* @Author: futurewan * @Author: futurewan
* @Date: 2019-05-22 17:53:14 * @Date: 2019-05-22 17:53:14
* @LastEditors: futurewan * @LastEditors: futurewan
* @LastEditTime: 2019-05-25 17:34:39 * @LastEditTime: 2019-05-26 22:57:11
*/ */
.ellipsis(@a) when (@a=1) {
white-space: nowrap;
}
.ellipsis(@line) when (@line>1) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @line;
}
.ellipsis(@line) {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
// @mixin ellipsis($line: 1) { // @mixin ellipsis($line: 1) {
// overflow: hidden; // overflow: hidden;
// text-overflow: ellipsis; // text-overflow: ellipsis;
......
src/static/styles/global.less
@import './base.less'; @import './base.less';
// .ellipsis1 { .ellipsis1 {
// @include ellipsis(1); .ellipsis(1);
// } }
// .ellipsis2 { .ellipsis2 {
// @include ellipsis(2); .ellipsis(2);
// } }
body, body,
div, div,
header, header,
......
src/static/styles/user/add-material.less
#__next { .am-list-body {
.am-list-item .am-list-line { .am-list-item .am-list-line {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment