WXSS模板样式
wxss是一套
样式语言
,用于美化wxml的组件样式,类似于网页开发中的css
wxss和css的关系
wxss具有css大部分特性,同时,wxss还对css进行了扩展以及修改,以适应小程序的开发
与css相比,wxss扩展的特性有:
- rpx:尺寸单位
- @import:样式导入
1、rpx
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
1.1、rpx的实现原理
rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,px把所有设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)。
- 在较小的设备上,1rpx所代表的宽度较小
- 在较大的设备上,1rpx所代表的宽度较大
小程序在不同设备上运行的时候,会自动把x的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。
1.2、rpx与px之间的单位换算
在iPhone6上,屏幕宽度为375px,共有750个物理像素,等分为750rpx。则:
750rpx=375px=750物理像素
1rpX=0.5pX=1物理像素
设备 | rpx换算px(屏幕宽度/750) | px换算rpx(750/屏幕宽度) |
---|---|---|
iphone5 | 1rpx=0.42px | 1px=2.34rpx |
iphone6 | 1rpx=0.5px | 1px=2rpx |
iphone6 plus | 1rpx=0.552px | 1px=1.81rpx |
官方建议:开发微信小程序时,设计师可以用iPhone6作为视觉稿的标准。
开发举例:在iPhone6上如果要绘宽100px,高20px的盒子,换算成rpx单位,宽高分别为200rpx和40rpx。
2、样式导入
使用wxss提供的
@import
语法,可以导入外联的样式表
2.1、@import的语法格式
@import后跟需要导入的外联样式表的相对路径,用;
表示语句结束。示例如下:
/**index.wxss**/
@import "/common/common.wxss";
3、全局样式和局部样式
3.1、全局样式
定义在根目录的app.Wxss
中的样式为全局样式
,作用于每一个页面。
3.2、局部样式
在页面的.WXSs
文件中定义的样式为局部样式,只作用于当前页面
。
注意:
- 当局部样式和全局样式冲突时,根据
就近原则
,局部样式会覆盖全局样式 - 当局部样式的
权重大于或等于
全局样式的权重时,才会覆盖全局的样式
鼠标移动到.wxss文件的选择器中就可以查看到权重信息了
4、全局配置文件
4.1、全局配置文件及其常用的配置项
小程序根目录下的app.json
文件是小程序的全局配置文件,常见的配置如下:
- pages:记录当前小程序所有页面的存放路径
window
:全局设置小程序窗口的外观tabBar
:设置小程序底部的tabBar效果- style:v2:是否启用新版的组件样式
4.2、window
4.2.1、小程序窗口组成部分
4.2.2、了解window节点常用配置项
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | 字符串 | 导航标题文章内容 |
navigationBarTitleText | String | #000000 | 导航栏背景颜色 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持black/white |
backgroundTextStyle | String | dark | 下拉loading的样式,仅支持dark/light |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距离页面底部距离,单位px |
-
设置小程序导航栏的标题
设置步骤:app.json——>window——>navigationBarTitleText:”修改的标题文本”
-
设置小程序导航栏的标题背景色
设置步骤:app.json——>window——>“navigationBarBackgroundColor”: “#f08080”
-
设置小程序导航栏的标题颜色
只支持白色或者黑色
设置步骤:app.json——>window——>“navigationBarTextStyle”:“white”
-
全局开启
下拉刷新
功能概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
设置步骤:app.json——>window——>“enablePullDownRefresh”: true
在app.json中启用下拉刷新功能,会作用与每一个小程序页面
-
设置下拉刷新时窗口的背景色
设置步骤:app.json——>window——>“backgroundColor”: “#efefef”
-
设置下拉刷新时loadin加载的样式
设置步骤:app.json——>window——>“backgroundTextStyle”:“dark”
可选值只有:light和dark
-
设置上拉触底的距离
概念:
上拉触底
是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据
的行为。设置步骤:app.json——>window——>“onReachBottomDistance”: 50
`注意:默认距离为50px,建议使用:当上拉触底距离不足50的时候就会加载下一页的内容
4.2.3、tabBar
4.2.3.1、什么是tabBar
tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:
- 底部:tabBar
- 顶部:tabBar
注意:tabBar中只能配置最少2个最多5个
tab标签
当渲染顶部tabBar时,不是显示icon,只显示文本
4.2.3.2、tabBar的6个组成部分
- backgroundColor:tabBar的背景色
- selectedIconPath:选中时的图片路径
- borderStyle:tabBar上边框的颜色
- iconPath:未选中时的图片路径
- selectedColor:tab上的文字选中时的颜色
- color:tab上文字的默认(未选中)颜色
如何配置tabBar:在app.json文件中与window配置项同级配置tabBar
4.2.3.3、tabBar节点的配置项
属性 | 类型 | 是否必填 | 默认值 | 描述 |
---|---|---|---|---|
position | String | 否 | bottom | tabBar的位置,仅支持bottom/top |
borderStyle | String | 否 | block | tabBar上边框的颜色,仅支持black/white |
color | HexColor | 否 | tab上文字的默认值(未选中)颜色 | |
selectedColor | HexColor | 否 | tab上的文字选中时的颜色 | |
backgroundColor | HexColor | 否 | tabBar的背景颜色 | |
list |
Array |
是 | tab页签的列表最少2个最大5个 |
每一个tab项的配置项
属性 | 类型 | 是否必填 | 描述 |
---|---|---|---|
pagePath |
String | 是 | 页面路径,页面必须在pages中预定义 |
text |
String | 是 | tab上显示的文字 |
iconPath | String | 否 | 未选中时的图标路径;当postion为top时,不显示icon |
selectedIconPath | String | 否 | 选中时的图标路径;当postion为top时,不显示icon |
案例:配置tabBar
-
网上下载对应的图标
-
将图标图片放到项目的
image
文件下 -
创建三个页面的tab页面
"pages":[ "pages/home/home", "pages/message/message", "pages/contact/contact", "pages/index/index" ]
home为首页、message为消息页、contact是联系我们页面
tabBar签页面必须防止数组开始的位置,如果往后面放就无法渲染出来
-
配置tabBar选项
-
打开app.json配置文件,和pages、window平级,新增tabBar节点
-
tabBar节点中,新增
list数组
,这个数组中存放的是每一个tab项的配置对象【配置对象如上表二】直接输入tabBar回车就会自动生成一个基本的tab配置项
"tabBar": { "list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "/images/tabs/home.png", "selectedIconPath": "/images/tabs/message-active.png" }, { "pagePath": "pages/message/message", "text": "消息", "iconPath": "/images/tabs/message.png", "selectedIconPath": "/images/tabs/message-active.png" }, { "pagePath": "pages/contact/contact", "text": "联系我", "iconPath": "/images/tabs/contact.png", "selectedIconPath": "/images/tabs/contact-active.png" } ]}
-
效果如下
-
5、页面配置【常用配置项查看全局配置里面的表格一样的】
小程序中,每个页面都有自己的.js0配置文件,用来对当前页面的窗口外观、页面效果等进行配置。
5.1、页面配置和全局配置的关系
小程序中,app,json中的window节点,可以全局配置
小程序中每个页面的窗口表现
。
如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的jS0配置文件”就可以实现这种需求。
注意:当页面配置与全局配置冲突时,根据就近原则
,最终的效果以页面配置为准。
6、网络数据请求
6.1、小程序中网络数据请求的限制
出于安全性
方面的考虑,小程序官方对数据接口的请求做出了如下
两个限制:
-
只能请求
HTTPS
类型的接口 -
必须将接口的域名添加到信任列表中
-
查看合法域名列表信息
6.2、配置request合法域名
需求:希望请求https://www.escook.cn/
域名下的接口
配置步骤:大佬小程序后台——》开发管理——》开发设置——》服务器域名——》服务器域名
注意事项:
- 域名只支持https协议
- 域名不能使用IP或localhost
- 域名必须结果ICP备案
- 服务器域名一个月内最多可申请修改五次
6.3、发起get和Post请求
调用微信小程序提供的wx.request()
方法,可以发起get数据请求,实例如下:
请求的域名必须是上面添加配置的request域名下的接口,否则无法请求数据
getInfo(){
wx.request({
url: 'https://wwww.escook.cn/api/get',
method:'GET',
data:{
name:'zs',
age: 20
},
success: (res) => {
console.log(res);
}
})
},
post请求只需要改请求的类型
6.4、页面加载请求数据
找到onLoad监听页面加载事件,在里面调用具体的请求方法即可
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.方法名();
}
6.5、跳过request合法域名校验
如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口。
此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时开启「开发环境不校验请求域名、TLS版本及HTTPS证书」选项跳过request合法域名的校验。
注意:仅限在开发阶段调试使用,正式上校必须是合法的https域名
6.6、关于跨域和Ajax的说明
跨域问题只存在于
基于浏览器的Wb开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题。
AjaX技术的核心是依赖于浏览器中的XMLHttpRequest
这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起A)x请求”
,而是叫做“发起网络数据请求”。
7、案例-本地生活(首页)
7.1、首页效果以及实现步骤
在app.json中创建项目页面,将默认生成的两个页面也删除
"pages":[
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
]
在app.json中的window节点修改导航栏的信息
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#29476e",
"navigationBarTitleText": "第一个小程序",
"navigationBarTextStyle":"white"
}
在app.json中与window同级下配置tabBar【前提准备好icon图标图片】
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}
]
}
在hont.js文件中通过swiperList
数组来完成了图片路径的保存再通过遍历获取
<!--轮播图区域-->
<swiper indicator-dots circular>
<swiper-item wx:for="{
{swiperList}}" wx:key="id">
<image src="{
{item}}" mode="heightFix"></image>
</swiper-item>
</swiper>
样式
/* pages/home/home.wxss */
switch{
height: 350rpx;
}
switch image{
width: 100%;
height: 100%;
}
在hont.js文件中通过swiperList
数组来完成了图片路径的保存再通过遍历获取
<!--九宫格区域-->
<view class="grid-list">
<view class="grid-item" wx:for="{
{gridList}}" wx:key="id">
<!--<image src="{
{item.icon}}"></image>-->
<text>{
{item.name}}</text>
</view>
</view>
home.js文件
该文件写在data节点里面,icon是一个存放图片的路径
gridList:[
{
id:1,
name:'美食',
icon:''
},
{
id:2,
name:'微信',
icon:''
},
{
id:3,
name:'预约理发',
icon:''
},
{
id:4,
name:'项目源码',
icon:''
},
{
id:5,
name:'博客',
icon:''
},
{
id:6,
name:'辅导班',
icon:''
},
{
id:7,
name:'租房',
icon:''
},
{
id:8,
name:'装修',
icon:''
},
{
id:9,
name:'代驾',
icon:''
}
]
home.wxss样式文件【使用flex布局】
.grid-list{
display: flex;
flex-wrap: wrap;
border-top: 1rpx solid #efefef;
border-left: 1rpx solid #efefef;
}
.grid-item{
width: 33.33%;
height: 200rpx;
display: flex;
/*纵向*/
flex-direction: column;
/*剧中*/
align-items: center;
justify-content: center;
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
/*如果不设置一行放不了三个*/
box-sizing: border-box;
}
.grid-item image{
width: 60rpx;
height: 60rpx;
}
.grid-item text{
font-size: 24rpx;
margin-top: 10rpx;
}
<!--图片区域-->
<view class="img-box">
<image src="/images/link-01.png" mode="widthFix"></image>
<image src="/images/link-02.png" mode="widthFix"></image>
</view>
home.wxss样式文件
.img-box{
display: flex;
padding: 20rpx 10rpx;
justify-content: space-around;
}
.img-box image{
width: 45%;
}
案例展示效果
使用预览手机微信扫描二维码运行会比编辑器中好