組件、標簽以及模板的使用

在一個微信小程序中，需要用到大量的組件，一些頁面的設計也需要模板，在自己所學課程中，對於一些組件、標簽模板的使用有了初步的了解。

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.標簽

在組件的編程中，離不開標簽的使用，與網頁開發標簽類似，微信小程序的開發也存在著許多標簽的使用。其中最常用到的是以下標簽：

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>

微信小程序--家庭記賬本開發--03