上一篇：小程序学习笔记-2：NavigationBar和TabBar的使用
本篇内容
* 微信小程序页面布局中常使用的组件，及注意事项
用到的组件主要有：
-
view
小程序中比较基础的视图容器，类似html中的div。
可以在view属性中设置关于按住该容器后的样式及属性。
-
swiper
滑块视图容器，有很多方便的配置，指路：小程序文档：swiper。项目中用于首页的影片海报轮播。
其中只可放置swiper-item组件，否则会导致未定义的行为。将轮播的内容，此处是图片<img>组件，放入到swiper-item组件内。
-
scroll-view
可滚动视图区域。要想只有该区域滚动，纵向滚动时需要在wxss中设置一个初始的高度，横向滚动不需要。否则超出页面长度之后是页面滚动。
enable-back-to-top设置为true后iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。
感觉回到顶部这个功能不太明显，想加一个回到顶部的悬浮按钮。
-
block
<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。所以在其上设置样式不管用。
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
-
navigator
页面链接。基础功能类似html5中的<a>。
-
Navigation
Navigation是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。
-
navigation-bar
页面导航条配置节点，用于指定导航栏的一些属性。上一篇学习笔记
中已经整理了使用方法。
-
input
input是一个原生组件。也就是由客户端创建的原生组件，不是通过WebView渲染的。原生组件有一些样式、层级上的限制。
input组件仅在focus时表现为原生组件。
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发
-
template、import
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
首先在pages/common路径下新建一个wxml文件和wxss，用template模板把代码片段包起来，要给template设置name，用于引用。
//common-list.wxml
<template name="movie-list">
<text>{{ t1 }}</text>
</template>
然后在引用模板的文件中，通过import或者include引用模板，在template处指定名称和数据
//search.wxml
<import src="../common/common-list.wxml"/>
...
<template is="movie-list" data="{{t1: 'hellowold'}}"/>
总结：
本篇学习记录了小程序中常用组件的使用方法。
参考：
下一篇：小程序学习笔记-4：页面之间跳转
