react-移动端项目

移动端项目

一 明确案例的需求

需要理解的概念有：

• 手机验证码的登录
• 手机验证码的获取
• 第三方平台的授权登录
• 第三方平台用户信息的获取

二 antd的基本使用

需要理解的概念有：

• React的UI框架有哪些

  • https://ant.design/docs/react/introduce-cn
  • https://material-ui.com/zh/
  • https://zijieke.com/semantic-ui/
  • https://react-bootstrap.github.io/
  • https://apiblueprint.org/
  • …

• Antd的完整安装与使用

  

  • yarn add antd

  import React, { Component } from 'react';
  import { DatePicker } from 'antd';
  import 'antd/dist/antd.css'; 
  // 需要引入样式内容，否则界面无样式效果
  
  export default class App extends Component {
  	render() {
  		return (
  			<div>
  				<DatePicker />
  			</div>
  		);
  	}
  }
  

• 常用组件的使用

  • 需要先将组件引入
  • 再进行组件的使用
  • Button、Input、DatePicker、Icon、Modal…

三 antd的按需引入样式

需要理解的概念有： npm run build 压缩打包

• JS按需加载：antd 的 JS 代码默认支持基于 ES modules 的 tree shaking
• CSS按需加载：
  • 模块安装：npm add @craco/craco craco-less craco-antd
  • 配置文件：package.json(二次环境配置)

{
   
  "name": "hello-react",
  ...
    "scripts": {
   
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  ...
}

• 配置文件：craco.config.js

react是基于webpack配置运行的，但是我们看不到任何的webpack配置，只能用eject进行弹射时才能查看。

为社么使用require? 因为webpack是基于commonjs的

webpack基于五大核心概念：入口 出口 加载器 模式 插件

const CracoAntDesignPlugin = require('craco-antd');
//设置了一个插件
module.exports = {
   
	plugins: [{
    plugin: CracoAntDesignPlugin }],
};

App.js，去除css的引入

import React, { Component } from 'react';
import { DatePicker } from 'antd';
export default class App extends Component {
	render() {
		return (
			<div>
				<DatePicker />
			</div>
		);
	}
}

四 antd自定义主题

需要理解的概念有：

• 默认主题的使用
• 自定义主题的修改

App.js，引入less

import React, {
    Component } from 'react';
import {
    DatePicker } from 'antd';
import './App.less';
export default class App extends Component {
   
	render() {
   
		return (
			<div>
				<DatePicker />
			</div>
		);
	}
}

App.less，引入less

@import '~antd/dist/antd.less';

• 配置文件：craco.config.js

//安装插件
const CracoLessPlugin = require('craco-less');
const CracoAntDesignPlugin = require('craco-antd');

module.exports = {
   
	plugins: [
		{
    plugin: CracoAntDesignPlugin },
		{
   
			plugin: CracoLessPlugin,
			options: {
   
				lessLoaderOptions: {
   
					lessOptions: {
   
						modifyVars: {
    '@primary-color': '#ffcc00' },
            // 设置自定义主题样式
      // 配置参数：https://ant.design/docs/react/customize-theme-cn
						javascriptEnabled: true,
					},
				},
			},
		},
	],
};

五 antd-mobile的配置

需要理解的概念有：

• react项目的创建

• UI框架的安装与使用

• antd-mobile的安装使用与配置

  https://mobile.ant.design/docs/react/use-with-create-react-app-cn

1.项目的创建、模块的安装以及package.json文件的修改

npm i antd-mobile --save
# less与less-loader需要指定版本，如果按最新版本会出现兼容性错误问题以及less语法等后续问题    按需加载
npm i babel-plugin-import customize-cra react-app-rewired less@3.13.1 less-loader@7.3.0 --sav-dev

package.json

{
   
  "name": "react-mobile",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
   
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "antd-mobile": "^2.3.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
   
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
   
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
   
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
   
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "less": "^3.13.1",
    "less-loader": "^7.3.0",
    "react-app-rewired": "^2.1.8"
  }
}

2.config-overrides.js 的创建-按需加载

const {
    override, fixBabelImports } = require('customize-cra');

module.exports = function override(config, env) {
   
	// do stuff with the webpack config...
	return config;
};
module.exports = override(
	fixBabelImports('import', {
   
		libraryName: 'antd-mobile',
		style: 'css',
	})
);

3.html文件的修改，加入移动端特性内容

public/index.html

https://mobile.ant.design/docs/react/introduce-cn#3.-%E4%BD%BF%E7%94%A8

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content