258资源分享网

对于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   画布  

 

关于这八大类的属性和具体用法可参考以下参考文献链接：

https://mp.weixin.qq.com/debug/wxadoc/dev/component/

二、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