Skip to content

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

fix bug

parent e954181a
Showing with 91 additions and 70 deletions
.gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
/.idea
# dependencies
/node_modules
# production
/build
# misc
.DS_Store
npm-debug.log*
yarn-debug.log*
......
README.md
# React-webpack ------基于antd-mobile等库的一套移动端完美脚手架配置
# React-webpack ------基于 antd-mobile 等库的一套移动端完美脚手架配置
## 超越京东的优化程度 首屏的load事件触发不到0.4s
# 包管理器使用 yarn,下载后 yarn init ,然后 yarn 即可获取所有依赖
# 包管理器使用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不仅缓存编译结果，还在第一次编译后开启多线程编译，极大加快构建速度
* 等等....
- 项目是移动端 react antd-mobile better-scorll material-design redux react-redux 的结合
React 的最新配置
config/webpack.dev.js
......@@ -108,6 +108,7 @@ module.exports = {
mode: 'development',
devServer: {
contentBase: '../build',
host: '0.0.0.0',
open: true,
port: 5000,
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>
\ No newline at end of file
<!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>
\ No newline at end of file
public/index.html
......@@ -5,10 +5,12 @@
<meta charset="UTF-8">
<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">
<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">
<meta name="keywords" content="健康,健康心理测试,健康在线心理测试,健康免费心理测试,健康心理测试题,健康心理测试小游戏,健康心理测试工具" />
<meta name="description" content="壹点灵心理测试频道为您提供专业，贴心的免费健康心理测试题库，和免费的健康心理测试小游戏，动动手指，立刻免费在线健康心理测试。" />
<!-- <link rel="dns-prefetch" href='http://192.168.48.140'>
<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>
<body>
......@@ -21,7 +23,7 @@
stylenode.innerHTML = "html{font-size:" + w + "px !important}";
document.body.appendChild(stylenode);
}
// if ('serviceWorker' in navigator) {
// window.addEventListener('load', () => {
// navigator.serviceWorker.register('/service-worker.js').then((registration) => {
......
src/App.jsx
......@@ -26,8 +26,9 @@ class App extends React.Component {
storage.setSS('urlQuery', this.analysisQuery());
}
}
componentDidMount() {}
analysisQuery() {
let search = this.props.location.search;
let search = location.search;
if (!search) return '';
search = search.substr(1).split('&');
let obj = {};
......
src/pages/user/JobList.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Modal, Toast } from 'antd-mobile';
import classNames from 'classnames';
import Layout from '../../Components/static/Layout/Layout';
......@@ -6,31 +7,28 @@ import TrainItem from '../../Components/page/user/TrainItem';
import TabBar from '../../Components/page/user/TabBar';
import { MATERIAL_ARR } from '../../static/js/constant';
import app from '../../static/js/native';
import fetch from '../../api/fetch';
import { getParameterByName } from '../../utils/common';
import '@/static/styles/user/train-list.less';
function AddView(props) {
console.log(props);
return (
<div className="bottom-operate">
{
//<Link prefetch as={`/new/user/job/add?index=${props.tabIndex}`} href={`/User/addMaterial`}>
}
<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`}>
}
<Link className="am-button am-button-primary" to={`/user/job/add?index=${props.tabIndex}`}>
添加{MATERIAL_ARR[props.tabIndex]}
</Link>
</div>
);
}
function NoDataView(props) {
return (
<div className="add-train">
<Link className="add-train" to={`/user/job/add?index=${props.tabIndex}`}>
<i className="y-icon-add" />
<span>添加{MATERIAL_ARR[props.tabIndex]}</span>
</div>
</Link>
);
}
function ListItemView(props) {
......@@ -71,6 +69,8 @@ class JobList extends Component {
});
}
componentDidMount() {
app().downRefresh(true);
app().notRefresh(true);
this.initData();
}
initData = () => {
......
src/pages/user/TrainList.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Modal, Toast } from 'antd-mobile';
import Layout from '../../Components/static/Layout/Layout';
import TrainItem from '../../Components/page/user/TrainItem';
......@@ -72,9 +74,9 @@ class TrainList extends Component {
</ul>
<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>
<Modal
......@@ -100,10 +102,10 @@ class TrainList extends Component {
/>
</div>
) : (
<a href="/new/user/train/add" className="add-train">
<Link to="/user/train/add" className="add-train">
<i className="y-icon-add" />
<span>添加受训背景</span>
</a>
</Link>
)}
</div>
</Layout>
......
src/pages/user/addMaterial.js
......@@ -6,6 +6,7 @@ import { getParam, getImgNaturalDimensions } from '../../utils/tools';
import UpLoad from '../../Components/common/Upload/Upload';
import { getParameterByName } from '../../utils/common';
import app from '../../static/js/native';
import classNames from 'classnames';
import fetch from '../../api/fetch';
import '@/static/styles/user/add-material.less';
......@@ -25,6 +26,8 @@ class AddMaterial extends Component {
};
componentWillMount() {}
componentDidMount() {
app().downRefresh(false);
app().notRefresh(false);
const id = getParam(location.href);
const index = getParameterByName('index') * 1; //修改类型
const modifyId = getParameterByName('modifyId');
......
src/static/styles/base.less
......@@ -3,9 +3,21 @@
* @Author: futurewan
* @Date: 2019-05-22 17:53:14
* @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) {
// overflow: hidden;
// text-overflow: ellipsis;
......
src/static/styles/global.less
@import './base.less';
// .ellipsis1 {
// @include ellipsis(1);
// }
// .ellipsis2 {
// @include ellipsis(2);
// }
.ellipsis1 {
.ellipsis(1);
}
.ellipsis2 {
.ellipsis(2);
}
body,
div,
header,
......
src/static/styles/user/add-material.less
#__next {
.am-list-body {
.am-list-item .am-list-line {
padding-top: 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