react移動端適配方案實踐

時間 2019-11-06

標籤 react 移動適配方案實踐欄目 React 简体版

原文原文鏈接

react移動端適配方案

本文項目基於create-react-app構建。更多移動端資料推薦javascript

tipsjava

/* 處理 vm 適配圖片不顯示問題 */
img {
  content: normal !important; 
}
複製代碼

1️⃣ 項目初始 + 暴露配置項

一、create-react-app react-vw-layout 初始化項目
二、npm run eject 暴露配置項

2️⃣ postCss插件安裝配置

package.json 中添加依賴,並安裝react

"postcss-aspect-ratio-mini": "0.0.2",
//--坑點 已經更新 postcss-preset-env 因此請使用 "postcss-preset-env": "6.0.6"👇
"postcss-cssnext": "^3.1.0",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"postcss-px-to-viewport": "0.0.3",
"postcss-viewport-units": "^0.1.4",
"postcss-write-svg": "^3.0.1"

複製代碼

config/webpack.config.dev.js 文件中修改添加配置（開發環境生效） (生產環境打包配置以下，也是同樣的在文件夾 config/webpack.config.prod 中修改)webpack

// config/webpack.config.dev.js
// 文件頭部引進依賴
const fs = require('fs');
const path = require('path');
const resolve = require('resolve');
const webpack = require('webpack');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const ManifestPlugin = require('webpack-manifest-plugin');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');

// 移動端適配添加 - 插入
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-preset-env'); //這個插件已經更新 postcss-preset-env 因此請使用 "postcss-preset-env": "6.0.6",
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');


//配置項中添加使用

 {
    // Options for PostCSS as we reference these options twice
    // Adds vendor prefixing based on your specified browser support in
    // package.json
    loader: require.resolve('postcss-loader'),
    options: {
      // Necessary for external CSS imports to work
      // https://github.com/facebook/create-react-app/issues/2677
      ident: 'postcss',
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
        }),

        // -----插入適配移動端配置項-----👇
        postcssAspectRatioMini({}),
        postcssPxToViewport({
          viewportWidth: 750, // (Number) The width of the viewport.
          viewportHeight: 1334, // (Number) The height of the viewport.
          unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
          viewportUnit: 'vw', // (String) Expected units.
          selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
          minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
          mediaQuery: false // (Boolean) Allow px to be converted in media queries.
        }),
        postcssWriteSvg({
          utf8: false
        }),
        postcssCssnext({}),
        postcssViewportUnits({}),
        cssnano({
          //舊的 --坑點
          // preset: "advanced",
          // autoprefixer: false,
          // "postcss-zindex": false
          //新配置繼續使用高級配置,按照這個配置
          "cssnano-preset-advanced": {
            zindex: false,
            autoprefixer: false
          },
        })
      ],
    },
},

複製代碼

3️⃣測試驗證

修改 App.css 文件git

.App {
  width: 750px;
  height: 300px;
  background: #409eff;
  color: #ffffff;
  line-height: 200px;
  text-align: center;
}
複製代碼

npm start 啓動項目，打開控制檯，這個時候已經生效了github

配置好生產環境以後驗證,npm run build,這個時候，生產打包已經生效了。

4️⃣ 一些兼兼容性hacks處理

修改 public/index.html, 引入阿里的 cdn

<!-- index.html body 後添加-->
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
<script> window.onload = function() { window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks }); // 驗證輸出 const winDPI = window.devicePixelRatio; const uAgent = window.navigator.userAgent; const screenHeight = window.screen.height; const screenWidth = window.screen.width; const winWidth = window.innerWidth; const winHeight = window.innerHeight; console.log(winDPI, "設備 DPI"); console.log(uAgent, "客戶端"); console.log(screenWidth, "屏幕寬度"); console.log(winHeight, "屏幕高度"); console.log(winWidth, "Windows Width"); console.log(winHeight, "Windows Height"); }; </script>
複製代碼