wxml和wsxx 是微信小程序的视图层
WXML结构层
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
需要注意的是视图容器与html标签有比较大的差异
- 视图容器
- <view></view>
- <scroll-view></scrollview>可滚动的视图容器
- <swiper></swiper>滑块视图容器
- 基础内容
- <icon></icon> 图标
- <text></text>文本
- <progress></progress> 进度条
- 表单组件
- <button></button>
- <checkbox></checkbox>
- <form></form>
- <input/>
- <label></label>
- <picker></picker>滚动选择器
- <radio></radio>
- <slider></slider>滑动选择器。
- <switch></switch>开关选择器
- <textarea></textarea>
- 导航
- <navigator></navigator>
- 媒体组件
- <audio></audio>
- <image></image>
- <video></video>
- 地图
- <map></map>
画布 - <canvas></canvas>
wsxx样式层
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式;
与 CSS 相比扩展的特性有:
- 尺寸单位
- rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
- rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。
- 样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。