# react-h5-template
**Repository Path**: carry_hu/react-h5-template
## Basic Information
- **Project Name**: react-h5-template
- **Description**: 基于react 的h5开发模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-09-09
- **Last Updated**: 2022-07-27
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# H5项目-基于React+antd-mobile+Webpack搭建移动端项目
对于移动端项目，使用[React](https://zh-hans.reactjs.org/)+[Ant Design Mobile](https://mobile.ant.design/index-cn)+[Webpack](https://www.webpackjs.com/)搭建基础框架：
1. 初始化项目。
2. 配置Webpack、antd-mobile、Mobx、React-Router。
移动端项目搭建跟 PC 端基本一致，只是 UI 框架有差别，详见：H5项目-基于React+antd+Webpack搭建PC端项目.md。
## 配置antd-mobile
[Ant Design Mobile](https://mobile.ant.design/index-cn)是React中最流行的UI框架。**当前版本：2.3.4。**
### 1 基本配置
第一步，安装依赖：
```
npm i antd-mobile -S
//用于配置按需加载
npm i babel-plugin-import -D
//用于主题定制
npm i less less-loader -D
```
第二步，在babel.config.js中做按需加载：
```
/**
* Babel的配置文件
*/
module.exports = function(api) {
const plugins = [
[
'import', //按需加载，需要安装babel-plugin-import
{libraryName: 'antd-mobile', style: "css" }] // `style: true` 会加载 less 文件
]
];
...
};
```
第三步，使用组件：
```
import {Button} from 'antd'
```
### 2 主题定制
主题定制用于自定义antd的UI风格。
第一步，新建antd的主题配置文件：config/configTheme.js：
```
/**
* antd的定制主题样式
* 参考：https://antd-mobile.gitee.io/docs/react/customize-theme-cn
*/
module.exports = {
'brand-primary': '#1890ff', //主题色
'brand-primary-tap': '#2077f0', //主题色-浅色
'button-height': '32px'
};
```
第二步，在babel.config.js中修改按需加载：
```
{
...
"plugins": [
["import", {"libraryName": "antd-mobile", "style": true}],
...
]
}
```
第三步，在webpack.config.js中做主题定制：
```
module.exports = env => {
const modifyVars = require('./config/configTheme.js'); //antd的主题定制
let module = {
rules: [
{
test: /\.(css|less)$/, //加载less文件：用于antd主题定制
include: /node_modules/,
use: [
'style-loader',//处理css文件：将css添加到html的style标签中
'css-loader',//处理css文件：解释并引用css中的@import和url()
'postcss-loader', //处理css文件：自动补全webkit前缀等
{
loader: 'less-loader',//将less文件转为css文件
options: {
lessOptions: {
modifyVars,
javascriptEnabled: true //必须为true
}
}
}
]
}
]
};
};
```
### 3 屏幕适配
在移动端，由于机型太多，需要做屏幕适配。
屏幕适配一般的做法是使用屏幕宽度的百分比来设置rem的值，然后在css中使用rem做单位。这里使用Flexible.js+[postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 插件，自动设置rem的值以及将px转rem。
第一步，安装依赖：
```
npm i postcss-pxtorem -D
```
第二步，在postcss.config.js中配置：
```
module.exports = {
plugins: {
...
//用于屏幕适配：自动将px转rem
'postcss-pxtorem': {
rootValue: 37.5, //1rem等于多少px
propList: ['*']
}
}
};
```
第三步，在webpack的配置文件中指定postcss-loader。详情见：webpack.dev.js
**注意：页面的样式和antd框架的样式都需要使用postcss-loader做转换。**
第四步，index.html中引用Flexible.js：
```
```
### 4 兼容性
| iOS | Android |
| ------ | ------- |
| 都支持 | 4.4+ |
### 5 路由使用
```
this.props.history.push('/detail');
this.props.history.push({
pathname: '/detail',
state: {},
params: {}
})
// 获取传参
this.props.location.state
this.props.location.params
// 当前路由替换
this.props.history.replace('/detail');
// 返回上一页
this.props.history.goBack();
// 前进下一页
this.props.history.goForward();
// 页面跳转
this.props.history.go(0);
this.props.history.go(-1);
this.props.history.go(1);
```
## 最后
**代码：**https://gitee.com/yanhuo2008/h5-react/tree/master/ReactH5