Weapp影视评分项目开发（05）：主题的实现与字体图标的使用

冰糖雪梨同学
245 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

前言

本篇文章主要介绍项目的主题颜色、全局样式以及字体图标的实现。

本篇文章对应源码分支：theme

知识点

var() 变量 iconfont 字体图标 字体组件封装 组件样式穿透 安卓与IOS系统样式统一 样式文件拆分

一、主题色的实现

本项目中的 wxss 使用了 sass 支持，但微信开发者工具在 app.wxss 中设置变量后，变量不能够在其它页面或组件中直接使用（可通过 import 方式在各页面或组件中导入，但每个文件都需要导入有些麻烦），所以本项目使用了 css 的 var() 方法。

注意：在 web 的 css 中存在根元素 :root 选择器，微信小程序中并不支持，而是实现了一个 page 属性作为全局或页面的根元素选择器，两者使用方式一致。

1. var( ) 函数

定义：css 的 var( ) 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

// app.scss
page {
  // 定义一个主题色变量
  --color-theme: #e54847;
}

// xxx.scss
.btn {
  // 使用主题色
  color: var(--color-theme);
}

本项目在 static/styles/theme.scss 中定义了项目中的一些主题色，在项目中任意位置均可使用，详细内容请查看该章节对应源码。

2. var( )函数的扩展

当我们在开发一个组件库时，组件库也会有默认主题色，一般我们会将主题色定义在一个单独的样式文件中，但这样就需要在每个组件的样式文件中引入，或者由用户在项目中引入这个文件，这样就增加了复杂性。好在 var( ) 函数是支持默认值的，当用户定义了变量时，则使用变量，若未定义，则使用默认值。我在 Mind UI Weapp 组件库中也是这么做的。例如：

/* button.scss */
.m-button {
  &--primary {
    background-color: var(--color-theme, #409EFF);
  }
}

当用户定义了 --color-theme 变量则会使用该变量，否则使用默认值 #409EFF。

二、字体图标的使用

本项目使用的是 阿里巴巴字体图标

我们登录该网站后，新建一个项目，将需要的图标添加到该项目中。

1. 图标形式选择

本项目使用的是 Font class 形式，如下图所示：
image.png

2. 字体格式选择

项目设置选择 WOFF TTF Base64 三种字体格式

image.png

选择字体 WOFF 与 TTF 字体的原因是两种字体在移动端的兼容性较好，也是微信小程序官方推荐的，Base64 是将以上两种字体生成 Base64 形式存入到 iconfont.css 文件中，所以在项目中只需要引入 iconfont.css 文件，不需要引入以上两种字体。

3. 字体下载

保存后我们点击 下载至本地 按钮，将下载的 iconfont.css 文件改为 iconfont.scss ，将其复制到 /static/styles/ 文件夹下。

4. 字体引入

我们在项目的 app.scss 文件中引入该字体文件

@import './static/styles/iconfont.scss';

小程序目前 .js 与 .wxss 或者 .scss 文件中不支持绝对路径。

5. 图标的使用

<text class="iconfont icon-star"></text>

6. 封装组件

由于项目中字体图标使用处非常多，且格式一致，只有字体名称的差异，所以我们将其封装并注册为全局组件，以方便使用。
我们在 /components 文件夹下新增 /iconfont 文件夹，开发者工具右键选择 新建 Component 生成相应的 index.xxx 文件，我们把 name 作为 properties 属性。

  • 组件创建
<!-- components/iconfont/index.wxml -->
<text class="iconfont icon-{{ name }}"></text>

index.js 特别注意，我们需要开启 addGlobalClass: true，否则外部样式无法影响到组件样式

// components/iconfont/index.js
Component({
  // 开启样式穿透，全局或页面样式可以影响到组件
  // 否则无法获取到字体图标
  options: {
    addGlobalClass: true
  },
  properties: {
    name: {
      type: String
    }
  }
})

index.scss 与 index.json 文件不需要改动。

  • 组件注册
    我们在 app.json 中注册该组件为全局组件并命名为 c-icon
// app.json
"usingComponents": {
  "c-icon": "/components/iconfont"
}
  • 组件使用
<c-icon name="home" />

至此， iconfont 在小程序中的使用已介绍完。如果你想了解更多字体图标在微信小程序中使用信息，请查看我的另一篇文章 详解：微信小程序中使用 iconfont 字体图标

三、全局默认样式属性与常用样式类

1. 全局默认样式属性

在做 web 开发的时候，我们一般会引入 reset.css 或者 normalize.css 等样式以使不同浏览器显示效果能够保持一致。小程序中同样需要。

  • 把所有元素的盒模型都设置为 box-sizing: border-box
    为什么需要这一步呢？因为安卓平台默认是 border-box，但 iOS 平台如 veiw 等元素是 content-box，两者并不一样，导致如元素 width: 100% 设置了 padding 属性， iOS 平台横向会出现滚动条的问题。
  • 设置默认值 
    page {
    font-size: 28rpx; // 默认字体大小
    color: #303133;   // 默认字体颜色
    overscroll-behavior-y: none; // 清除默认滚动到边时的效果
    font-family: 'PingFang SC', Helvetica, Arial, sans-serif; // 默认字体
}
  • 设置底部安全距离
    对于苹果或者安卓全面屏操作的手机，预留底部安全区域。 
    page {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

2. 常用样式类

一些常用样式我们放到全局，使用时就不需要重复实现，如文字溢出的处理：

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

我们将以上的样式类按功能拆分到单独的文件再引入到 app.scss 中，以方便维护，变更后的文件目录如下。

├── static                    // 静态文件
│   └── styles                // 样式文件夹
│       ├── reset.scss        // 样式行为统一
│       ├── theme.scss        // 主题色
│       ├── common.scss       // 常用样式类
│       └── iconfont.scss     // 字体图标
├── app.scss                  // 全局样式

最后我们将 styles 下的样式文件统一在 app.scss 中引入。

@import 'static/styles/reset.scss';
@import 'static/styles/theme.scss';
@import 'static/styles/common.scss';
@import 'static/styles/iconfont.scss';

最后

本篇文章主要讲述项目默认样式的设置与字体图标的使用，更多代码，请查看本章节对应的源代码，感谢阅读。

avatar
文章
阅读
粉丝