微信小程序--WXML 模版

Data: 2020-06-02 20:07:59Form: JournalClick: 9

# 微信小程序--`WXML` 模版

# 一、什么是`WXML`

小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构

wxml书写方式跟html非常相似
wxml的组件有开始标签和结束标签，忘写结束标签会报错
wxml的标签支持属性、事件
wxml支持逻辑语法和条件判断

# 二、组件

分组	组件名	描述
视图容器	movable-view	可移动的视图容器，在页面中可以拖拽滑动
	movable-area	movable-view的可移动区域
	cover-image	覆盖在原生组件之上的图片视图
	cover-view	覆盖在原生组件之上的文本视图
	scroll-view	可滚动视图区域
	swiper	滑块视图容器
	swiper-item	仅可放置在swiper组件中，宽高自动设置为100%
	view	视图容器
基础容器	icon	图标
	progress	进度条
	rich-text	富文本
	text	文本
表单组件	button	按钮
	checkbox-group	多选框组
	checkbox	多选框
	editor	富文本编辑器，可以对图片、文字进行编辑
	form	表单
	input	输入框
	label	用来改进表单组件的可用性
	picker	从底部弹起的滚动选择器
	picker-view	嵌入页面的滚动选择器
	picker-view-column	滚动选择器子项。仅可放置于picker-view中
	radio-group	单项选择器
	radio	单选选择
	slider	滑动选择器
	switch	开关选择器
	textarea	多行输入框
导航	navigator	页面链接
导航	functional-page-navigator	仅在插件中有效，用于跳转到插件功能页
媒体组件	image	图片
	audio	音频
	video	视频
	camera	系统相机
	live-player	实时音视频播放
	live-pusher	实时音视频录制
地图	map	地图
画布	canvas	画布
开放能力	ad	Banner 广告
	official-account	公众号关注组件
	open-data	用于展示微信开放的数据
	web-view	承载网页的容器
原生组件	native-component	原生组件
无障碍访问	aria-component	无障碍访问
导航栏	navigation-bar	页面导航条配置节点，用于指定导航栏的一些属性。
页面属性配置节点	page-meta	页面属性配置节点，用于指定页面的一些属性、监听页面事件。

# 1、什么是组件

组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

# 2、组件使用

view 是视图容器，跟html中的div相同

<view>PHP中文网</view>
<view>欧阳克</view>

# 3、组件公共属性

编号|属性名|类型|描述|注解 ---|---|---|---|---|--- 1|id|String|组件的唯一标识|整个页面唯一 2|class|String|组件的样式类|在对应的 WXSS 中定义的样式类 3|style|String|组件的内联样式|可以动态设置的内联样式 4|hidden|Boolean|组件是否显示|所有组件默认显示 5|data-|Any|自定义属性|组件上触发的事件时，会发送给事件处理函数 6|bind/catch*|EventHandler|组件的事件

<view id="php" style="color:red;">PHP中文网</view>
<view id="ouyangke" style="color:green;">欧阳克</view>
<view hidden>隐藏的view</view>

# 4、组件属性

icon 图标

编号	属性	类型	默认值	必填	说明
1	type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
2	size	number/string	23	否	icon的大小
3	color	string		否	icon的颜色，同css的color

<view>
  <icon type="success"/>
  <icon type="info" size="18"/>
  <icon type="warn" size="16"/>
  <icon type="warn" size="14" color="orange"/>
</view>

备：组件有单独属性，需要大家多看文档

备：小程序没有类似html5中的 head、style组件。花里胡哨的组件都没有