模板
- 可以在模板中定义代码片段，然后在不同的地方调用。
- 通过name指定模板名字，然后通过is调用模板，通过data传入模板所需值
- 模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。
Page({
data: {
temData: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}" data="{{...temData}}"/>
</block>
引用模板
import
可以在该文件中使用目标文件定义的template
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
include
可以将目标文件除了 <template/> <wxs/> 外全部引入到 include 位置
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<!-- header.wxml -->
<view> header </view>
WXS模块
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML构建出页面的结构。
- wxs 不依赖于基础库版本，可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言，有自己的语法。
- wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。
- 在 iOS 上 wxs 会比 javascript 代码快 2 ~ 20 倍。android 设备上无差异。
组件
视图容器
- view 视图容器
可设置点击时动态改变class - scroll-view 可滚动视图区域
可设置横/竖向滚动，以及各种滚动事件，和onPullDownRefresh冲突 - swiper 滑块视图容器
- movable-view 可移动的视图容器，在页面中可以拖拽滑动
- cover-view/cover-image 覆盖在原生组件之上的视图
- cover-view 可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。
基础内容
- icon 微信自带图标
- text 文本
可以被长按选中，可显示连续空格，可解码 <等 - rich-text 用数组渲染的富文本
- progress 进度条
表单组件
- button 按钮
符合微信样式，可提交表单及调用专属开放能力，有点击时动态样式 - checkbox 多项选择器
- form 表单
可设置submit和reset事件，以及formId用于发送模板消息
表单内组件需要name以进行submit - label
- picker 从底部弹起的滚动选择器
包括普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器 - picker-view 嵌入页面的滚动选择器
- radio 单选项目
- slider 滑动选择器
- switch 开关选择器
- textarea 多行输入框
导航
- navigator 页面链接
- functional-page-navigator 仅在插件的自定义组件中有效，用于跳转到插件功能页
多媒体
- image 支持懒加载
- video
- camera
- map
- canvas
开放能力
- open-data 展示用户信息
- web-view 占据整个页面的web容器，无法在个人类型小程序使用
自定义组件
1. 组件的创建和使用
在组件json中配置为组件
{
"component": true
}
在使用处配置标签名和组件位置
{
"usingComponents": {
"my-component": "component/myComponent"
}
}
- 标签名只能是小写字母、中划线和下划线的组合
- 自定义组件也可以引用自定义组件
2. 组件的模板
- 通过slot节点可以将页面中的内容嵌入组件,多个slot时需要在组件js中声明
<!-- 组件模板 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
<!-- 引用组件的页面模版 -->
<view>
<component-tag-name>
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>
- 通过属性传值 此时组件可通过properties获取propA属性值
<component-tag-name prop-a="{{dataFieldA}}"></component-tag-name>
3.组件的样式
- 组件只受自身wxss样式影响，app.wxss和组件所在页面样式只有font，color等继承样式会影响组件，可以在 Component 中用 externalClasses 定义准许引入的外部样式类
- 组件和引用组件的页面无法使用id，属性，标签名选择器，应使用class选择器
- 后代选择器偶尔会有非预期表现
4.组件的生命周期
- created 组件实例化，但节点树还未导入，因此这时不能用setData
- attached 节点树完成，可以用setData渲染节点，但无法操作节点
- ready 组件布局完成，这时可以用SelectorQuery获取节点信息，也可以操作节点
- moved 组件实例被移动到树的另一个位置时触发
- detached 组件实例从节点树中移除时触发
5.组件的属性
- properties 对外属性，可设置类型，初始值和变化时的相应函数
- data 内部数据
注：properties字段和data字段相互间不能冲突（尽管它们位于不同的定义段中） - methods
- relations 组件间关系
- externalClasses 外部样式类
- options
组件通信
- WXML 数据绑定：用于父组件向子组件的指定属性设置数据。
- 事件：用于子组件向父组件传递数据。
- 如果以上两种方式不足以满足需要，父组件还可以通过
this.selectComponent方法获取子组件实例对象，直接访问组件的任意数据和方法。
