微信小程序--家庭记账本开发--03

组件、标签以及模板的使用

在一个微信小程序中，需要用到大量的组件，一些页面的设计也需要模板，在自己所学课程中，对于一些组件、标签模板的使用有了初步的了解。

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	input不需要设置line-height或padding来纵向居中。小程序把checkbox和radio都单独做成了组件，默认的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>