简介

由于最近业务原因，需要开发一些移动端h5页面。之前是使用vue技术栈开发，这里因为一些原因需要使用react技术栈开发，在后台系统方面这里选择的是umijs作为开发脚手架。所以在h5开发的也选用umijs来进行开发，这里记录下框架搭建的基础过程，方便直接使用，少走弯路

开始

环境准备

首先得有 node，并确保 node 版本是 10.13 或以上

node -v
v10.13.0

使用脚手架创建

• 先创建一个目录

mkdir myapp && cd myapp

• 通过脚手架创建项目

yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app

Copy:  .editorconfig
Write: .gitignore
Copy:  .prettierignore
Copy:  .prettierrc
Write: .umirc.ts
Copy:  mock/.gitkeep
Write: package.json
Copy:  README.md
Copy:  src/pages/index.less
Copy:  src/pages/index.tsx
Copy:  tsconfig.json
Copy:  typings.d.ts

• 安装依赖

yarn

yarn install v1.21.1
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.71s.

• 启动项目

yarn start

Starting the development server...

✔ Webpack
  Compiled successfully in 17.84s

 DONE  Compiled successfully in 17842ms                                       8:06:31 PM


  App running at:
  - Local:   http://localhost:8000 (copied to clipboard)
  - Network: http://192.168.12.34:8000

项目基础文件目录

src
├── app.ts // 运行时入口文件
├── assets // 需要编译的静态文件
│   ├── bg.jpg
│   ├── btn.png
│   └── arrows.gif
├── global.ts // 全局运行的ts文件
├── models // 数据流文件夹
│   └── useHomeModel.ts 
├── pages // 页面文件夹
│   ├── error
│   │   ├── index.less
│   │   └── index.tsx
│   └── home
│       ├── index.less
│       └── index.tsx
└── services // 请求接口文件夹
    └── homeApi.ts

配置文件.umirc.ts

import { defineConfig } from 'umi';
import px2vw from 'postcss-px-to-viewport';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [{ path: '/', component: '@/pages/home/index' }],
  fastRefresh: {},
  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/h5/',
  base: process.env.NODE_ENV === 'development' ? '/' : '/h5/',
  proxy: {
    '/wechat': {
      // target: 'http://api.wpwl-inc.com/mock/92/',
      target: 'https://www.water.com',
      changeOrigin: true,
      // 'pathRewrite': { '^/api' : '' },
    },
  },
  mfsu: {},
  extraPostCSSPlugins: [
    px2vw({
      unitToConvert: 'px', // 要转化的单位
      viewportWidth: 750, // 视窗的宽度，可根据自己的需求调整（这里是以PC端为例）
      // viewportHeight: 1080, // 视窗的高度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
      // selectorBlackList: ['wrap'],// 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false, // 是否处理横屏情况
    }),
  ],
});

接口请求文件servives/homeApi.ts

import { request } from 'umi';

interface IParams {
  code: string | number;
}

interface IScanPrams {
  code: number | string;
  scanTime: string;
}
/** * @description: 获取配置 * @param {*} * @return {*} */
export const getConfig = (data: IParams): object => {
  return request('https://water.com/wechat/a', {
    method: 'post',
    data,
  });
};

/** * @description: 扫描日志 * @param {*} * @return {*} */
export const getScan = (data: IScanPrams): object => {
  return request('https://water.com/wechat/b', {
    method: 'post',
    data,
  });
};

models数据流管理

这里umi提供了两种方式，一个是大家很熟悉的dva，另一个就是useModelHook的写法来处理数据流，dva的例子就不说了，这里简单说下hooks的使用方式

import { useState, useCallback } from 'react';
import { getRedirectConfig } from '@/services/homeApi';
export default function useHomeModel() {
  const [config, setConfig] = useState({});
  const getHomeConfig = useCallback(async (data) => {
    let config = await getRedirectConfig(data);
    setConfig(config);
  }, []);
  return {
    config,
    getHomeConfig,
  };
}

首先可以简单理解这就是个hooks那么就必须满足hooks的规则包括命名和使用规则等。

配置h5相关

配置移动端适配

1.rem适配

rem适配的方案需要安装amfe-flexible和postcss-pxtorem。 前一个是用来缩放根节点字体大小的，后面一个是对css的px单位进行转换成对应的rem单位

yarn add amfe-flexible
yarn add postcss-pxtorem --dev

然后在global.ts中引入amfe-flexible

import 'amfe-flexible/index'

global.ts这个文件是全局的ts文件，详细说明请参看umijs的文档

在使用postcss-pxtorem插件的时候需要配置转换的参考基数，大部分是以750px的设计稿来作为参考，这里就写下750px作为参考的配置，在umijs的配置文件.umirc.ts中

extraPostCSSPlugins: [
    pxtorem({
      rootValue: 75, // 换算的基数
      // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
      //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
      // selectorBlackList: ["am"],
      exclude: /node_modules/i,
      propList: ['*'],
    }),
  ],

2. viewport适配 vw适配需要安装postcss-px-to-viewport,然后在配置文件.umirc.ts中进行配置就行了

import px2vw from 'postcss-px-to-viewport';

extraPostCSSPlugins: [
    px2vw({
      unitToConvert: 'px', // 要转化的单位
      viewportWidth: 750, // 视窗的宽度，可根据自己的需求调整（这里是以PC端为例）
      // viewportHeight: 1080, // 视窗的高度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
      // selectorBlackList: ['wrap'],// 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false, // 是否处理横屏情况
    }),
  ],

ui库

移动端的ui库也没有多少，大家可以选用自己喜欢的。这里umijs中集成了antd-mobile，所以就直接使用这个库了。

代理

本地开发需要配置代理，在配置文件.umirc.ts中进行配置

proxy: {
    '/api': {
      target: 'http:/www.baidu.com/',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },

调试日志

由于移动端h5要在移动端打开进行调试，所以调试起来如果看不到日志也是非常麻烦的。这里使用vconsole库让移动端显示出调试日志

• 安装vconsole

yarn add vconsole --dev

• 使用vconsole

在global.ts中实例化

import VConsole from 'vconsole';
new VConsole();

这里日志其实只是在开发的时候使用，在打包正式上线是需要关闭的，为了避免忘记和手动关闭，可以简单在优化下。

import VConsole from 'vconsole';
process.env.NODE_ENV === 'development' && new VConsole();

打包部署

如果直接是部署在服务器根路径，直接打包生成dist目录就行了。如果不是根目录还需要添加一些配置如下，在.umirc.js中

// 根据环境进行区分
publicPath: process.env.NODE_ENV === 'development' ? '/' : '/h5/',
// 部署的路径不是根路径
base: process.env.NODE_ENV === 'development' ? '/' : '/h5/',

小结

通过以上步骤，一个简单的umijs开发h5的基础框架就算完成了，可以进行业务开发了，希望对大家有帮助，觉得有帮助的给个赞，谢谢！