组件、标签以及模板的使用
在一个微信小程序中，需要用到大量的组件，一些页面的设计也需要模板，在自己所学课程中，对于一些组件、标签模板的使用有了初步的了解。
1.组件
组件是数据和方法的简单封装，对于微信小程序，简洁的组件化编程对于开发来说有很大帮助。微信小程序支持自定义组件，自定义组件
类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：
{
"component": true
}
同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。
对于4个不同后缀文件的详细解释在之前博客中有过详细的介绍。
例如以下代码：
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
2.标签
在组件的编程中，离不开标签的使用，与网页开发标签类似，微信小程序的开发也存在着许多标签的使用。其中最常用到的是以下标签：
| 标签 | 使用 |
| view |
div和view都是盒模型，默认display:block。
盒模型在布局过程中，一般推荐display:flex的写法，配合justify-content:center;align-items:center;的定义实现盒模型在横向和纵向的居中
|
| text | 定义界面文本 |
| icon |
icon可以直接用微信组件默认的图标，默认是iconfont格式的，从WeUI那边沿袭过来的一种做法。
自定义的icon推荐svg sprite格式或者iconfont。
|
| input |
|
| picker |
picker默认支持普通、日期和时间三种选择器。
picker通过bindchange事件来调取range中自定义的数据数据，并展示到页面中，调用的是系统原生的select。
|
| navigator |
navigator支持相对路径和绝对路径的跳转，默认是打开新页面，当前页面打开需要加redirect;
navigator仅支持5级页面的跳转;
|
| image |
小程序的image与HTML5的img最大的区别在于：小程序的image是按照background-image来实现的。
默认image的高宽是320*240。必须通过样式定义去覆盖这个默认高宽
|
| button | 小程序可以利用按钮实现界面跳转 |
3.模板的使用
在微信小程序开发过程中，可能需要做到大量不同界面之间的转换，但在布局上又会有一些相同的地方，这是模板的使用就起到了很大的作用，可以通过定义一个模板实现界面的统一布局，减少代码量。
template模板
模板只需要在使用时，在不同界面位置进行相关调用即可。代码展示如下：
模板中的wxml文件：
<!--右侧无箭头 -->
<template name="listNone">
<view class="tui-menu-list">
<navigator url="{{item.url}}">
<block>
<text>{{item.title}}</text>
</block>
</navigator>
</view>
</template>
<!--右侧有箭头 -->
<template name="list">
<view class="tui-menu-list tui-youjiantou">
<navigator url="{{item.url}}">
<block>
<text>{{item.title}}</text>
</block>
</navigator>
</view>
</template>
template模板的WXSS
.tui-menu-list{ line-height: 80rpx; color: #555; font-size: 35rpx; padding: 0 0rpx 0 10px; position: relative; }
利用import进行调用：
<import src="../../template/list.wxml"/>
<view class="tui-fixed">
<scroll-view style="height:100%;" scroll-y="true">
<template wx:for="{{menu}}" is="list" data="{{item}}"></template>
</scroll-view>
</view>
