taro开发小程序使用 HTML 标签

使用方法

pnpm i @tarojs/plugin-html

// config/index.js
config = {
  plugins: ['@tarojs/plugin-html']
}

对比

未使用@tarojs/plugin-html

import { Text, View } from '@tarojs/components';

const Demo = () => {
  return (
    <View>
      <Text>未使用@tarojs/plugin-html</Text>
    </View>
  );
};

export default Demo;

使用@tarojs/plugin-html后

const Demo = () => {
  return (
    <div>
      <span>使用@tarojs/plugin-html</span>
    </div>
  );
};

export default Demo;

可以看到使用@tarojs/plugin-html后，终于越来越像人类写的代码了。其实开发这么多年我还是不理解，明明小程序可以让开发者更舒服，为什么非要恶心🤢一下呢？在这里感谢🙏京东Taro，不然还要面对小程序的语法真是噩梦。

浏览器默认样式

Taro 提供了两种内置的浏览器默认样式，可以根据项目需要进行引入。

1.HTML4

W3C HTML4 的内置样式。只有 HTML4 标签样式，体积较小，兼容性强，能适应大多数情况。

import '@tarojs/taro/html.css'

2.HTML5

Chrome(Blink) HTML5 的内置样式。内置样式丰富，包括了大多数 HTML5 标签，体积较大，不一定支持所有小程序容器。

import '@tarojs/taro/html5.css'

反正我是不用，这里就介绍一下。

我开发一般只使用div标签，并不是不知道HTML语义化标签，而是一些彼阳的平台可能会给你的标签加一些莫名其秒style，有些标签之间还不能相互嵌套，所以只使用div可有效的减少麻烦。

第三方组件库的尺寸变小了一倍

Taro 默认会使用 postcss 把 px 按比例解析为 rpx，详情请见 《设计稿及尺寸单位》。

但很多第三方 H5 组件库不需要解析 px 单位，用户可以配置 @tarojs/plugin-html 插件的 pxtransformBlackList 选项进行过滤。

// config/index.js
config = {
  plugins: [
    [
      '@tarojs/plugin-html',
      {
        // 包含 `adm-` 的类名选择器中的 px 单位不会被解析
        pxtransformBlackList: [/adm-/],
      },
    ],
  ],
}

这样配置后就可以自由自在的使用Ant Design Mobile了，不过Ant Design Mobile我也不太喜欢，一部分组件还是无法使用。