前言

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

零基础学小程序 —— 小程序入门（一）

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

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

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中导入就可以了。

结束

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

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

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

零基础学小程序 —— 模板样式（三）相关推荐

零基础学小程序006（后台数据的获取与解析）----请求服务器json数据展现到小程序上
视频讲解地址:https://edu.csdn.net/course/play/9531/265552 小程序云开发讲解视频:https://edu.csdn.net/course/detail/96 ...
【微信小程序】零基础学 | 小程序语法
在前面的章节中讲过WXML用于描述页面的结构.WXS用于结合WXML构建出页面的结构.WXSS用于描述页面的样式,它们三者都有特定的语法.其中,WXSS与CSS相差不大,所以就不单独列出了.本章主要讲 ...
wx轮播图接口学习用json格式_零基础学小程序008----列表和轮播图的实现，小程序解析json数据...
点击下面网址进入系列教程上一节带领大家实现领简单的计算器,这节来带领大家学习小程序列表功能. 本节知识点 1,定义本地json文件 2,本地文件引入 3,小程序列表渲染实现 4,解析本地json(为 ...
零基础微信小程序Day1
文章目录一.前言二.下载和注册三.认识界面四.小程序组件五.结尾一.前言学习目的(purpose):学会制作一款微信小程序,为今后毕设做准备. 背景介绍(introduction):计科 ...
局部配置和全局配置_06. 教你零基础搭建小程序（解读全局配置文件-tabBar字段）...
自从开始在知乎上发教程后,发现一个事情啊, 大家对于我写的教程,都在偷偷地收藏~~ 但是, 却没有银点赞~ 知乎这个平台吧,点赞的分量比收藏更大, 这里也不是要赞(我知道自己还能做的更好), 只是希望 ...
视频教程-5小时零基础入门小程序云开发-微信开发
5小时零基础入门小程序云开发码农一枚,非著名全栈开发人员.分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑. 多年全栈开发经验,擅长小程序,java,安卓,web前端开发. 邱石 ¥29.0 ...
【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
零基础学Python课后实战第三章
零基础学Python课后实战第三章实战一:模拟支付宝蚂蚁森林的能量产生过程实战二:猜数字游戏实战三:模拟跳一跳小游戏的加分块实战四:模拟10086查询功能实战一:模拟支付宝蚂蚁森林的能量产生 ...
零基础学Java程序有什么好的建议
java技术的快速发展,引起了很多人的关注,尤其是一些零基础人群,都想通过学习java技术来改善自己的职业,那么零基础学Java程序有什么好的建议呢?来看看下面的详细介绍. 零基础学Java程 ...

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

目录

前言