20161122微信小程序学习笔记-wxml&wxss解析

wxml和wsxx 是微信小程序的视图层

WXML结构层

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

需要注意的是视图容器与html标签有比较大的差异

  1. 视图容器
  • <view></view>
  • <scroll-view></scrollview>可滚动的视图容器
  • <swiper></swiper>滑块视图容器
  1. 基础内容
  • <icon></icon> 图标
  • <text></text>文本
  • <progress></progress> 进度条
  1. 表单组件
  • <button></button>
  • <checkbox></checkbox>
  • <form></form>
  • <input/>
  • <label></label>
  • <picker></picker>滚动选择器
  • <radio></radio>
  • <slider></slider>滑动选择器。
  • <switch></switch>开关选择器
  • <textarea></textarea>
  1. 导航
  • <navigator></navigator>
  1. 媒体组件
  • <audio></audio>
  • <image></image>
  • <video></video>
  1. 地图
  • <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后跟需要导入的外联样式表的相对路径，用;表示语句结束。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容