Taro 项目中引入 antd-mobile

前言: 目前在写一个【H5】项目,本来是打算直接使用【taro-ui】的,但写到后面发现一个大问题.【taro-ui】居然,没有表单验证相关组件.然后就换了antd-mobile.

本文中的所写的demo代码的码云地址:gitee.com/raotaotao/t…

-------------------------------分割线-------------------------------

一.使用官方脚手架安装Taro.

//PS:myapp1是你自己的项目名称,可以替换
$ npx @tarojs/cli init myapp1

二.安装antd-mobile插件.

$ npm install --save antd-mobile
# or
$ yarn add antd-mobile
# or
$ pnpm add antd-mobile

文档地址: mobile.ant.design/zh/guide/qu…

在pages/index/index.tsx中进行使用.

import { Component } from "react";
import { View, Text } from "@tarojs/components";
//引入Button组件
import { Button } from "antd-mobile";
import "./index.scss";

export default class Index extends Component {
  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        {/* 使用Button组件 */}
        <Button>
          一二三
        </Button>
        {/* 写一个普通的Text font-size:17px 字体大小与Button的字体大小相同 */}
        <Text className='hello'>一二三</Text>
      </View>
    );
  }
}

在pages/index/index.scss设置样式.

.hello {
  font-size: 17px;
}

在谷歌模拟器上查看.

我们再查看css样式会发现我们写的.hello样式中的17px被编译成了0.36267rem(rem移动端H5布局适配的一种单位).但是按钮的原本的17px仍然是17px未被编译.

解决方式:在config/index.js中进行配置,使postcss插件将px转换rem时包含antd-mobile

//代码,复制到下图的位置上.
esnextModules: ['antd-mobile']

重启项目,发现两个"一二三"大小相同了.

三.字体尺寸问题.

此时看起来似乎没有问题了..但移动端的转换是以两倍图的方式进行转换的.我们的字体大小通常使用的是28px;

找到antd-mobile/es/global/global.css全局变量.可以看出来.以当前变量使用的值,最大的也才18px,在两倍图的尺寸将会被编译成相当于9px的大小.而大多数浏览器的文字最小限制是12px,因此几乎所有文字都会变成浏览器最小限制的文字大小.此处必须得改.

我们不要直接改插件包中的数据,而是找到antd-mobile/2x/es/global/global.css.

将该文件复制出到src下,我这里改名成antd-mobile.2x.css,改名不是刚需操作.

将原本:root改成:root:root,增加该css样式的权限,让它超过antd-mobible的默认权限

最后引入app.ts;

重启后再看:

查看css样式:root:root已经全面覆盖掉了原本的:root样式.

至此,大功告成!.完.