微信小程序wxml和wxss样式，小程序wxss讲解

来源：未知 浏览 151次 时间 2021-06-10 18:40

对于css不熟悉的Android程序员来说开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了网络营销工具大全开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了它们两者相当于android的布局文件12360网站它们两者相当于android的布局文件其中wxml指定了界面的框架结构而wxss指定了界面的框架及元素的显示样式。

一、wxml

微信小程序wxml和wxss样式

 

一、视图容器(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   画布  

 

微信小程序wxml和wxss样式

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  

标签： 屏幕说明选择器组件

上一篇: 利用WordPress REST API 开发微信小程序从 入门到放弃
下一篇: HP 微信小程序调用[统一下单][微信支付][支付回调]API；XML转Array，小程序中扫一扫在哪

热门文章

最新文章

QQ咨询