微信小程序wxss设置样式说明文档

对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置微信小程序样式，把对应的控件显示出来

一、wxml

微信小程序界面结构wxmL比较容易理解，微信小程序主要是由八大类基础组件构成：

一、视图容器(View Container)：		二、基础内容(Basic Content)
组件名	说明	组件名	说明
view	视图容器	icon	图标
scroll-view	可滚动视图容器	text	文字
swiper	可滑动的视图容器	progress	进度条
三、表单组件(Form)		四、操作反馈组件(Interaction)
组件名	说明	组件名	说明
button	按钮	action-sheet	上拉菜单
form	表单	modal	模态弹窗
input	输入框	progress	进度条
checkbox	多项选择器	toast	短通知
radio	单项选择器	五、导航(Navigation)
picker	列表选择器	组件名	说明
slider	滑动选择器	navigator	应用内跳转
switch	开关选择器
label	标签
六、多媒体(Media)		七、地图(Map)
组件名	说明	组件名	说明
audio	音频	map	地图
image	图片
video	视频
八、画布(Canvas)
组件名	说明
canvas	画布

 

二、微信小程序wxss

wxml理解起来容易，但光搭好了框架，并不能达到我们想要的界面效果，这就需要用到wxss样式了。

wxss样式决定了组件应该如何显示，并在css的基础上做了一些功能扩展，主要包括：

1.尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。

rpx 与 px单位换算如下：

 

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

 

2.样式导入

可以使用@import语句来导入外联样式表，其后面跟需要导入外联样式表的相对路径，并以分号结束。

例如：

/** other.wxss **/