React手机端如何在umi框架如何自定义 HTML 模板

KisJ

已于 2023-03-27 17:20:16 修改

阅读量1k

点赞数 1

分类专栏： React移动端-antd-mobile 文章标签： react.js 前端 html5 Powered by 金山文档

于 2023-02-15 16:56:47 首次发布

本文链接：https://blog.csdn.net/KisJLLLLLL/article/details/129046327

版权

React移动端-antd-mobile 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讲述了在使用Umi框架构建手机端项目时遇到的Rem单位失效问题，以及如何通过创建plugin.ts文件并利用Umi的API进行JS注入来解决这个问题。代码示例展示了如何设置font-size以确保Rem的正确计算。

摘要由CSDN通过智能技术生成

umi官方链接说明https://github.com/umijs/umi-next/issues/868#issuecomment-1151088426

碰到这个问题是由于我在起一个手机端项目的时候无法从js标签注入模板，导致了前端手机端的rem失效问题

根据官方给的链接和例子，我在最外层创建了一个plugin.ts的文件进行注入（这边js官方也说是可以的但不知道为什么我那时候用js不行）

一开始我用的js不知道什么原因失效，改成ts文件就可以了，这边我注入的标准为50px=1rem

废话不多说上代码

将以下代码进行注入即可进行手机端前端的rem设计

(function (n, e) {
    var t = n.documentElement,
      i = 'orientationchange' in window ? 'orientationchange' : 'resize',
      d = function () {
        var n = t.clientWidth;
        n && (t.style.fontSize = n / 7.5 + 'px');
      };
    n.addEventListener &&
      (e.addEventListener(i, d, !1), n.addEventListener('DOMContentLoaded', d, !1));
  })(document, window);

另外附带上官方例子

import { IApi } from 'umi';

export default (api: IApi) => {
  api.modifyHTML(($) => {
    return $;
  });
  api.addHTMLMetas(() => [{ name: 'foo', content: 'bar' }]);
  api.addHTMLLinks(() => [{ rel: 'foo', content: 'bar' }]);
  api.addHTMLStyles(() => [`body { color: red; }`]);
  api.addHTMLHeadScripts(() => [`console.log('hello world from head')`]);
  api.addHTMLScripts(() => [`console.log('hello world')`]);
  api.addEntryCodeAhead(() => [`console.log('entry code ahead')`]);
  api.addEntryCode(() => [`console.log('entry code')`]);
  api.onDevCompileDone((opts) => {
    opts;
    // console.log('> onDevCompileDone', opts.isFirstCompile);
  });
  api.onBuildComplete((opts) => {
    opts;
    // console.log('> onBuildComplete', opts.isFirstCompile);
  });
  api.chainWebpack((memo) => {
    memo;
  });
  api.onStart(() => {});
  api.onCheckCode((args) => {
    args;
    // console.log('> onCheckCode', args);
  });
};