Taro开发小程序该如何规划样式

秋凉_
1,406 阅读4分钟

前言

在开发过程中，尤其是在你用一个自己不太熟练框架去开发的时候，你会遇到各种各样的问题，而在大的方向上，我们要从一开始就要确定好，以便规划整个项目的整体走向。而且当你看完解决问题的过程，想必也清楚面试官为什么会希望你翻阅文档，关注社区，查阅github以及其中issue，很多问题不是baidu或者google或者是gpt就可以搜索到的，我愿意把整个过程分享在掘金，也希望越来越多的人可以把最新的、最佳实践一起分享，希望每个人在踩坑填坑的时候可以快速的找到正确的方向。

遇到了什么问题

在正式开篇之前，先说明，开发场景是我在用Taro Vue3 Nutui搭建项目，vue对于大家来说都不陌生，在我们日常的组件化开发过程中，我们为了防止样式造成全局污染，我们一般在写style的时候会加一个scoped，他实现的原理也较为简单，本质就是通过css的属性选择器来进行限定样式的作用范围，这里并不展开说明，有兴趣的同学可以自行研究。既然Taro支持vue的写法，所以最初我在写组件时，为了避免造成样式污染，便想当然的给style加上了scoped，去微信小程序看看效果吧，等待我的是？？？，我的样式怎么不生效！

解决问题

step1:定位到Taro文档，好好好，不支持scoped是吧，但是我们获得了两把密钥，一把是cssModules,另一把是#6662； image.png

step2:我们先不跳出文档，由cssModules定位到：
image.png

image.png

step3:先分析步骤2，例子给的很清晰，去配置文件将cssModules开启，使用也很简单，但是示例是react版本的，引入命名带有module的样式文件，通过对象属性的方式来添加样式，对比一些我的项目，配置文件写法不太一样，应该是更新了，vue的写法也不同，看来我们需要用到第二把密钥#6662，跳出文档，我们来到github的issue区，经过翻找，首先明白了配置为什么和社区截图的例子不一样:

image.png

step4:找到taro和vue3中的用法：

image.png

最佳实践(目前)

既然找到了方案那我们亲自在项目里验证一下:
1.config/index.ts下开启cssModules

image.png
2.新建iconText.module.scss

.wrapper {
  padding: 30px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  .box {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .text {
      font-size: 28px;
    }
  }
}

3.iconText.vue组件引入使用

<template>
  <view :class="style.wrapper">
    <view :class="style.box" v-for="(item, index) in iconBox" :key="index">
      <view><IconFont size="40" :name="item.url"></IconFont></view>
      <view :class="style.text">{{ item.text }}</view>
    </view>
  </view>
</template>

<script setup>
import style from './IconText.module.scss';
import { IconFont } from '@nutui/icons-vue-taro';

const iconBox = [
  {
    url: 'https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png',
    text: '测试文字',
  },
  {
    url: 'https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png',
    text: '测试文字',
  },
  {
    url: 'https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png',
    text: '测试文字',
  },
  {
    url: 'https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png',
    text: '测试文字',
  },
];
</script>

你又又又成功了你知道吗！
我们再稍微拓展一下，这是怎么保证css不会造成污染的，经过查阅，taro应该是通过postcss-modules来实现的，官方的说法：A PostCSS plugin to use CSS Modules everywhere.
简单说明一下：
你的css

.demo{
    color:red
}

转换后的css

.demo_xYiok{
    color:red
}

插件并且提供给你一个JSON的映射关系: { "demo":"demo_xYiok" } 我想聪明的你一定猜到了大概的过程，通过给class添加hash，并且提供映射表来实现的，我们去控制台查看最终打包后的代码也可以验证。

尾声

技术文章，尤其是在前端领域，迭代较快的框架下，这种以当下最佳实践方案为导向，而非原理说明的文章，是具有实效性的，可能前年是一种写法，今年是一种写法，明年又是一种写法，我更希望你可以get到我遇到问题，去解决问题的这个过程，整个过程，是否像是在玩解谜类的游戏，找到一个机关去触发下一个机关最终到达目的地。如果你在翻阅当前文章时,该方案恰好能帮到你也是最好的，重过程而轻结果，我们会遇到很多很多的问题，如果你只是关注结果而不重视过程那下次遇到问题的时候依然会棘手，希望我指引你的同时你也可以指引我，如果有更好的方案可以评论区告知我。

avatar
文章
阅读
粉丝