使用 uni-app 和 Tailwind CSS 制作王者荣耀英雄介绍小程序(一)

首先，来看看小程序是怎么样的吧：

取名字应该是程序员最痛苦的事情之一，虽然有一些通用、常用的名字可以借鉴，也有取帮助名字的网站，但终归还是要取。

最近 Tailwind CSS 比较流行，使用它就不用取名字了（至少可以少取很多名字），所以想对其了解一下。本人又喜欢打王者（常年钻石，最高也才星耀，别笑我），所以就想用 Tailwind CSS 和 uni-app 来制作一个王者荣耀英雄介绍小程序。

需要说明一下，选择 uni-app 和 Tailwind CSS 没有什么特别的原因，就是一个熟悉，一个想了解、学习一下，至于两者的优缺点就不讨论了，任何框架都有优缺点，比如现在流行 Vue.js 、 React 和 AngularJS，但谁说使用 jQuery 就不能做出优秀的项目呢？

内容有点长，我们分几篇文章来完成，今天先从 0 开始搭建环境和创建项目。

一、环境搭建

1、安装 Node.js，需要 12.13.0 或以上版本，Node.js 官网高铁；

2、全局安装 vue-cli；

npm install -g @vue/cli

二、创建项目

1、创建 uni-app 项目（选择默认模板）：

vue create -p dcloudio/uni-preset-vue my-project

2、安装 Tailwind CSS：

由于 PostCSS 目前未能兼容 Tailwind CSS，所以需要安装兼容版本，否所会报如下错误，Tailwind CSS 官网也有说明。

Error: PostCSS plugin tailwindcss requires PostCSS 8.

所以，目前使用下面的方式安装：

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3、PostCSS 中添加 Tailwind CSS：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

4、创建 Tailwind CSS 配置文件，在终端执行以下命令，会生成一个默认的配置文件 tailwind.config.js：

npx tailwindcss init

默认的 Tailwind CSS 配置文件内容如下：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

5、引入 Tailwind CSS，在 App.vue 文件的 style 中加入以下代码：

@tailwind base;
@tailwind components;
@tailwind utilities;

到这里，项目中就可以使用 Tailwind CSS 了，使用 npm run dev:h5 命令就能构建 h5 项目，在浏览器中能够正常显示。

然后，微信小程序并不能完全支持 Tailwind CSS 的命名规则，如 \: 、 \. 和 \/ 等等，小程序碰到这些规则会报错，所以我们还需要做两件事情：

5.1、使用 PostCSS 的插件 postcss-class-rename 和 css-byebye 来修改符号和移除一些规则，这样做之后，有些规则就不能使用了，不过问题也不大，我们可以尽量不使用这些规则，或者想想通过已知的规则来实现，或者通过自定义命名来“恢复”这些规则，这里先不展开讲，如果有人问起我再说，如果您有更好的方法，也可以留言让我和大家知道。

安装 postcss-class-rename 和 css-byebye：

npm i -D postcss-class-rename css-byebye

然后，在 PostCSS 配置文件中加入以下代码：

...(process.env.UNI_PLATFORM !== 'h5'
  ? [
    // 使用 postcss-class-name 包将小程序不支持的类名转换为支持的类名
    require('postcss-class-rename')({
      '\\\\:': '-',
      '\\\\.': '_'
    }),
    require('css-byebye')({
      rulesToRemove: [/\*/],
      map: false
    })
  ]
: [
    require('autoprefixer')({
      remove: true
    })
  ])

5.2、在 Tailwind CSS 的配置文件中 tailwind.config.js 停用一些规则，加入以下代码：

corePlugins: {
  container: false,
  preflight: false,
  space: false,
  divideWidth: false,
  divideColor: false,
  divideStyle: false,
  divideOpacity: false
},
separator: '_'

至此，编译后的代码就可以在微信开发者工具中打开了。

好了，今天先到这里，下次我们使用上面创建好的项目结合微信云开发来开发小程序。