antd mobile（二）高清方案配置

程序员文章站 2022-04-04 12:14:34

...

昨天把环境跑起来了，在chrome上正常，在safair上竟然就展示了50%。一猜就知道是mate的viewport设置问题。
又是几个小时的找资料配置才搞定，都是坑啊。
昨天搭建环境时字体过大，网上的方案是

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

修改成

<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no">

效果就是chrome、360可以正常，但safair、firefox都显示异常。
最终配置应该是如下的：
第一步:修改public/index.html文件：其实就是将viewport的设置通过一个js脚本代替了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <script>
    !function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);
    flex(100, 1);
  </script>
  <title>Dva Demo</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>

<div id="root"></div>

<script src="index.js"></script>

</body>
</html>

第二步：修改.roadhogrc.js文件，这里是将.roadhogrc删除了，将相应配置都放到.roadhogrc.js里咯

import pxtorem from 'postcss-pxtorem';
const path = require( 'path' );


export default {
  entry : "src/index.js" ,
  disableCSSModules : false ,
  publicPath : "/" ,
  theme : "./theme.config.js" ,
  autoprefixer : {
    browsers : [
      "iOS >= 8" ,
      "Android >= 4"
    ]
  } ,
  extraPostCSSPlugins : [
    pxtorem( {
      rootValue : 100 ,
      propWhiteList : [] ,
    } ) ,
  ] ,
  // style 必须是 true
  extraBabelPlugins : [
    "transform-runtime" ,
    [
      "import" ,
      { libraryName : "antd-mobile" , "libraryDirectory" : "lib" , "style" : true }
    ]
  ] ,
  env : {
    development : {
      extraBabelPlugins : [
        "dva-hmr"
      ]
    }
  }
};

第三步：在.roadhogrc.js引入了 theme : “./theme.config.js” 文件，主要是用于修改手机端antd mobile的一些默认css的配置信息
theme.config.js的内容如下：

const fs = require('fs');
const path = require('path');
const lessToJs = require('less-vars-to-js');

module.exports = () => {
  const themePath = path.join(__dirname, './themes/default.less');
  return lessToJs(fs.readFileSync(themePath, 'utf8'));
};

themes/default.less的内容如下：

// 本文件是对 ant-design-mobile:
// https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less
// 相应变量值的覆盖
// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
@import '~antd-mobile/lib/style/themes/default.less';

// 色彩
// ---
// 文字色
@color-text-base: #333; // 基本
@color-text-secondary: #999; // 辅助色
@color-text-caption: #999; // 辅助描述
@color-text-paragraph: #333; // 段落

// 全局/品牌色
@brand-primary: #717176;
@brand-primary-tap: #dd7742;
//
// 圆角
// ---
@radius-md: 40px;

// 边框尺寸
// ---
@border-width-sm: 1px;

// 字体尺寸
// ---
@font-size-icontext: 16px;
@font-size-caption-sm: 20px;
@font-size-base: 24px;
@font-size-subhead: 26px;
@font-size-caption: 28px;
@font-size-heading: 30px;
@font-size-display-sm: 32px;
@font-size-display-md: 28px;
@font-size-display-lg: 44px;
@font-size-display-xl: 56px;

// button
@button-height: 80px;
@button-font-size: 32px;

@button-height-sm: 56px;
@button-font-size-sm: 22px;

webpack.config.js的配置内容如下：

const path = require('path');
const pxtorem = require('postcss-pxtorem');

module.exports = function(webpackConfig, env) {
  const svgDirs = [
    require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. 属于 antd-mobile 内置 svg 文件
    // path.resolve(__dirname, 'src/my-project-svg-foler'),  // 2. 自己私人的 svg 存放目录
  ];



  // 因为一个 SVG 文件不能被处理两遍. 在 atool-build 默认为 svg配置的svg-url-loade 里 exclude 掉需要 svg-sprite-loader处理的目录
  // https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js#L162
  // https://github.com/kisenka/svg-sprite-loader/issues/4
  webpackConfig.module.loaders.forEach(loader => {
    if (loader.test && typeof loader.test.test === 'function' && loader.test.test('.svg')) {
      loader.exclude = svgDirs;
    }
  });
  // 4. 配置 webpack loader
  webpackConfig.module.loaders.unshift({
    test: /\.(svg)$/i,
    loader: 'svg-sprite',
    include: svgDirs, // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理
  });

  return webpackConfig;
}

配置搞定，在各种浏览器上都展示正常