注册登录

微信小程序样式介绍

2018-10-07
导读:对于css不熟悉的 Android 程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxm...

对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而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 **/

.appText{

margin:10px;

}

/** app.wxss **/

@import "other.wxss";

.content_text:{

margin:15px;

}

app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖。

 

重磅推荐:小程序开店目录

第一部分:小商店是什么

第二部分:如何开通一个小商店

第三部分:如何登录小商店

第四部分:开店任务常见问题

第五部分:小商店可以卖什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收货/物流

第九部分:小程序怎么结算

第十部分:小程序客服

第十一部分:电商创业

第十二部分:小程序游戏开发

电话咨询 微信咨询 预约演示 0元开店