文章目录

1. app.wxss
2.跳转按钮设置
- 2.1 hover-class
- 2.2 goStudy
- - 2.2.1 设置边框长宽
  - 2.2.2 字体居中设置
  - 2.2.3 边框离上、左、下距离设置
  - 2.2.4 字体大小、加粗设置
  - 2.2.5 边框厚度、颜色设置
  - 2.2.6 矩形边角设置
  - 2.2.7 字体颜色设置
3. 图片设置
- 3.1 设置图片长宽
- 3.2 设置图片位置
- 3.3 设置上下分割线
4. 结构布局
- 4.1 分割线设置
- 4.2 图标设置

本文主要介绍一些.wxss里的一些属性和功能

1. app.wxss

app.wxss主要是用在全局配置样式，有些可以共有的样式，就不需要在每个.wxss文件夹中重复使用，优先级比.wxss低一些，所以如果两者都写入了样式，会默认执行文件夹中.wxss的样式，会把app.wxss的样式覆盖掉，所以一般在app.wxss中都直接写入全局配置，具体每个页面样式，就到对应的.wxss中填写就好。

在app.wxss中输入代码：

page{height: 100%;background: #ffffff;
}

查看效果，这个为全局配置，如果不在对应的.wxss中修改的话，每个页面背景色都是为白色，上面的窗口颜色是从app.wxml中修改的，前面在app.json中讲过,关于window窗口中的navigationBarBackgroundColor
导航栏背景颜色设置

找到app.json中"navigationBarBackgroundColor": "#1ff",修改为"navigationBarBackgroundColor": "#ffffff",
可以修改导航栏颜色为白色

2.跳转按钮设置

设置跳转按钮要根据.wxml文件中的文件命名才能对其进行样式设置
我选取我的一段.wxml代码

<view class="goStudy"><navigator  style='display :inline;' url='/pages/star/star' open-type="navigate" hover-class="nav-hover"><ol><text>跳转按钮1</text></ol></navigator>
</view>

对命名hover-class="nav-hover"进行样式修改

2.1 hover-class

点击跳转时的颜色设置，在点击时颜色变化，可以清楚识别是否点击了跳转按钮

在.wxss中输入下面代码：

* 注释：设置跳转点击时的跳转颜色 */
.nav-hover{color:rgb(255, 0, 13);
}

点击时颜色变为红色

还可以修改成其他颜色，如color:yellow;，可以支持英文颜色输入和6位16进制颜色设置

2.2 goStudy

2.2.1 设置边框长宽

width：长rpx
height: 宽rpx

需要用到width和height两个属性设置长和宽
设置长和宽相等时为矩形，可以修改成自己想要的长和宽，可调整，代码：（单位：rpx）

 width: 280rpx;height: 280rpx;

2.2.2 字体居中设置

text-align: center

需要用到text-align属性将字体居中，能将字体居中，就不需要用margin自己用肉眼去调整字体居中，但是不需要居中设置的话用margin还是挺不错的，可以调整字体位置，代码：text-align: center;，就能将字体居中设置，可以把长度调大，字体永远都在中间

2.2.3 边框离上、左、下距离设置

margin：上边距rpx 左边距rpx 下边距rpx；
margin-top: 上边距rpx;
margin-bottom: 下边距rpx;
margin-left: 左边距rpx;
margin-right: 右边距rpx;

设置边框离上左右的距离可以由两种方法，可以直接

margin:上边距rpx  左边距rpx 下边距rpx；

为什么没有右边距呢？因为当上左下边距确定了，右边距自然就已经默认确定了，不需要在多此一举了。还有种方法就是每个单独去设置

 margin-top: 上边距rpx;margin-bottom: 下边距rpx;margin-left: 左边距rpx;margin-right: 右边距rpx;

这样看起来都比上面麻烦多了，建议直接采用margin然后设置上左下的边距，省了挺多时间，但是要注意一定要按上边距、左边距、下边距顺序写入，不可以自己随意调整顺序，但是能够省略，比如下边距没有要求，就直接写上左距离就好。
输入代码：

margin:10rpx 10rpx 10rpx;

效果图

当调整左边距可以使得图片居中
再修改代码：

margin:20rpx 280rpx 20rpx;

查看效果

2.2.4 字体大小、加粗设置

font-size: 字体大小
font-weight：字体宽度

字体大小默认是28rpx，font-size为字体大小设置， font-weight为字体粗细设置
输入代码：

/* 设置字体大小 */font-size: 28rpx;font-weight: 380;

修改size和weight数
修改后代码：

/* 设置字体大小 */font-size: 35rpx;font-weight: 700;

2.2.5 边框厚度、颜色设置

border: 厚度rpx solid 颜色;

边框厚度颜色由border来设置
输入代码：

border: 1rpx solid red;

效果图

修改一下进行对比
修改代码:

/* 边框长宽 */border: 10rpx solid yellow;

对比图

2.2.6 矩形边角设置

border-radius: 半径rpx;

矩形角度设置就要用到border-radius了，当半径为0时就是矩形
代码：

border-radius: 0rpx;

半径越大角度越圆，当半径足够大就可以为一个圆了
修改半径为1000，修改代码：

 border-radius: 1000rpx;

2.2.7 字体颜色设置

color : 颜色；

可以输入颜色英文名或者6位16进制数，直接输入代码：color: red;

3. 图片设置

3.1 设置图片长宽

width: 长度rpx;
height: 宽度rpx;

width设置图片长度（单位:rpx或px），也可以用百分比设置(单位：%)；
height设置图片宽度（单位：rpx或px）；提示：1px=2rpx
代码：

width: 300px;
height: 300px;

默认靠左

如果需要图片全部占满小程序的话，可以采用width: 100%;然后再设置宽度

  width: 100%;height: 300px;

效果就是图片占满长度

3.2 设置图片位置

margin：上边距rpx 左边距rpx 下边距rpx；
margin-top: 上边距rpx;
margin-bottom: 下边距rpx;
margin-left: 左边距rpx;
margin-right: 右边距rpx;

这个和2.2.3的用法是一样的，设置图片的间距

3.3 设置上下分割线

border-top: 线宽rpx solid 颜色;
border-bottom: 线宽rxp solid 颜色;

分割线主要将上下分割开，有助于区分不同内容，内容看起来更整洁。线宽一般采用1-2rpx就好，颜色采用淡色，能够看清楚就好，显得上下分明，分割线一般不要太显眼
采用：border-top: 1rpx solid #eee;
查看效果，能将上面和下面内容分割开。间距的话可以采用margin去调整，上面也已经讲到过了

4. 结构布局

设置像下面那样页面介绍，其实属性大多数上面都已经介绍过了，主要就是字体如何排版，这个重点就是在.wxml中把各需要样式设计的先命名好，采用:class="文件名"的格式，然后在.wxss中设置样式就好。注意把名字取成自己可以一眼看的出是那一部分的名字，就不需要再往回找这个名字对应哪个的样式。如果没有设置.wxss的话，这个排版局部就是非常混乱的，如下所示，没有设置.wxss的样式

设置.wxss的样式后

.wxml中的内容就不再继续介绍了，把每个class名记住就好，后面就在.wxss中写入对应的样式。
直接给出对应的的.wxml代码：

<view class='tmpContainer'><view class='avatar_data'><image src="/lsq/img/luo5.png"></image><text>may 19 2020</text></view><text class='company'>微信小程序</text><image class='contentImg' src="/lsq/img/luo3.jpg"></image><text class='content'>微信小程序（Wechat Mini Program）简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。这次微信小程序的推出，应该更会激发客户对微信公号的开发热情。</text><view class='collection_love'>< image src="/lsq/img/播放.png"></image><text>88</text><image src="/lsq/img/设置.png"></image><text>32</text></view><view class="star1"></view>
</view>
</template>

4.1 分割线设置

可以设置分割线线宽和上下间距，代码入下，修改border-top、 border-bottom和margin

.tmpContainer{display:flex;flex-direction: column;border-top: 1rpx solid #eee;border-bottom: 1rxp solid #eee;margin: 10rpx 0;
}

效果图

修改代码： border-top: 10rpx solid red;margin: 50rpx 0;

4.2 图标设置

1.设置图标左边距，代码入下

.avatar_data{padding: 10rpx;
}

房屋图标距离左边距离为10rpx，可以自行设置

2.设置图标大小和右间距

.avatar_data image{width: 60rpx;height: 60rpx;vertical-align: middle;margin-right: 10rpx;
}

设置图标长宽都是60rpx，且右间距为10rpx
3.设置字体大小和粗细

.avatar_data text{font-size: 32rpx;font-weight: 500;
}

字体设置为32rpx，粗细为500；
就完成了这一部分排版了

后面的那些内容基本上也都是关于图片长宽、字体颜色粗细大小设置，就不重复介绍了
.wxss代码：

.tmpContainer{display:flex;flex-direction: column;border-top: 1rpx solid #eee;border-bottom: 1rxp solid #eee;margin: 10rpx 0;
}.avatar_data{padding: 10rpx;
}.avatar_data image{width: 60rpx;height: 60rpx;vertical-align: middle;margin-right: 10rpx;
}.avatar_data text{font-size: 32rpx;font-weight: 500;
}.company{margin-left: 10rpx;font-size: 36rpx;font-weight: 700;margin: 10rpx;
}.contentImg{width: 100%;height: 460rpx;
}.content{font-size: 32rpx;text-indent: 32rpx;
}.collection_love image{width: 32rpx;height: 32rpx;vertical-align: middle;margin-right: 10rpx;
}.collection_love text{font-size: 28rpx;margin-right: 10rpx;
}.star1{display:flex;flex-direction: column;border-top: 1rpx solid #eee;border-bottom: 1rxp solid #eee;margin: 20rpx 0;
}

.wxss里的一些属性就介绍到这里了。

小程序开发学习（3）---.wxss详解篇相关推荐

学习（微信小程序开发入门及案例详解 --李骏，边思编著）
第一章初识小程序 1.小程序不仅在商业上具备很大潜力,同时在技术上解决了一套代码多端运行和动态发版的两大痛点,用户在微信中扫一扫或搜一下即可打开具备原生体验的应用,这给开发者带来了很大的想象空间 2 ...
微信小程序开发之生命周期详解？
小程序分为应用和页面两个部分: 应用的生命周期. 页面的生命周期. 应用的生命周期对页面生命周期的影响. 路由变化对页面生命周期的影响 1.应用的生命周期: 属性 ------------- 类型 - ...
微信小程序开发学习4（视图与逻辑）
微信小程序开发学习4(视图与逻辑) 1.学习目标能够知道如何实现页面之间的导航跳转能够知道如何实现下拉刷新效果能够知道如何实现上拉加载更多效果能够知道小程序中常用的生命周期函数 2.页面导航 ...
微信小程token_微信小程序url与token设置详解
微信小程序url与token设置详解新浪云应用sae的代码里创建一个weixin.php文件,写入以下代码 isValid(); class wechatAPI { public function ...
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...
微信小程序一键置顶操作详解：
微信小程序一键置顶操作详解: 第一种方式:采用scroll-view滚动视图实现第二种方式,直接用view实现第一种方式:采用scroll-view滚动视图实现下面是代码简介: wxml文件代码 ...
web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
微信小程序开发学习6（基础加强之使用npm包和全局数据共享及分包【Tab底栏案例改进】）
微信小程序开发学习6(基础加强之使用npm包和全局数据共享及分包) 1.使用npm包小程序对npm包的支持目前,小程序中已经支持使用p安装第三方包,从而来提高小程序的开发效率.但是,在小程序中使用 ...
小程序setdata优化_微信小程序 setData的使用方法详解
微信小程序 setData的使用方法详解微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元 ...
微信小程序开发学习2（模板与配置）
微信小程序开发学习2(模板与配置) 1.学习目标能够使用WXML模板语法渲染页面结构能够使用WXSS样式美化页面结构能够使用app,json对小程序进行全局性配置能够使用page.json对小 ...

小程序开发学习（3）---.wxss详解篇