前言

上文我们已经了解了小程序的模板语法，并详细认识了一些基本的语法，新手建议从第一章开始看

接下里我们将讲解小程序的模板样式

说到样式可能很多同学的想法是样式不重要，反正都会写。其实我一开始也在犹豫要不要把模板样式写上去，因为样式对于一个老程序员来说确实挺简单的，但是对于一些刚进入企业或者一些刚入门的新手程序员来说，可能你觉得你的样式写的没问题，但是别人一看你的代码就会觉得你是个新手，所以这里想讲讲模板样式，后面会把我自己的一些写样式在习惯加在后面，如果你觉得作者有什么地方写的不对的，也欢迎评论区提出，废话不多说，直接开始。

1.什么是 WXSS

WXSS 是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS

2.WXSS 和 CSS 的关系

WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。
与 CSS 相比，WXSS 扩展的特性有：

1.rpx 尺寸单位
2.@import 样式导入

3. rpx

3-1 什么是 rpx 尺寸单位

首先我们需要知道什么是rpx尺寸单位，

先看看官方的说法

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

简单来说 rpx就是微信小程序独有的，用来解决屏适配的尺寸单位。

3-2 rpx 的实现原理

了解了什么是rpx 那么下面来简单说说rpx的实现原理

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，
在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。
在较小的设备上，1rpx 所代表的宽度较小
在较大的设备上，1rpx 所代表的宽度较大
小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

这里说rpx在我们实际开发中我们使用rpx的时候使用完之后一定要记得多去ios系统上测试，特别是两个盒子紧贴在一起的时候如果我们使用rpx在苹果的一些机型上可能会出现有间隙的情况

3-3 rpx 与 px 之间的单位换算

在 iPhone6 上，屏幕宽度为375px，共有750 个物理像素，等分为 750rpx。
750rpx = 375px = 750 物理像素 1rpx = 0.5px = 1物理像素

这里我们在实际开发过程中如无特殊情况基本上都是以2rpx等于1px进入转换的

4. 样式导入

4-1 什么是样式导入

使用过一些css预处理器的同学应该就知道什么是样式导入，WXSS 提供的 @import 语法，可以导入外联的样式表。

4-2 @import 的语法格式

@import的语法格式跟我们的css预处理器使用方式一样

@import 后跟需要导入的外联样式表的相对路径，

举个例子首先我们在pages同级新建一个static文件夹在新建一个commit.wxss

在commit.wxss写入

.fz20{
  font-size: 20px;
}

然后在我们的index.wxss中引入

@import '../../static/commit.wxss';

这里需要注意的是最后一定需要加上;表示结束

然后在我们的index.wxml中直接使用

  <view class="usermotto">
    <text class="user-motto fz20">{
   
   {motto}}</text>
    <button bindtap="btn" data-info="{
   
   {'你好呀'}}">确定</button>
    <input  bindinput="inputbtn" style="border: 1px solid #5cf;" />
  </view>

然后可以看到

我们的样式就生效了。

5 全局样式和局部样式

5-1 全局样式

全局样式我们在一开始的结构介绍中已经说过了，全局样式就是我们的app.wxss，我们定义在app.wxss中的样式可以在我们任何页面直接使用

5-2 局部样式

在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。

当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式；当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

样式复用

当我们新开发一个页面的时候，你会发现很多页面的样式是重复的，如果可以抽离的还好，如果不能抽离那就只能一个个复制，但是你看见整个项目很多个重复的样式在不同的页面有没有感觉这里很low呢

那我们怎么把样式复用呢？

给大家先看一下我自己做的项目

我会在公共部分写下常用的样式，在页面中直接使用。

这里因为是自己一个人做的项目所以抽离的就比较多了。如果是公司的项目就不用抽离的那么细，可以将一些常用的抽离出来，当然在我们wxss中也可以这里，我们只需要将写好的样式在app.wxss中导入就可以了。

结束

好啦，到这里我们的微信小程序模板样式就讲解完毕了，如果你觉得写的还不错你可以点个关注哦。

如果你还有什么问题你可以选择↓↓↓

微信公众号搜索海海学前端 来了解更多

零基础学小程序 —— 模板样式（三）

目录

前言